78 lines
2.6 KiB
JavaScript
78 lines
2.6 KiB
JavaScript
|
import axios from 'axios';
|
|||
|
|
class Request {
|
|||
|
|
// axios 实例
|
|||
|
|
instance;
|
|||
|
|
// 拦截器对象
|
|||
|
|
interceptorsObj;
|
|||
|
|
// * 存放取消请求控制器Map
|
|||
|
|
abortControllerMap;
|
|||
|
|
constructor(config) {
|
|||
|
|
this.instance = axios.create(config);
|
|||
|
|
// * 初始化存放取消请求控制器Map
|
|||
|
|
this.abortControllerMap = new Map();
|
|||
|
|
this.interceptorsObj = config.interceptors;
|
|||
|
|
// 拦截器执行顺序 接口请求 -> 实例请求 -> 全局请求 -> 实例响应 -> 全局响应 -> 接口响应
|
|||
|
|
this.instance.interceptors.request.use((res) => {
|
|||
|
|
const controller = new AbortController();
|
|||
|
|
const url = res.url || '';
|
|||
|
|
res.signal = controller.signal;
|
|||
|
|
this.abortControllerMap.set(url, controller);
|
|||
|
|
return res;
|
|||
|
|
}, (err) => err);
|
|||
|
|
// 使用实例拦截器
|
|||
|
|
this.instance.interceptors.request.use(this.interceptorsObj?.requestInterceptors, this.interceptorsObj?.requestInterceptorsCatch);
|
|||
|
|
this.instance.interceptors.response.use(this.interceptorsObj?.responseInterceptors, this.interceptorsObj?.responseInterceptorsCatch);
|
|||
|
|
// 全局响应拦截器保证最后执行
|
|||
|
|
this.instance.interceptors.response.use(
|
|||
|
|
// 因为我们接口的数据都在res.data下，所以我们直接返回res.data
|
|||
|
|
(res) => {
|
|||
|
|
const url = res.config.url || '';
|
|||
|
|
this.abortControllerMap.delete(url);
|
|||
|
|
return res.data;
|
|||
|
|
}, (err) => err);
|
|||
|
|
}
|
|||
|
|
request(config) {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
// 如果我们为单个请求设置拦截器，这里使用单个请求的拦截器
|
|||
|
|
if (config.interceptors?.requestInterceptors) {
|
|||
|
|
config = config.interceptors.requestInterceptors(config);
|
|||
|
|
}
|
|||
|
|
this.instance
|
|||
|
|
.request(config)
|
|||
|
|
.then((res) => {
|
|||
|
|
// 如果我们为单个响应设置拦截器，这里使用单个响应的拦截器
|
|||
|
|
if (config.interceptors?.responseInterceptors) {
|
|||
|
|
res = config.interceptors.responseInterceptors(res);
|
|||
|
|
}
|
|||
|
|
resolve(res);
|
|||
|
|
})
|
|||
|
|
.catch((err) => {
|
|||
|
|
reject(err);
|
|||
|
|
});
|
|||
|
|
// .finally(() => {})
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
/**
|
|||
|
|
* 取消全部请求
|
|||
|
|
*/
|
|||
|
|
cancelAllRequest() {
|
|||
|
|
for (const [, controller] of this.abortControllerMap) {
|
|||
|
|
controller.abort();
|
|||
|
|
}
|
|||
|
|
this.abortControllerMap.clear();
|
|||
|
|
}
|
|||
|
|
/**
|
|||
|
|
* 取消指定的请求
|
|||
|
|
* @param url 待取消的请求URL
|
|||
|
|
*/
|
|||
|
|
cancelRequest(url) {
|
|||
|
|
const urlList = Array.isArray(url) ? url : [url];
|
|||
|
|
for (const _url of urlList) {
|
|||
|
|
this.abortControllerMap.get(_url)?.abort();
|
|||
|
|
this.abortControllerMap.delete(_url);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
export default Request;
|
|||
|
|
|