React - 实现fetch取消、中止请求

场景：

项目开发过程中有时会遇到这种情况：两次查询请求相隔时间很短时，由于接口异步，第一次请求可能会覆盖第二次请求返回数据，所以需要在第二次请求前先将第一次请求中止，话不多说，实现如下： 关于axios取消请求网上有很多，可自信百度，本文主要针对于fetch请求，由于fetch并没有 “取消请求” 方法，目前通过AbortController()实现

项目：Ant.Design Pro + umijs + dva

新建一个abortDispath.js文件

export const abortDispatch = (payload, dispatch) => { if (payload && payload.signal) { const error = 'success! request is aborted'; if (payload.signal.aborted) { // eslint-disable-next-line prefer-promise-reject-errors return Promise.reject(error); // 通过reject达到中止请求目的 } const cancellation = new Promise((_, reject) => { payload.signal.addEventListener('abort', () => { // eslint-disable-next-line prefer-promise-reject-errors reject(error); }); }); return Promise.race([cancellation, dispatch(payload)]); //Promise.race比较中止和接口请求快慢，谁快返回谁 } return dispatch(payload); };

新建一个扩展Component

import React from 'react'; /** * 用于组件卸载时自动cancel所有注册的promise */ export default class EnhanceComponent extends React.Component { constructor(props) { super(props); this.abortSignalControllers = []; } componentWillUnmount() { this.abortSignalControl(); // 页面卸载后自动中止所有请求 } /** * 注册control */ bindSignalControl = () => { let registerSignal = ''; if ('AbortController' in window) { const controller = new AbortController(); const { signal } = controller; registerSignal = signal; this.abortSignalControllers.push(controller); } return registerSignal; }; /** * 取消signal对应的Promise的请求 * @param {*} signal */ abortSignalControl(signal) { if (signal !== undefined) { const idx = this._findSignalControl(signal); if (idx !== -1) { const control = this.abortSignalControllers[idx]; control.abort(); this.abortSignalControllers.splice(idx, 1); } } else { this.abortSignalControllers.forEach(control => { control.abort(); }); this.abortSignalControllers = []; } } _findSignalControl(signal) { const idx = this.abortSignalControllers.findIndex(controller => controller.signal === signal); return idx; } }

demo.js

export default class Demo extends EnhanceComponent{ constructor(props) { super(props); this.state = { signal: this.bindSignalControl(), }; } search = () => { this.abortSignalControl(this.state.signal); // 请求前先中止上一次的请求 const payload = { ...其他参数 signal: this.bindSignalControl() } this.setState({ signal: payload.signal, // 保存最新的signal }); abortDispatch(payload, query => dispatch({ type: 'xxx', payload: {...query}, callback: (data, aborted) => { if (!aborted) { // !aborted避免页面卸载后或者中止请求后进行this.setState } } }) } }

request.js文件中需要将signal放在options中，例如

在errorHandler方法中对Aborted接口进行特殊处理 const errorHandler = error => { const { response, data, name } = error || {}; const { status, url = '', statusText } = response || {}; // 如果是终止请求，默认返回成功 if (name === 'AbortError') { return { code: 0, // 请求成功 aborted: true, // callback页面是否中止请求成功 }; } ...... return { response, data }; } const request = extend({ errorHandler, prefix: '/api', }); request.interceptors.request.use((url, options) => { return { url, options: { ...options, signal: options.signal }, }; })