caiyx
afc4d72db1
Some checks failed
Check / lint (push) Has been cancelled
Check / typecheck (push) Has been cancelled
Check / build (build, 18.x, ubuntu-latest) (push) Has been cancelled
Check / build (build, 18.x, windows-latest) (push) Has been cancelled
Check / build (build:app, 18.x, ubuntu-latest) (push) Has been cancelled
Check / build (build:app, 18.x, windows-latest) (push) Has been cancelled
Check / build (build:mp-weixin, 18.x, ubuntu-latest) (push) Has been cancelled
Check / build (build:mp-weixin, 18.x, windows-latest) (push) Has been cancelled
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;
|
||
|