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

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

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

1 个答案: