Vueaxios封裝

一、Vue封裝axios

在Vue中使用axios，需要將其在Vue中進行封裝，方便在多處進行調用，以便減少代碼冗餘。下面給出一個簡單的Vue axios封裝例子：

import axios from 'axios';

//定義一個工具對象
const http = {};

http.get = function(url, config = {}) {
  return axios.get(url, config);
}

http.post = function(url, data = {}, config = {}) {
  return axios.post(url, data, config);
}

Vue.prototype.$http = http;

封裝步驟分為以下幾步：

1、引入axios

  import axios from 'axios';

2、定義一個工具對象

  const http = {};

3、定義get、post等方法

  http.get = function(url, config = {}) {
  return axios.get(url, config);
}

http.post = function(url, data = {}, config = {}) {
  return axios.post(url, data, config);
}

4、實例化Vue，並把工具對象賦值給Vue.prototype.$http

  Vue.prototype.$http = http;

二、封裝axios的用處

Vue axios封裝最大的好處在於代碼復用，可以避免在多個Vue組件中使用axios時，每個組件都需要重新引入、配置axios的情況。同時，對於頻繁請求接口的情況下，可以對axios進行進一步封裝，封裝後的axios可以實現自動加入請求頭、請求參數等功能。

三、Vue axios封裝考慮的問題

Vue axios封裝需要考慮以下幾個問題：

1、axios的攔截器

axios可以通過攔截器對請求進行攔截、處理，Vue axios封裝時需要考慮如何應用攔截器，以實現對請求、響應的攔截、預處理。

2、接口請求地址管理

在Vue axios封裝中，需要考慮如何管理接口請求的地址，以便實現靈活的接口請求地址管理、切換、配置等功能。

3、錯誤處理機制

在Vue axios封裝中，需要考慮如何處理接口請求出現的錯誤，以便實現更好的錯誤處理機制、提高用戶體驗。

四、Vue axios封裝示例代碼

下面給出一個示例的Vue axios封裝代碼，具備上述幾點考慮：

import Vue from 'vue';
import axios from 'axios';

// 添加請求攔截器
axios.interceptors.request.use(function (config) {
  // 在發送請求之前做些什麼
  config.headers['Authorization'] = 'Bearer ' + getToken(); // 加入請求頭
  return config;
}, function (error) {
  // 對請求錯誤做些什麼
  return Promise.reject(error);
});

// 添加響應攔截器
axios.interceptors.response.use(function (response) {
  // 對響應數據做點什麼
  return response;
}, function (error) {
  // 對響應錯誤做點什麼
  const status = error.response.status;
  if (status === 401) { // token失效
    // 清空token並跳轉到登錄頁面
    clearToken();
    router.replace({
      path: '/login',
      query: {redirect: router.currentRoute.fullPath}
    });
  } else if (status === 404) { // 接口不存在
    console.log('接口不存在');
  } else if (status === 500) { // 服務器錯誤
    console.log('服務器錯誤');
  }
  return Promise.reject(error);
});

const http = {
  get: function (url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.get(url, {params: params})
        .then(res => {
          if (res.data.code === 200) { // 接口請求成功
            resolve(res.data.data);
          } else {
            reject(res.data.msg);
          }
        })
        .catch(err => {
          reject('網絡錯誤');
        })
    })
  },
  post: function (url, data = {}) {
    return new Promise((resolve, reject) => {
      axios.post(url, data)
        .then(res => {
          if (res.data.code === 200) { // 接口請求成功
            resolve(res.data.data);
          } else {
            reject(res.data.msg);
          }
        })
        .catch(err => {
          reject('網絡錯誤');
        })
    })
  }
}

Vue.prototype.$http = http;

export default http;