Vue-cli axios 再封装

一次封装可以在不同组件调用ajax请求，减少重复代码
本示例返回的参数模板为:

{  state:1, //1为成功
  message:"",  data:[]
}

封装

1、新建一个js文件，在这取名为ajaxFn.js

2、引入axios等模块

import axios from 'axios'import {Message} from 'element-ui' //引入element的消息框，用于post修改请求时的消息提示，可选import store from '@/store/store.js' //引入vuex中的状态，引用名和路径根据项目实际情况，可选

3、定义api域名变量和共用参数对象变量，根据实际情况修改

var domain = ""; //api域名var baseParams = { //基础参数
    token: "",    userid: 0
    //......};

4、封装Get方法。其中init方法用于判断是否有params参数，并合并参数对象，具体实现见后

function dataGet(apiName, params, callback){    var url = domain + apiName;    var obj = initFn(params, callback, arguments[1]); //init方法实现见后
    var nparams = obj.nparams;
    callback = obj.callback;

    axios.get(url, {params: nparams}).then((response) => {        var all = response.data; //返回所有数据
        var data = response.data.data; //根据后端实际返回修改
        
        //根据后端实际返回修改
        if(all.state==1){ //成功
            if(callback) callback(data, all);
        }else{ //失败
            console.log(all.state, all.message);
        }

    }).catch((error)=>{        console.log(error);    
    });
}

5、封装Post方法

function dataPost(apiName, params, callback){    var url = domain + apiName;    var obj = initFn(params, callback, arguments[1]);    var nparams = obj.nparams;
    callback = obj.callback;

    axios.post(url, nparams).then((response) => {        var all = response.data;        var data = response.data.data; //根据后端实际返回修改
        
        //根据后端实际返回修改
        if(all.state==1){ //成功
            if(callback) callback(data, all);
        }else{ //失败
            console.log(all.state, all.message);
        }
        
    }).catch((error)=>{        console.log(error);
    });
}

6、封装含element消息提示框的Post方法

function dataPostXD(apiName, params, callback){    var url = domain + apiName;    var obj = initFn(params, callback, arguments[1]);    var nparams = obj.nparams;
    callback = obj.callback;

    axios.post(url, nparams).then((response) => {        var all = response.data;        var data = response.data.data; //根据后端实际返回修改
        
        //根据后端实际返回修改
        if(all.state==1){ //成功
            Message({message: '操作成功！', type: 'success'});            if(callback) callback(data, all);

        }else{ //失败
            console.log(all.state, all.message);
            Message({message: '操作失败！', type: 'error'});
        }
        
    }).catch((error)=>{        console.log(error);
        Message({message: '操作失败！', type: 'error'});
    });
}

7、补充实现init方法

function initFn(params, callback, argument){    //如果没有参数
    if (typeof argument == "function"){
        callback = argument;
        params = {};
    }    //对象合并,确定最终参数
    return {        nparams: $.extend({}, params, baseParams),        callback: callback
    } 

}

8、export上述方法

export{
    dataGet, dataPost, dataPostXD
}

使用

见如下示例：

//根据实际路径引入刚才封装的js文件import {dataGet, dataPost, dataPostXD} from '@/assets/scripts/ajaxFn.js'export default {    name:'headerbar',    data:function() {        return {            menuLists: []
        }
    },
    mounted(){        this.getMenuLists(); 
    },    methods:{
        getMenuLists(){            //调用封装的get方法，post方法亦然
            dataGet("/Menu/GetMenuListAll", {levels: 1}, (data, all)=>{                this.menuLists = data;
            });
        }
    }
}

作者：w3stone
链接：https://www.jianshu.com/p/5030ba1bb32d