如何在 axios 中取消/中止 ajax 请求

Question

我使用 axios 用于 ajax 请求和 reactJS + flux 用于渲染 UI。在我的应用程序中有第三方时间线（reactJS 组件）。时间线可以通过鼠标滚动来管理。应用程序在任何滚动事件后发送实际数据的 ajax 请求。在服务器上处理请求可能比下一个滚动事件更慢的问题。在这种情况下，应用程序可能有几个（通常是 2-3 个）请求，这些请求已经被弃用，因为用户滚动得更远。这是一个问题，因为每次接收新数据时，时间线都会开始重绘。 （因为是reactJS + Flux）正因为如此，用户多次看到时间轴的来回移动。解决此问题的最简单方法，它只是中止先前的 ajax 请求，如 jQuery 。例如：

     $(document).ready(
    var xhr;

    var fn = function(){
        if(xhr && xhr.readyState != 4){
            xhr.abort();
        }
        xhr = $.ajax({
            url: 'ajax/progress.ftl',
            success: function(data) {
                //do something
            }
        });
    };

    var interval = setInterval(fn, 500);
);

如何取消/中止 axios 中的请求？

原文由 Rajab Shakirov 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Axios 目前不支持取消请求。请参阅 此问题 了解详细信息。

更新：在 axios v0.15 中添加了 取消支持。

编辑：axios 取消令牌 API 基于撤销的可取消承诺提案。

2022 年更新：从 v0.22.0 开始， Axios 支持 AbortController 以 fetch API 方式取消请求：

例子：

 const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// cancel the request
controller.abort()

原文由 Nick Uraltsev 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用 useEffect 钩子：

 useEffect(() => {
  const ourRequest = Axios.CancelToken.source() // <-- 1st step

  const fetchPost = async () => {
    try {
      const response = await Axios.get(`endpointURL`, {
        cancelToken: ourRequest.token, // <-- 2nd step
      })
      console.log(response.data)
      setPost(response.data)
      setIsLoading(false)
    } catch (err) {
      console.log('There was a problem or request was cancelled.')
    }
  }
  fetchPost()

  return () => {
    ourRequest.cancel() // <-- 3rd step
  }
}, [])

注意：对于 POST 请求，将 cancelToken 作为第三个参数传递

Axios.post(`endpointURL`, {data}, {
 cancelToken: ourRequest.token, // 2nd step
})

原文由 Harshal 发布，翻译遵循 CC BY-SA 4.0 许可协议