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

Question

我使用axios处理ajax请求，使用reactJSflux渲染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中取消/中止请求？

Answer 1

通常，您希望取消之前的ajax请求并忽略其即将到来的响应，只有在该实例的新ajax请求启动时，为此，请执行以下操作：

示例：从 API 获取一些注释：

// declare an ajax request's cancelToken (globally)
let ajaxRequest = null; 

function getComments() {

    // cancel  previous ajax if exists
    if (ajaxRequest ) {
        ajaxRequest.cancel(); 
    }

    // creates a new token for upcomming ajax (overwrite the previous one)
    ajaxRequest = axios.CancelToken.source();  

    return axios.get('/api/get-comments', { cancelToken: ajaxRequest.token }).then((response) => {
        console.log(response.data)
    }).catch(function(err) {
        if (axios.isCancel(err)) {
           console.log('Previous request canceled, new request is send', err.message);
        } else {
               // handle error
        }
    });
}

Answer 2

使用use效果挂钩：

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请求，将取消令牌作为第三个参数传递

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

Answer 3

<罢工> Axios目前不支持取消请求。请看 本期详情。

＜罢工＞更新：axios v0.15中添加了取消支持。

编辑：axios取消令牌API基于撤回的可取消promise提案。

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

例：

js prettyprint-override">const controller = new AbortController();

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