Vue项目中Axios的封装

      通常在项目中会有大量的请求，若每个请求都单独处理，会出现大量重复代码，同时，对API的增删改查也不方便。所以需要对axios请求进行封装，使项目整洁易管理。主要分为两部分，首先，要对api统一管理；其次，对请求统一处理。

1、API统一管理

      将所有的api放到一个js文件里，示例如下：

// api.js

const Api = {
    Login:{
        url: '/login',
        method: 'post'
    },
    Info:{
        url: '/info',
        method: 'get'
    },
    Delete:{
        url: '/delete',
        method: 'delete'
    }
}
export default Api

2、请求统一封装

// Http.js

import axios from 'axios';
import Api from 'api';    // 代表上个代码段的文件

// 创建一个 axios 实例
let instance = axios.create({
    baseURL:'http://...',    //后台服务地址
    timeout:1000    //超时时间
})
// 包裹请求方法的容器
const Http = {}
//请求格式的统一，传入params，isFormData，config三个参数
for(let key in Api){
    let api = Api[key];
    // async的作用是避免进入回调地狱
    Http[key] = async function(
        params,    // 请求参数
        isFormData=fase,    // 是否是form-data请求
        config={}    // 配置参数
    ){
        let newParams = {};
        //content-type是否是form-data的判断
        if(params && isFormData){
            newParams = new FormData();
            for(let i in params){
                newParams.append(i,params[i]);
            }
        }else{
            newParams = params;
        }
        //请求的返回值
        var res = null;
        //不同请求的判断
        if(api.method === 'post'){
            try{
                res = await instance[api.method](api.url,newParams,config){}
            }catch(err){
                res = err;
            }
        }else{
            // delete和get请求
            config.params = newParams;
            try{
                res = await instance[api.method](api.url,config){}
            }catch(err){
                res = err;
            }
        }
        return res;
    }
}

// 请求拦截器
instance.interceptors.request.use(config=>{
    // 发起请求前做什么？如显示加载中的动画、对重复请求的二次拦截或给header添加token
    return config
},error=>{
    // 请求错误如何处理？如请求超时的处理
})

// 响应拦截器
instance.interceptors.response.use(response=>{
    // 请求成功，可在此统一处理与后端约定的状态码
    return response
},error=>{
    // 请求错误如何处理？如弹框提示错误信息
})

export default Http

      如上，请求封装好了，那么如何来调用封装好的请求呢？首先在main.js中将封装好的Http全局注册。

// main.js

import Http from 'Http';    // 代表上个代码段的文件
// 将Http 挂载到Vue实例上
Vue.prototype.$Http = Http;

      然后就可以在页面中调用方法啦~ 

// login.vue

methods:{
    async Login(){
        let res = await this.$Http.Login({name:'nie',psd:'***'})
        // 此处为请求返回的数据
        console.log(res);
    },
    async Info(){
        let res = await this.$Http.Info()
        // 此处为请求返回的数据
        console.log(res);
    },
    async Delete(){
        let res = await this.$Http.Delete({id:1})
        // 此处为请求返回的数据
        console.log(res);
    }
}