vue项目中axios的一些实用封装-添加loading和错误处理
import axios from "axios";
import Vue from "vue";
import { serverIpAddress } from "@/utils/server-config";
import { Loading } from "element-ui";
/*
* 判断当前环境的参数
*/
axios.defaults.baseURL = serverIpAddress;
axios.defaults.timeout = 120000;
axios.defaults.headers.post["Content-Type"] = "application/json;charset=utf-8";
axios.interceptors.request.use(
config => {
if (config.method === "get") {
// 加时间戳随机数，防止出现缓存
config.url = config.url + "?t=" + new Date().getTime();
}
return config;
},
error => {
return Promise.reject(error);
}
);
// 接口请求后，做统一处理，验证token是否重新登录
axios.interceptors.response.use(
res => {
return res;
},
error => {
return Promise.reject(error);
}
);
/**
* get请求
* @param {String} url 接口网址,绝对路径
* @param {Object} data 参数, 会拼接到url后面
* @param {Object} options 保留字段, 方便扩展
* @return {Promise}
*/
export function get(url, data, options) {
const param = { method: "GET", url, params: data };
return fetchApi(param, options);
}
/**
* post请求
* @param {String} url 接口网址,绝对路径
* @param {Object} data 参数会以json格式调用
* @param {Object} options 保留字段, 方便扩展
* @return {Promise}
*/
export function post(url, data, options) {
const param = { method: "POST", url, data };
return fetchApi(param, options);
}
// 加载动画的计数，有此计数就不会出现多个遮罩层
let loadingNum = 0;
let loadingInstance = "";
function fetchApi(param, options) {
// 获取最新的token,若无token,可不添加
// axios.defaults.headers.common["accessToken"] = getToken();
if (typeof options.showLoading !== "boolean") {
options.showLoading = false;
}
if (options.showLoading) {
if (loadingNum <= 0) {
loadingInstance = Loading.service({ fullscreen: true });
}
loadingNum++;
}
if (typeof options.errorHandler !== "boolean") {
options.errorHandler = true;
}
return new Promise((resolve, reject) => {
axios(param)
.then(response => {
// 如果没有特殊错误处理就按照默认的处理
if (options.errorHandler) {
if (response.data.code === 'E00000') {
return resolve(response.data);
} else {
Vue.prototype.$message({
message: response.data.message,
type: "error"
});
}
} else {
return resolve(response.data);
}
})
.catch(error => {
let errorMsg = "";
if (error.response) {
switch (error.response.status) {
case 400:
errorMsg = "400请求错误";
break;
case 401:
errorMsg = "401登录信息已失效，请重新登录";
window.sessionStorage.clear();
window.localStorage.clear();
setTimeout(function () {
location.href = location.origin + "/icss-web/#/login";
// 加一个刷新，防止重定向到登录页但页面未显示
setTimeout(() => {
location.reload()
}, 200)
}, 500);
break;
case 403:
errorMsg = "您没有操作权限";
break;
case 404:
errorMsg = "404请求地址出错";
break;
case 408:
errorMsg = "408请求超时";
break;
case 500:
errorMsg = "500服务器内部错误";
break;
case 502:
errorMsg = "502网关错误";
break;
case 503:
errorMsg = "503服务不可用";
break;
case 504:
errorMsg = "504网关超时";
break;
}
} else if (error.request) {
errorMsg = "请求失败";
} else {
errorMsg = error.message;
}
if (options.errorHandler) {
Vue.prototype.$message({
message: errorMsg,
type: "error"
});
return;
}
reject(error);
})
.then(() => {
if (options.showLoading) {
loadingNum--;
if (loadingNum <= 0) {
loadingInstance.close();
}
}
});
});
}
发表评论 (审核通过后显示评论)：