vue simple in use and encapsulation axios

A, axios package

In order to use axios ease of use, eliminating the need to import a module vue, the package needs to be:

1, the new module http.js

import axios from 'axios'


// 设置基础apiUrl
axios.defaults.baseURL = 'http://127.0.0.1:8000/';


export default {
  install: function (Vue) {
    Object.defineProperty(Vue.prototype, '$http', {value: axios})
  }
}

2, the import main.js

At this time the method has $ http vue examples

import MyServerHttp from './plugins/http.js'

Vue.use(MyServerHttp);

3, call where needed

async editUser(context, object) {
//进行调用，其中object._this为vue实例
      const res = await object._this.$http.put(`crm/user/${object.userId}`, object.form);
      const {data, meta: {message, code}} = res.data;
      if (code === 2000) {
        context.dispatch("getAllUserList", {_this:object._this});
        object._this.editDialogFormVisible = false;
        object._this.$message.success(message);
      }
    },

Second, the use of interceptors

Interceptors do some action before sending a request, such as the header added to the token obtaining request from the localstorage.

// interception request, / addition request interceptor 
axios.interceptors.request.use ( function (config) {
   // do something before sending the request 
  IF (config.url! == "Login" ) { 
    config.headers [ ' the Authorization '] = localStorage.getItem ( "token" ); 
  } 

  return config; 
}, function (error) {
   // request to do something wrong 
  return Promise.reject (error); 
});

Third, the use of responder

Response is a response content in advance to do some filtering operation or the like, and then returns.

// addition response blocker 
axios.interceptors.response.use ( function (Response) {
   // response data something 

  const RES = response.data; 

  IF (res.count) return Response 

  IF (res.meta.code) {
     IF (res.meta.code === 2002 ) {
       // If the return code === 2002, returned without permission to view content, do not need to return the entire response 
      Message.warning ( "not authorized to view the corresponding data" ) 
    } 
    return response 

  } the else {
     return response; 
  } 

}, function (error) {
   // for something in response to the error
  return Promise.reject(error);
});

Full package code:

Axios from Import 'Axios' 
Import {} from the Message ' UI-Element ' ; 

// const MyHttpServer = {}; 

// MyHttpServer.install = (Vue) => { 
// 
//    // axios.baseURL =' HTTP: //127.0.0.1:8000/ '; 
// 
//    // add an example method 
//    Vue.prototype $ = Axios HTTP. 
// 
// }; 
// 
// Export MyHttpServer default 


// set base apiUrl 
axios.defaults = .baseURL 'http://127.0.0.1:8000/' ; 

axios.defaults.withCredentials = to true ; // allowed Cookie 


// interception request, / addition request interceptor
axios.interceptors.request.use ( function (config) {
   // do nothing before sending a request 
  IF (config.url! == "Login" ) { 
    config.headers [ 'the Authorization'] = localStorage.getItem ( "token " ); 
  } 

  return config; 
}, function (error) {
   // request to do something wrong 
  return Promise.reject (error); 
}); 
// 
// addition response blocker 
axios.interceptors.response.use ( function (response) {
   // data in response to something 

  const RES = response.data; 

  IF (res.count) returnresponse 

  IF (res.meta.code) {
     IF (res.meta.code === 2002 ) {
       // If the return code === 2002, returned without permission to view content, do not need to return the entire response 
      Message.warning ( "not authorized to view the corresponding data" ) 
    } 
    return response 

  } the else {
     return response; 
  } 

}, function (error) {
   // for something in response to the error 
  return Promise.reject (error); 
}); 


Export default { 
  the install: function (Vue) { 
    Object.defineProperty (Vue.prototype, '$ HTTP'  , value {:} Axios)
  } 
}

http.js