vue中axios的封裝以及簡單使用

一、axios的封裝

在vue中為了使用axios使用方便，不需要每一個模塊進行導入，就需要對其進行封裝：

1、新建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、在main.js中導入

此時vue實例中已經有$http方法了

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

Vue.use(MyServerHttp);

3、在需要的地方進行調用

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);
      }
    },

二、攔截器的使用

攔截器是在發送請求之前做一些動作，比如將將token從localstorage中獲取添加到請求頭中。

// 攔截request,/ 添加請求攔截器
axios.interceptors.request.use(function (config) {
  // 在發送請求之前做些什么
  if (config.url !== "login") {
    config.headers['Authorization'] = localStorage.getItem("token");
  }

  return config;
}, function (error) {
  // 對請求錯誤做些什么
  return Promise.reject(error);
});

三、響應器的使用

響應器是對響應的內容提前做一些過濾之類的動作，然后返回。

// 添加響應攔截器
axios.interceptors.response.use(function (response) {
  // 對響應數據做點什么

  const res = response.data;

  if (res.count) return response

  if (res.meta.code) {
    if (res.meta.code === 2002) {
      //如果返回的code === 2002,就返回無權限查看內容，不需要將整個response返回
      Message.warning("無權查看對應數據")
    }
    return response

  } else {
    return response;
  }

}, function (error) {
  // 對響應錯誤做點什么
  return Promise.reject(error);
});

完整封裝代碼：

import axios from 'axios'
import {Message} from 'element-ui';

// const MyHttpServer = {};

// MyHttpServer.install = (Vue) => {
//
//   // axios.baseURL = 'http://127.0.0.1:8000/';
//
//   //添加實例方法
//   Vue.prototype.$http = axios
//
// };
//
// export default MyHttpServer


// 設置基礎apiUrl
axios.defaults.baseURL = 'http://127.0.0.1:8000/';

axios.defaults.withCredentials = true; // 允許攜帶cookie


// 攔截request,/ 添加請求攔截器
axios.interceptors.request.use(function (config) {
  // 在發送請求之前做些什么
  if (config.url !== "login") {
    config.headers['Authorization'] = localStorage.getItem("token");
  }

  return config;
}, function (error) {
  // 對請求錯誤做些什么
  return Promise.reject(error);
});
//
// 添加響應攔截器
axios.interceptors.response.use(function (response) {
  // 對響應數據做點什么

  const res = response.data;

  if (res.count) return response

  if (res.meta.code) {
    if (res.meta.code === 2002) {
      //如果返回的code === 2002,就返回無權限查看內容，不需要將整個response返回
      Message.warning("無權查看對應數據")
    }
    return response

  } else {
    return response;
  }

}, function (error) {
  // 對響應錯誤做點什么
  return Promise.reject(error);
});


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