纯属个人记录,代码很糙,因为博客之前发布过一次,这次是修订之后的。已经比较全面的解决了我目前所遇到的痛点。
项目痛点:
1、每次接口调用完成都需要处理错误提示和操作成功提示。
2、页面蒙版并不能解决用户点击提交的时候重复提交请求
解决:
1、ajax继承页面蒙版控制
2、错误和成功信息既可以全局处理也可以自定义
3、ajax代码集成防抖函数
4、默认数据过滤处理,当字符串中出现NaN,undefined,null则过滤,数据为空过滤,注意长度为零的数组不过滤
项目环境:vue,axios,elementUI
ajax防抖缺陷:
防抖处理缺陷:
当两个函数同时需要防抖的时候另一个函数也会受到防抖的影响,所以请避免同时需要防抖。如需要,额外处理第二个防抖函数。
import Vue from "vue";
import axios from "axios";
import VueAxios from "vue-axios";
import { Notification, Loading } from "element-ui";
// axios全局导入设置
Vue.use(VueAxios, axios);
//自定义函数信息
let custom = {
//成功信息提示
sucIfno(info) {
Notification({
type: "success",
message: info
});
},
//错误信息提示
errIfno(info) {
Notification({
type: "error",
message: info
});
}
};
//过滤空数据包含NaN,undefined,null
const filterNull = json => {
let newJson = {};
let reg = RegExp(/NaN|undefined|null/);
for (let li in json) {
if (json[li] && !reg.test(json[li])) {
newJson[li] = json[li];
}
}
return newJson;
};
const ajax = o => {
o.loading = o.loading || false; //是否出现全局加载提示,支持传入字符串
o.data = o.data || {};
o.filterNull = o.filterNull !== false;
o.headers = o.headers || {
"Content-Type": "application/json;charset=UTF-8"
};
//成功提示信息,传入true则提示默认信息,传入字符串则出现字符串信息
o.is_suc = o.is_suc || false;
o.is_suc = o.is_suc === true ? "操作成功" : o.is_suc;
//错误提示信息,默认不出现,传入true则出现后端接口提示信息,传入字符串则提示字符串信息
o.is_err = o.is_err || false;
o.is_err = o.is_err === true ? "网络异常" : o.is_err;
//空数据过滤
o.data = o.filterNull === true ? filterNull(o.data) : o.data;
const method = o.method;
let loadingInstance = "";
if (o.loading) {
loadingInstance = Loading.service({
lock: true,
text: o.loading !== true ? o.loading : "努力加载中……",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)"
});
}
return new Promise((suc, err) => {
axios({
url: o.url,
[method === "post" ? "data" : "params"]: o.data,
headers: o.headers,
method: method || "get"
})
.then(t => {
if (o.loading) {
loadingInstance.close();
}
let req = t.data;
if (req && req.code === 0) {
//正确提示信息
o.is_suc !== false && custom.sucIfno(o.is_suc);
suc(req);
} else {
//错误信息提示
if (o.is_err !== false) {
o.is_err !== "网络异常"
? custom.errIfno(o.is_err)
: custom.errIfno(req.msg ? req.msg : "网络异常");
}
err(req);
}
})
.catch(e => {
if (o.loading) {
loadingInstance.close();
}
//错误信息提示
o.is_err !== false ? custom.errIfno("网络异常") : false;
err(e);
});
});
};
/*防抖处理缺陷:
当两个函数同时需要防抖的时候另一个函数也会受到防抖的影响,所以请避免同时需要防抖。如需要,额外处理第二个防抖函数。
* */
let timeOut = null;
axios.ajax = opt => {
//是否防抖
let isAntiShake = opt.isAntiShake || false;
let shakeTime = opt.shakeTime || 500; //默认防抖时间半秒
if (!isAntiShake) {
//不进行防抖处理
return new Promise((suc, err) => {
ajax(opt)
.then(e => {
suc(e);
})
.catch(e => {
err(e);
});
});
} else {
//进行防抖处理
return new Promise((suc, err) => {
timeOut && clearTimeout(timeOut);
let callNow = !timeOut;
if (callNow) {
ajax(opt)
.then(e => {
suc(e);
})
.catch(e => {
err(e);
});
}
timeOut = setTimeout(
() => {
timeOut = null;
}, //见注解
shakeTime
);
});
}
};
export default axios;
最后:防抖内容请看我之前的博客