집 >웹 프론트엔드 >JS 튜토리얼 >vue의 Axios 패키징에 대한 기본 소개(코드 포함)

vue의 Axios 패키징에 대한 기본 소개(코드 포함)

不言원래의: 2018-08-14 15:41:313371검색

이 글은 Vue(코드 포함)의 axios 패키징에 대한 기본 소개를 제공합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

Axios는 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 라이브러리입니다. vue 프로젝트에서 axios를 사용하는 것은 매우 현명한 선택입니다. vue 관계자는 더 이상 vue-resource를 유지하지 않고 axios 사용을 권장한다고 발표했기 때문입니다.

1 Axios를 선택하는 이유는 무엇입니까?

axios를 사용하면 통합된 요청-응답 차단을 수행할 수 있습니다. 예를 들어 응답 시 응답 정보를 가로채고 상태 코드를 확인하고 오류 메시지를 표시합니다.
요청 시간 초과를 설정합니다. 예를 들어 3000ms 후에도 응답이 없으면 요청이 중지됩니다.
약속을 기반으로 then을 사용하거나 요청을 처리하기 위해 쉽게 잡을 수 있습니다.
json 데이터 자동 변환

2 사용 방법 ?

다음 메소드를 사용할 수 있습니다

1. npm install axios --save
2. bower install axios --save
3. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

3 http 요청을 캡슐화합니다
공식 웹사이트에서 제공하는 예:

axios.get('/user?ID=12345')
  .then(function(response){
    console.log(response);
  })
  .catch(function(err){
    console.log(err);
  });

이를 바탕으로 특정 페이지에서 post get put delete 메소드를 다시 캡슐화해야 합니다. 인터페이스 함수를 호출하고 전달하기만 하면 됩니다. 매개변수만 입력하면 URL, 헤더 등과 같은 나머지 부분을 캡슐화해야 합니다.
예를 들어 index.vue의 함수를 사용하여 id를 통해 해당 사용자 정보를 얻고, 반환된 결과는 then 메소드의 결과입니다.

API.getUserInfo({id:'01'}).then((result)=>{})

4 구현 아이디어
새 파일을 만들고 다음과 같은 axios 객체 인스턴스를 빌드합니다. as axios.js

import axios from 'axios';
import router from '../router';
// 创建axios实例
const service = axios.create({            
  timeout: 30000 // 请求超时时间                                   
})
// 添加request拦截器 
service.interceptors.request.use(config => {         
  return config
}, error => {
  Promise.reject(error)
})
// 添加respone拦截器
service.interceptors.response.use(                  
  response => {
    let res={}; 
    res.status=response.status
    res.data=response.data;
    return res;
  },
  error => {
    if(error.response && error.response.status == 404){
     router.push('/blank.vue')
    }
   
        
    return Promise.reject(error.response)
  }
)

export function get(url, params = {}) {
  params.t = new Date().getTime(); //get方法加一个时间参数,解决ie下可能缓存问题.
  return service({
    url: url,
    method: 'get',
    headers: {     
    },
    params
  })
}


//封装post请求
export function post(url, data = {}) { 
  //默认配置 
  let sendObject={
    url: url,
    method: 'post',
    headers: {
      'Content-Type':'application/json;charset=UTF-8'       
    },
    data:data
  };
  sendObject.data=JSON.stringify(data);
  return service(sendObject)
}

//封装put方法 (resfulAPI常用)
export function put(url,data = {}){
  return service({
    url: url,
    method: 'put',
    headers: {
      'Content-Type':'application/json;charset=UTF-8'       
    },
    data:JSON.stringify(data)
  }) 
}
//删除方法(resfulAPI常用)
export function deletes(url){
  return service({
    url: url,
    method: 'delete',
    headers: {}
  }) 
}

//不要忘记export
export {
  service
}

위 코드는 주로 기본 axios 패키지를 구현합니다. 요청이 성공하면 주로 상태 코드 및 데이터와 같은 몇 가지 유용한 정보를 얻고 오류를 처리해야 합니다. 404를 반환하고 점프하는 것과 동시에 새 인터페이스로 이동

인터페이스 기능 캡슐화
api.js와 같은 새 파일 만들기

import {get, post,deletes,put} from './axios.js' ;//导入axios实例文件中方法
let bsae_api = process.env.BASE_API ? './'+process.env.BASE_API :'..' //获取项目api请求地址
//根据id获取用户信息
export const getUserInfoById=(id)=>{
    return get(`${bsae_api}/web/user/${id}`); //resfulapi风格
}

특정 페이지에는 index.vue 사용

import API from '@/utils/api'
getUserInfo(){
  API.getUserInfoById('01).then((result)=>{
   }).catch((error)=>{
 })
}

위는 기본입니다. axios 패키징 소개

vue의 Axios 패키징에 대한 기본 소개(코드 포함)

관련 기사