reactjs - 通过 Reactjs 中的 axios 取消我的 POST 请求 promise

Question

我曾经发布获取数据的请求，因为我想通过发送一些过滤器从服务器获取数据。
如何取消我的 promise 通过 Reactjs 中的 onClick 按钮获取数据？
当我们有几个参数过滤数据时，使用HTTP post方法来选择数据是否正确？

我找到了地址，但它不起作用:

   const CancelToken = axios.CancelToken;
   let cancel;
   function handleProductSearch() {
   var newModel=searchProductFilter;
    const token = localStorage.token;
    if (token) {
     
  // Cancel previous request
        if (cancel !== undefined) {
            cancel();
            setLoadingListResSrch(false)

        }
        axios.post(baseUrl + 'Basic/ProductSearch', newModel, {
            cancelToken: new CancelToken(function executor(c) {
               cancel = c;
            }),
            headers: {
                'Content-Type': 'application/json',
                Accept: 'application/json',
                'Authorization': `Bearer ${token}`
            },
            credentials: 'same-origin',
        }) .then(response => {
                setLoadingListResSrch(false)
                if (response.data.length === 0) {
                    setGoodListResSrch(response.data.result);
                }
            }) .catch(error => {
                setLoadingListResSrch(false)
                debugger;
                if (axios.isCancel(error)) {
                    console.log("post Request canceled");
                    return;
                }  return;
            }); 
         }
      }

我希望当用户单击新按钮时取消先前的请求。

 <FormGroup className="mb-2 ml-sm-2 mb-sm-2">
     <div color="seccess" size="sm" className="btn btn-info m-3"
      onClick={handleAbrotProductSearch}>
         new search</div>
 </FormGroup>
   const handleAbrotProductSearch = useCallback(() => {
     handleProductSearch());
}, [handleProductSearch]);

Answer 1

如果你使用 axios，这可以通过使用取消 token 来完成:

axios.isCancel(thrown)

https://blog.logrocket.com/how-to-make-http-requests-like-a-pro-with-axios/

const source = axios.CancelToken.source();

axios.get('https://media.giphy.com/media/C6JQPEUsZUyVq/giphy.gif', {
  cancelToken: source.token
}).catch(thrown => {
  if (axios.isCancel(thrown)) {
    console.log(thrown.message);
  } else {
    // handle error
  }
});

// cancel the request (the message parameter is optional)
source.cancel('Request canceled.');