Vue中对axios简单的封装

说明

代码源于之前写的项目 可以参考一下

在axios已安装的情况下新建一个api.js文件

import Vue from 'vue'
import axios from 'axios' //导入axios
import {Message} from 'element-ui' //安装ui库后导入 这个是为了出错弹框提示的 可做延伸使用

Vue.component(Message)

var domain = "http://000.000.00.00:0000/app/query";
function dataPost(params,callback){
    var url=domain;  //定义url
    var obj = initFn( callback, arguments[1]);
    callback = obj.callback;

    axios.post(url, params).then((response) => {
        var all = response.data;
        var data = response.data.data; //data根据json传输的自己定义
        if(all.code==0){
            if(callback) callback(data, all);
        }else{
            console.log(all.state, all.message);
        }
        
    }).catch((error)=>{
        console.log(error);
    });
}
//下边这个方法和上边的相比多了弹窗报错功能
function dataPostXD(params, callback){
    var url=domain;
    var obj = initFn(callback, arguments[1]);
    callback = obj.callback;

    axios.post(url, params).then((response) => {
        var all = response.data;
        var data = response.data.data;
        
        if(all.code==0){
             Message({message: '操作成功！', type: 'success'});
             if(callback) callback(data, all);

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

function initFn(callback, argument){
    if (typeof argument == "function"){
        callback = argument;
    }
    return {
        callback: callback
    } 
    }
export{
//导出方法
    dataPost, dataPostXD
}

在return中定义params

在return中定义params

return {
				params: {
    "columns": ["name", "agent",  "estimateTime", "actualTime", "timeoutLength"],
					"filter": { //过滤条件
						"timeoutAlarmType": {
							"eq": "enterTimeout"
						},
						"createTime": {
							"gt": "2018/11/21/00:00:00",
							"le": "2018/11/22/00:00:00"
						}
					},
					"table": "AlarmRecord"
				},
			}
		},

在creat内调用方法

created() {
dataPostXD(this.params, (data, all) => {
			console.log(data);
				this.company = data;
				this.enterList = this.company;
			})
		}

图片演示结果