以antd项目内实践为例,中断指定fetch请求的方法
程序员文章站
2022-07-02 15:28:38
因为fetch请求不像ajax有自带的abort方法,所以是使用 window.AbortController来实现中断请求创建Signal和停止Signal的方法写入一个公共管理文件并导出common.js// 创建一个signalexport function newSignal(key) { if ("AbortController" in window) { window[key+'Controller'] = new AbortController(); } retur...
因为fetch请求不像ajax有自带的abort方法,所以是使用 window.AbortController来实现中断请求
创建Signal和停止Signal的方法写入一个公共管理文件并导出
common.js
const signalCache = {};
// 创建一个signal
export function newSignal(key) {
// 用于中断请求,避免数据加载时间过长时,同一接口先请求却后返回数据带来的数据错位问题
if ("AbortController" in window) {
signalCache[key+'Controller'] = new AbortController();
}
return signalCache[key+'Controller'];
}
// 执行abort方法,停止指定key的AbortController
export function stopSignal(key) {
if ("AbortController" in window ) {
signalCache[key+'Controller'] && signalCache[key+'Controller'].abort();
delete signalCache[key+'Controller'];
}
}
使用:
创建一个需要中断的接口,并为该接口指定一个唯一的key,此处key为myList,
并以参数的形式传入
import { newSignal } from './common.js';
dispatch({
type: 'exampleModel/fetchMyList',
payload: {
...params,
signal: newSignal('myList').signal,
},
});
...
在你需要的任意时候 发起指定key的中断请求
import { stopSignal } from './common.js';
stopSignal('myList');
修改对应的请求文件
向option添加signal,并添加AbortError异常捕获
request.js
...
export default function request(url, options) {
...
let newOptions = { ...options };
// 配置signal
if(newOptions.body && newOptions.body.signal) {
const signal = newOptions.body.signal;
delete newOptions.body.signal;
newOptions = { ...newOptions, signal };
}
return fetch(url, newOptions)
.then((res) => {})
// 如果请求完成了,调用abort()不会发生错误
// 如果请求没有完成,那么Fetch就会抛出一个DOMException异常,异常的name属性值为"AbortError",因此要用catch捕获异常
.catch((err) => {
if (err.name === 'AbortError') {
console.log('Fetch aborted');
} else {
console.log('Another error');
}
}
使用效果:
本文地址:https://blog.csdn.net/weixin_38122772/article/details/107317993