一次封裝可以在不同組件調(diào)用ajax請(qǐng)求坝橡，減少重復(fù)代碼
本示例返回的參數(shù)模板為:

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

封裝

1方仿、新建一個(gè)js文件，在這取名為ajaxFn.js

2藏澳、引入axios等模塊

import axios from 'axios'
import {Message} from 'element-ui' //引入element的消息框仁锯，用于post修改請(qǐng)求時(shí)的消息提示，可選
import store from '@/store/store.js' //引入vuex中的狀態(tài)翔悠，引用名和路徑根據(jù)項(xiàng)目實(shí)際情況业崖，可選

3、定義api域名變量和共用參數(shù)對(duì)象變量蓄愁，根據(jù)實(shí)際情況修改

var domain = ""; //api域名
var baseParams = { //基礎(chǔ)參數(shù)
    token: "",
    userid: 0
    //......
}; 

4双炕、封裝Get方法。其中init方法用于判斷是否有params參數(shù)撮抓，并合并參數(shù)對(duì)象妇斤，具體實(shí)現(xiàn)見(jiàn)后

function dataGet(apiName, params, callback){
    var url = domain + apiName;
    var obj = initFn(params, callback, arguments[1]); //init方法實(shí)現(xiàn)見(jiàn)后
    var nparams = obj.nparams;
    callback = obj.callback;

    axios.get(url, {params: nparams}).then((response) => {
        var all = response.data; //返回所有數(shù)據(jù)
        var data = response.data.data; //根據(jù)后端實(shí)際返回修改
        
        //根據(jù)后端實(shí)際返回修改
        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; //根據(jù)后端實(shí)際返回修改
        
        //根據(jù)后端實(shí)際返回修改
        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; //根據(jù)后端實(shí)際返回修改
        
        //根據(jù)后端實(shí)際返回修改
        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、補(bǔ)充實(shí)現(xiàn)init方法

function initFn(params, callback, argument){
    //如果沒(méi)有參數(shù)
    if (typeof argument == "function"){
        callback = argument;
        params = {};
    }
    //對(duì)象合并,確定最終參數(shù)
    return {
        nparams: $.extend({}, params, baseParams),
        callback: callback
    } 

}

8算撮、export上述方法

export{
    dataGet, dataPost, dataPostXD
}

使用

見(jiàn)如下示例：

//根據(jù)實(shí)際路徑引入剛才封裝的js文件
import {dataGet, dataPost, dataPostXD} from '@/assets/scripts/ajaxFn.js'

export default {
    name:'headerbar',
    data:function() {
        return {
            menuLists: []
        }
    },
    mounted(){
        this.getMenuLists(); 
    },
    methods:{
        getMenuLists(){
            //調(diào)用封裝的get方法生宛，post方法亦然
            dataGet("/Menu/GetMenuListAll", {levels: 1}, (data, all)=>{
                this.menuLists = data;
            });
        }
    }
}