一次封裝可以在不同組件調用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;
            });
        }
    }
}