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

Question

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

Answer 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 并将信号传递给获取请求。

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

How to cancel previous fetch request in new fetch request in react?

fetch

reactjs

fetch-api

react-redux