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
      },
    };
})