axios困变简

21 阅读2分钟

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;

传送门

axios中文文档|axios中文网 | axios (axios-js.com)