Vue合理配置axios并在项目中进行实际应用

    vue add axios
    # yarn | npm安装
    yarn add axios | npm install axios

this.axios.${方法名}.then().catch()
// 例子
this.axios.get(url,requestData).then((res)=>{
    // 成功的回调
}).catch((err)=>{
    // 失败的回调
});

/*
    支持所有http请求以及请求取消、并发请求等功能，更多细节以及使用方法移步官方文档
    文档: [axios文档](http://www.axios-js.com/zh-cn/docs/)
*/

"use strict";
import Vue from 'vue';
import axios from "axios";
import store from '../store/index';
let config = {
// baseURL在此处省略配置,考虑到项目可能由多人协作完成开发，域名也各不相同，此处通过对api的抽离，域名单独配置在base.js中

 // 请求超时时间
 timeout: 60 * 1000,
 // 跨域请求时是否需要凭证
 // withCredentials: true, // Check cross-site Access-Control
 heards:{
   get:{
     'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
     // 将普适性的请求头作为基础配置。当需要特殊请求头时，将特殊请求头作为参数传入，覆盖基础配置
  },
   post:{
     'Content-Type': 'application/json;charset=utf-8'
     // 将普适性的请求头作为基础配置。当需要特殊请求头时，将特殊请求头作为参数传入，覆盖基础配置
  }
},
 // 在向服务器发送请求前，对数据进行处理，axios默认会序列化数据
 // transformRequest:[function(data){
 //
 // }],
 // 在传递给 then/catch 前，修改响应数据
 // transformResponse:[function(data){
 //
 // }]
};
/**
* 请求失败后的错误统一处理，当然还有更多状态码判断，根据自己业务需求去扩展即可
* @param {Number} status 请求失败的状态码
*/
const errorHandle = (status, other) => {
 // 状态码判断
 switch (status) {
     // 401: 未登录状态，跳转登录页
   case 401:
     // 跳转登录页
     break;
     // 403 token过期
   case 403:
     // 如果不需要自动刷新token，可以在这里移除本地存储中的token，跳转登录页

     break;
     // 404请求不存在
   case 404:
     // 提示资源不存在
     break;
   default:
     console.log(other);
}};

// 创建实例
const _axios = axios.create(config);
// 请求拦截器
_axios.interceptors.request.use(
 function(config) {
   // 从vuex里获取token
   const token = store.state.token;
   // 如果token存在就在请求头里添加
   token && (config.headers.token = token);
   return config;
},
 function(error) {
   // Do something with request error
   error.data = {};
   error.data.msg = "服务器异常";
   return Promise.reject(error);
}
);

// 响应拦截器
_axios.interceptors.response.use(
 function(response) {
  // 清除本地存储中的token,如果需要刷新token，在这里通过旧的token跟服务器换新token，将新的token设置的vuex中
   if(response.data.code===401){
     localStorage.removeItem("token");
  }
   // 只返回response中的data数据
   return response.data;
},
 function(error) {
   if(error){
     // 请求已发出，但不在2xx范围内
     errorHandle(error.status,error.data.msg);
     return Promise.reject(error);
  }else{
     // 断网
     return Promise.reject(error);
  }
}
);

// eslint-disable-next-line no-unused-vars
Plugin.install = function(Vue, options) {
 Vue.axios = _axios;
 window.axios = _axios;
 Object.defineProperties(Vue.prototype, {
   axios: {
     get() {
       return _axios;
    }
  },
   $axios: {
     get() {
       return _axios;
    }
  },
});
};

Vue.use(Plugin);
// 导出插件和_axios
export default {Plugin,_axios};

 // main.js
 import './plugins/axios'

    /**
     * api统一出口
     * */
    // 网站管理接口
    import websiteManageAPI from './websiteManageAPI';
    // 其他模块接口
    
    // 导出接口
    export default {
        websiteManageAPI,
        // ...
    }

    /*
    * 网站管理接口
    * */
    import services from '../plugins/axios'
    import base from './base'; // 导入接口域名列表
    const websiteManageAPI = {
        // 登录
        login(params){
            return services._axios.post(`${base.lk}/login`,params);
        },
        // 测试post接口
        postJSON(params){
            return services._axios.post(`${base.lk}/getter/postJSON`,params);
        },
        // 测试get接口
        getJSON(pageNo,pageSize){
            return services._axios.get(`${base.lk}/getter/getJSON`,{params:{pageNo:pageNo,pageSize:pageSize}});
        }
    };
    
    export default websiteManageAPI;

     /*
    * 接口域名管理
    *
    * */
    const base = {
        lk:"https://www.kaisir.cn/user",
        other:"https://kf.kaisir.cn/api"
    };
    
    export default base;

    // 挂载到原型（main.js）
    Vue.prototype.$api = api;

    // App.vue,created生命周期
    const token = localStorage.getItem("token");

    //
    if(lodash.isEmpty(token)){
        // 跳转登录页:此处仅用于演示,用户名和密码为固定数据，实际需求为跳转登录页面进行授权
        const userInfo = {
          "username":"测试",
          "password":"0x89oikklsa"
        };
        // 调用登录api
        this.$api.websiteManageAPI.login(userInfo).then((res)=>{
          // 将token进行存储并更新到vuex中
          localStorage.setItem("token",res.token);
          this.$store.state.token = res.token;
        });
    }else{
        // 更新vuex中的token
        this.$store.state.token = token;
    }

    // 测试其他接口能否调用成功
    this.$api.websiteManageAPI.getJSON(1,3).then((res)=>{
        console.log("接口调用成功");
        console.log(res)
    });
}