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