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

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