axios取消请求显示浏览器警报答案

【问题标题】：Axios cancel Request shows browser alertaxios取消请求显示浏览器警报
【发布时间】：2021-03-19 04:20:30
【问题描述】：

Axios 取消请求显示浏览器警报，该警报会停止执行，直到您单击确定。我想取消我的请求，我所有的 Api 调用都在名为 apiCalls.js 的单独文件中。

带有 cancelToken 的组件。

componentDidMount() {
        const CancelToken = axios.CancelToken;
        // create the source
        this.source = CancelToken;
    }

    persistCancel = (cancel) => {
        this.setState({cancels: [...this.state.cancels, cancel]})
    }

    componentWillUnmount(){
        this.state.cancels.forEach((c) => c());
    }

这是我从组件调用的 Api。

getScoreCardCall({profileId, campaignIds, startDate, endDate}, (scoreCards) => {
            //success
            this.setState({
                scoreCards,
                showComcardsLoader: false
            })
        },this.source,this.persistCancel);

在 apiCalls.js

中

export function getScoreCardCall(params,callback, source,onRequest){
    axios.get(url,
        {
        cancelToken: new source(function executor(c) {
            onRequest(c);
            }),
        params:{
            profileId: params.profileId,
            campaignId: params.campaignIds.toString(),
            startDate: params.startDate,
            endDate: params.endDate,
        }
        })
    .then(res => {
        if(callback != null){
            if(res.data.length!=0){
                callback(res.data);
            }
        }
    })
    .catch(err => {
        if (axios.isCancel(err)) {
            console.log(err.message);
          }
    })
}

有人能告诉我为什么每次取消请求都会显示警报吗？还是我做错了什么？

【问题讨论】：

标签： javascript reactjs ajax axios fetch

【解决方案1】：

axios#cancellation描述了使用cancelToken的两种方式。您使用了第一种方式，即 source.token/source.cancel。我是这样开始的，并且遇到了与您类似的问题：一旦取消了对特定 URL 的请求，我就再也无法从该 URL 获得成功的响应。我使用 executor 函数切换到第二种方法，问题就消失了。我猜是为多个请求共享相同的 cancelToken，这就是他们所说的你可以使用 executor 函数方法来做的事情。无论如何，也许这对你也有用。

【讨论】：