vue项目中axios封装总结

日常业务中我们通常会对axios进行封装来使用，这么做的好处是：我们可以在每次请求前对请求做处理还可以对错误进行统一处理，从而避免每次发请求都要做重复的工作。比如：我们每次发送请求前都需要对请求的url做处理，就可以用到axios请求拦截；对后端返回的错误或网络错误通过响应拦截进行统一处理 等等。

代码如下：

//fetch.js
import Axios from 'axios';

const fetch = Axios.create({
        withCredentials: false,
        baseURL,
        timeout: 20000, // 设置超时时间
    });
    let loading;
//请求拦截
    fetch.interceptors.request.use(function (config) {
        const token = utils.getCookie('X-Access-Token');
        config.headers = { 'X-Access-Token': token || '' }
//每次请求前加个loading
        loading = vm.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
        });
        return config;
    }, function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
    });

    // 添加响应拦截器 无论成功与否都关掉loading
    fetch.interceptors.response.use(function (response) {
        loading.close();
        return response;
    }, function (error) {
        // 对响应错误做点什么
       loading.close();
        const { status, data } = error.response;
        switch (status) {
           //针对不同错误状态码做响应操作
          case 401:
          case 412:
            router.push('/login');
            vm.$message(data.error.message);
            break;
          default:
            vm.$message(data.error.message);
            return Promise.reject(data);
        }
    });

export default fetch;
//main.js  
//把请求方法放到Vue的原型链上 这样在其他页面通过 this.$http.get/post(...)就可以使用了
import fetch from './request/fetch'

Vue.prototype.$http={
  get(url,base,config){
    let data={params:base};
    return fetch(url,data,config);
  },
  post(...arr){
    return fetch.post(...arr);
  },
  put(url,base,config){
    // let data={data:base};
    let data=base;
    return fetch.put(url,data,config)
  },
  delete(url,base,config){
    let data={data:base};
    return fetch.delete(url,data,config);
  }
}
//页面中使用
this.$http.get(url).then(res=> {
        let data = res;
        if (data.status == 200) {
         //do something
        }
      })