Axios 拦截重复请求
一、封装缓存
preventRequest.js
import Qs from 'qs';
class preventRequest {
constructor(options) {
const { maxNum, expiredTime } = options || {};
// 请求队列
this.list = [];
this.MAX_NUM = maxNum || 100;
this.EXPIRED_TIME = expiredTime || 60000;
}
getRequestKey(config) {
const { method, url, params, data } = config;
return [method, url, Qs.stringify(params), Qs.stringify(data)].join('&');
}
add({ config, data }) {
if (config.data) config.data = JSON.parse(config.data);
let key = this.getRequestKey(config);
let index = this.list.findIndex((t) => t.key === key);
if (index > -1) {
this.list[index].data = data;
this.list[index].resolve(data);
} else {
// 添加到缓存列表中
this.list.push({ time: Date.now(), key, data });
}
}
find(config) {
let key = this.getRequestKey(config);
let index = this.list.findIndex((t) => t.key === key);
if (index > -1) {
let item = this.list[index];
// 判断是否超出了最大缓存时间
if (Date.now() - item.time > this.EXPIRED_TIME) {
// 清除该缓存
this.list.splice(index, 1);
return undefined;
} else {
return item;
}
}
// 添加缓存信息
let newItem = { key, time: Date.now() };
newItem.data = new Promise((resolve) => {
newItem.resolve = resolve;
});
// 判断是否超出了最大缓存数量
if (this.list.length === this.MAX_NUM) {
this.list.shift();
}
this.list.push(newItem);
return undefined;
}
}
const RequestCache = new preventRequest();
export default RequestCache;
二、改造Axios实例
httpRequest.js
import axios from 'axios';
import RequestCache from './preventRequest.js';
const serverURL = "xxxx"
const service = axios.create({
baseURL: serverURL,
responseType: 'json',
timeout: 60000,
headers: {
'Content-Type': 'application/json'
}
});
// request拦截器
service.interceptors.request.use(
(config) => {
// ... do something
const isCache = RequestCache.find(config);
if (isCache) {
config.adapter = function (config) {
return new Promise((resolve) => {
const res = {
status: 200,
statusText: 'OK',
headers: { 'content-type': 'application/json; charset=utf-8' },
config,
request: {}
};
if (isCache.data instanceof Promise) {
isCache.data.then((data) => {
resolve({ ...res, data });
});
} else {
resolve({ ...res, data: isCache.data });
}
});
};
}
return config;
},
(error) => {
Promise.reject(error);
}
);
// respone拦截器
service.interceptors.response.use(
(res) => {
// ... do something
RequestCache.add(res)
return response;
},
(error) => {
Toast({
message: '网络异常,请稍后再试',
position: 'bottom'
});
}
);
export default service;
文章目录
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。