Question

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

    $(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

~~Axios目前不支持取消请求。有关详细信息，请参阅this issue。~~

更新：在axios v0.15中添加了Cancellation support。

Answer 2

在componentDidMount生命周期挂钩内部使用：

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

Answer 3

要根据新请求取消以前的ajax：

通常，您仅在要调用该实例的新ajax时才要取消先前的ajax请求并忽略它的将来响应，为此，请执行以下操作：

从api获取一些注释的示例：

let commentsAjax = null; // declare globally
function getComments() {
    if (commentsAjax) {
        commentsAjax.cancel();
    }
    commentsAjax= axios.CancelToken.source();  // creates a new different token for upcomming ajax 
    return axios.get('/api/get-comments', { cancelToken: commentsAjax.token }).then((response) => {
        console.log(response.data)
    }).catch(function(err) {
        if (axios.isCancel(err)) {
           console.log('Previous request canceled', err.message);
        } else {
               // handle error
        }
    });
}

复制了this问题中的解决方案。

Answer 4

有一个非常好的软件包，其中包含一些名为axios-cancel的使用示例。我发现它非常有用。这是链接：https://www.npmjs.com/package/axios-cancel

Answer 5

这就是我在节点中使用promises的方法。第一次请求后，轮询停止。

 var axios = require('axios');
    var CancelToken = axios.CancelToken;
    var cancel;
    axios.get('www.url.com',
                      {
                        cancelToken: new CancelToken(
                            function executor(c) {
                                cancel = c;
                             })
                      }
            ).then((response) =>{            
                cancel();               
              })

Answer 6

https://github.com/axios/axios#cancellation

const CancelToken = axios.CancelToken;
                const source = CancelToken.source();
                let url = 'www.url.com'


                axios.get(url, {
                    progress: false,
                    cancelToken: source.token
                })
                    .then(resp => {

                        alert('done')

                    })

                setTimeout(() => {
                    source.cancel('Operation canceled by the user.');
                },'1000')

Answer 7

使用cp-axios包装器，您可以通过三种不同类型的取消API终止请求：

1。 Promise cancallation API（CPromise）：

Live browser example

 const cpAxios= require('cp-axios');
 const url= 'https://run.mocky.io/v3/753aa609-65ae-4109-8f83-9cfe365290f0?mocky-delay=5s';
 
 const chain = cpAxios(url)
      .timeout(5000)
      .then(response=> {
          console.log(`Done: ${JSON.stringify(response.data)}`)
      }, err => {
          console.warn(`Request failed: ${err}`)
      });
 
 setTimeout(() => {
    chain.cancel();
 }, 500);

2。使用AbortController信号API：

 const cpAxios= require('cp-axios');
 const CPromise= require('c-promise2');
 const url= 'https://run.mocky.io/v3/753aa609-65ae-4109-8f83-9cfe365290f0?mocky-delay=5s';
 
 const abortController = new CPromise.AbortController();
 const {signal} = abortController;
 
 const chain = cpAxios(url, {signal})
      .timeout(5000)
      .then(response=> {
          console.log(`Done: ${JSON.stringify(response.data)}`)
      }, err => {
          console.warn(`Request failed: ${err}`)
      });
 
 setTimeout(() => {
    abortController.abort();
 }, 500);

3。使用普通的axios cancelToken：

 const cpAxios= require('cp-axios');
 const url= 'https://run.mocky.io/v3/753aa609-65ae-4109-8f83-9cfe365290f0?mocky-delay=5s';

 const source = cpAxios.CancelToken.source();
 
 cpAxios(url, {cancelToken: source.token})
      .timeout(5000)
      .then(response=> {
          console.log(`Done: ${JSON.stringify(response.data)}`)
      }, err => {
          console.warn(`Request failed: ${err}`)
      });
 
 setTimeout(() => {
    source.cancel();
 }, 500);

Answer 8

import React, { Component } from 'react';
import axios from 'axios';

const CancelToken = axios.CancelToken;

let cancel;

class abc extends Component {

componentDidMount() {

    this.Api();

}

Api(){
    if (cancel !== undefined) {
        cancel();
    }
    axios.post(URL,reqBody,{cancelToken: new CancelToken(function executor(c) 
        {
            cancel = c;
        })
    }).then((response) => {
        //responce Body
    }).catch((error) => {
        if (axios.isCancel(error)) {
            console.log('post Request canceled');
        }
    });
}

render() {
    return <h2>cancel Axios Request</h2>;
}
}

export default abc;

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

8 个答案: