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;