如何在新的获取请求中取消先前的获取请求？答案

【问题标题】：How to cancel previous fetch request in new fetch request in react?如何在新的获取请求中取消先前的获取请求？
【发布时间】：2020-10-26 12:31:55
【问题描述】：

我有一种情况，我需要对 react 中输入的每个字符更改执行 API 请求。当我输入 3 个字母时，触发了 3 个 API 请求。但是没有完成请求的顺序。大多数时候，我的最后一个请求首先完成，然后是旧请求。根据我的要求，我想在新的 API 调用之前取消任何以前的调用。

【问题讨论】：

检查dev.to/bil/…
另外，你可能正在寻找去抖动你的函数

标签： reactjs react-redux fetch fetch-api

【解决方案1】：

我找到了一种方法来取消先前的请求并仅接受来自最新请求的响应。我使用 redux-thunk 作为中间件。我可以将控制器用作 AbortController 并向获取请求发送信号，然后我可以使用此控制器取消先前的请求。

return (dispatch, getState, serviceManager) => {
   
      const { controller } = getState();

      controller.abort(); //cancel the previous request

      let newController = new AbortController();
      let signal = newController.signal;

      //set a new AbortController instance to the reducer
      dispatch({type: "SET_NEW_CONTROLLER", payload: newController})
      
      //pass the signal to the fetch request
      const result = await fetch(url, {...options, signal});
}

您可以在reducer 中存储一个AbortController 的实例，并且在请求开始时您可以简单地中止控制器并将新控制器设置为reducer 并将信号传递给获取请求。

【讨论】：