axios二次请求
import axios from 'axios'
// 重试次数,共请求2次
axios.defaults.retry = 1
// 请求的间隙
axios.defaults.retryDelay = 1000
axios.interceptors.response.use(undefined, function axiosRetryInterceptor(err) {
let config = err.config;
// 如果配置不存在或未设置重试选项,则拒绝
// 重试请求的次数,如果你设置了1,就请求2次,如果是5,就请求6次
if (!config || !config.retry) return Promise.reject(err)
config.__retryCount = config.__retryCount || 0;
// 判断是否超过总重试次数,超过retry设置的次数的时候,就不再重复发起请求了
if (config.__retryCount >= config.retry) {
// 返回错误并退出自动重试
return Promise.reject(err);
}
config.__retryCount += 1;
// 创建新的Promise
let backoff = new Promise(function (resolve) {
setTimeout(function () {
resolve();
}, config.retryDelay || 1);
});
// 返回重试请求
return backoff.then(function () {
return axios(config);
}); });
export default axios;
首到尾axios 包含重复求+token到期重定向
//配合路由守卫
import axios from "axios";
import qs from "qs";
// 使用由库提供的配置的默认值来创建实例
let reqList = [];
const stopRepeatRequest = function (reqList, url, cancel, errorMessage) {
const errorMsg = errorMessage || "";
for (let i = 0; i < reqList.length; i++) {
if (reqList[i] === url) {
cancel(errorMsg);
return;
}
}
reqList.push(url);
};
const allowRequest = function (reqList, url) {
for (let i = 0; i < reqList.length; i++) {
if (reqList[i] === url) {
reqList.splice(i, 1);
break;
}
}
};
//再次发起请求
function tautology(err) {
let back = new Promise(function (resolve) {
resolve();
});
return back.then(function () {
return instance(err.config);
});
}
// 此时超时配置的默认值是 `0`
var instance = axios.create({
timeout: 时间,
baseURL: 'url地址',
});
// 后台设置token有效期,当token过期时候,自动跳转登陆页,要求用户重新认证
// 实现思路:前端思路:发送请求,将token存储在cookie里,当用户在token有效期请求数据时候,
// 返回正常数据,如果超过token有效期时候,前端自动清除token,并且路由到登录页面
// 添加请求拦截器
instance.defaults.retry = 1;
instance.defaults.retryDelay = 1000;
instance.interceptors.request.use(
function (config) {
if (sessionStorage.getItem("token")) {
config.headers["Authori-zation"] = `Bearer ${sessionStorage.getItem(
"token"
)}`;
}
config.data =
config.data instanceof FormData ? config.data : qs.stringify(config.data);
// 在发送请求之前做些什么
let cancel;
config.cancelToken = new axios.CancelToken(function (c) {
cancel = c;
});
stopRepeatRequest(reqList, config.url, cancel, `${config.url} 请求被中断`);
return config;
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
instance.interceptors.response.use(
function (response) {
if (response.data.code == 500) {
Message({ message: `错误代码${response.data.code}`, type: "error" });
}
// 对响应数据做点什么
if (response.status == 200) {
if (response.data.status === 410000) {
sessionStorage.removeItem("token");
router.replace({
path: "login",
query: { redirect: router.currentRoute.fullPath },
});
}
// 对响应数据做点什么
setTimeout(() => {
allowRequest(reqList, response.config.url);
}, 1000);
return response.status == 200 ? response.data : response;
}
},
function (error) {
// 对响应错误做点什么
let config = error.config;
if (!config || !config.retry) {
return Promise.reject(error);
}
config.__retryCount = config.__retryCount || 0;
if (config.__retryCount > config.retry) {
return Promise.reject(err);
} else {
console.log(config.__retryCount);
//网络错误,重新发起请求
if (error.message == "Network Error") {
Dialog.confirm(
{
message: "网络错误,请检查服务端,请【点击重试】!",
title: "提示",
},
{
confirmButtonText: "点击重试",
type: "warning",
showClose: false,
showCancelButton: false,
closeOnClickModal: false,
}
).then(() => {
tautology(error);
});
}
//请求超时,重新发起请求
if (error.message == "timeout of 10000ms exceeded") {
Dialog.confirm(
{ message: "网络超时,请检查网络,请【点击重试】!", title: "提示" },
{
confirmButtonText: "点击重试",
type: "warning",
showClose: false,
showCancelButton: false,
closeOnClickModal: false,
}
).then(() => {
tautology(error);
});
}
}
config.__retryCount += 1;
if (axios.isCancel(error)) {
// console.log(axios);
} else {
// 增加延迟,相同请求不得在短时间内重复发送
setTimeout(() => {
allowRequest(reqList, error.config.url);
}, 3000);
}
if (error.response) {
switch (error.response.status) {
case 401:
sessionStorage.removeItem("token");
router.replace({
path: "login",
query: { redirect: router.currentRoute.fullPath },
});
}
}
return Promise.reject(error);
}
);
export const post = (url, data) => {
return new Promise((res, rej) => {
instance.post(url, data).then(res).catch(rej);
});
};
export const get = (url, data) => {
return new Promise((res, rej) => {
instance.get(url, { params: data }).then(res).catch(rej);
});
};
export default instance;
传送门