为了账号安全,请及时绑定邮箱和手机立即绑定

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

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消