antd 进行ajax请求,以antd项目内实践为例，中断指定fetch请求的方法

因为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');

}

}

使用效果：