axios取消请求

最新推荐文章于 2024-07-07 10:10:45 发布

wuliCaibao

最新推荐文章于 2024-07-07 10:10:45 发布

阅读量1.3k

点赞数

文章标签：前端 javascript react.js

本文链接：https://blog.csdn.net/wulicaibao/article/details/127556916

版权

本文介绍了在axios版本低于v0.22.0时，如何利用CancelToken来取消请求，以及在umi+dva项目中，如何在react组件、model文件及axios封装的请求方法中实现取消请求的操作。此外，还提供了对AbortController的简要说明。

摘要由CSDN通过智能技术生成

取消请求API

AbortController

axios版本 v0.22.0 开始，Axios支持以 fetch API 方式，取消请求 AbortController

const controller = new AbortController();

axios.get('/foo/bar', {
   
   signal: controller.signal
}).then(function(response) {
   
   //...
});
// 取消请求
controller.abort()

CancelToken

由于项目中使用的axios版本在 v0.22.0 以下，故采取canceltoken的方式进行请求的撤销，这个API已经过时，所以也可以通过升级axios，使用上面的方式

项目采用umi+dva构建方式，在组件中引入取消的逻辑

react组件中使用

const getDetail = useCallback(() => {
   
        const {
   environment, project} = queryParams;
        if(!environment || !project || !selectedTable) return;
        if(cancelQuery) {
   
            cancelQuery('请求被取消了');
        }
        setLoading(true);
        dispatch({
   
            type: 'warehouse/getDataViewDetail',
            payload: {
   
                environment: environment,
                project: project,
                name: selectedTable
            },
            cancelToken: new