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

IT技术 reactjs flux reactjs-flux es6-promise axios
2021-04-21 04:07:36

我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？

6个回答

Axios 目前不支持取消请求。详情请参阅此问题。

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

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

例子：

const cancelTokenSource = axios.CancelToken.source();

axios.get('/user/12345', {
  cancelToken: cancelTokenSource.token
});

// Cancel request
cancelTokenSource.cancel();
请包含一个最小示例，以防链接资源出现故障！
2021-05-28 04:07:36
@RajabShakirov 更新
2021-05-30 04:07:36
直接来自链接：“axios cancel token API 基于已撤销的可取消Promise提案。” 如果我理解正确，它是基于不受支持的东西，在这种情况下我不想使用它。显然我们还有实验性的abortable fetch（尤其是这个例子）；我很好奇这是如何演变的。另请参阅我可以使用 AbortController 吗？
2021-06-03 04:07:36
如果你这样做，它就不能再运行了
2021-06-05 04:07:36
const cancelTokenSource = axios.CancelToken.source(); axios.get('/user/12345', { cancelToken: cancelTokenSource.token }); cancelTokenSource.cancel();
2021-06-10 04:07:36

使用 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
})
它只会取消 axios 请求，但不会取消节点执行。
2021-05-28 04:07:36
@NushrataraPriya 只是调用取消方法 ourRequest.cancel()
2021-06-01 04:07:36
如何触发 cancelToken ？假设我有点击按钮发送请求我怎样才能从前端停止它？
2021-06-06 04:07:36 
import React, { Component } from "react";
import axios from "axios";

const CancelToken = axios.CancelToken;

let cancel;

class Abc extends Component {
  componentDidMount() {
    this.Api();
  }

  Api() {
      // Cancel previous request
    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;
您永远不应该在组件中使用module范围的变量。如果您渲染了其中的两个，则每个都将消除前一个设置的值。
2021-06-07 04:07:36

通常，您希望取消之前的 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
        }
    });
}
不错的解决方案。如果有人使用axios.create，以创建一个实例，cancelToken并且isCancel将无法使用。您需要添加它们。github.com/axios/axios/issues/1330#issuecomment-378961682
2021-05-24 04:07:36

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

其它你可能感兴趣的问题
上一篇如何在 React.js 中使用 Google 字体？ 下一篇react-hooks如何确定它们用于的组件？