axios使用 cancel token 取消请求，报错Uncaught (in promise)，错误信息为canceled

最新推荐文章于 2024-04-19 19:31:20 发布

原创最新推荐文章于 2024-04-19 19:31:20 发布 · 4.1k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

我爱前端爱键盘

关注

标签

#前端

分类前端开发

本文介绍了在项目中使用axios的cancel token取消请求时遇到的Uncaught (in promise)错误。错误信息显示为'canceled'。分析原因是axios取消请求时返回的Promise被拒绝，需捕获并处理错误。解决方案是在axios请求的catch块中添加错误处理代码，以正确处理被取消的请求。

项目场景：

在使用 cancel token 取消axios请求时报错Uncaught (in promise)，错误信息为canceled，具体代码如下

    <body>
        <button style="background-color: rosybrown">发送</button>
        <button style="background-color: honeydew">取消</button>
        <script>
            const btns = document.getElementsByTagName('button');
            let cancel = null;
            btns[0].onclick = function () {
                // 发送请求之前，进行状态判断
                if(cancel!=null){
                    cancel()
                }
                axios.get('http://localhost:3000/posts/2', {
                        cancelToken: new axios.CancelToken(function executor(c) {
                            // executor 函数接收一个 cancel 函数作为参数
                            cancel = c;
                        }),
                    })
                    .then(v => {
                        // 请求状态改变之后，将cancel置为null
                        cancel = null;
                    })
          
            };
            btns[1].onclick = function () {
                cancel();
            };
        </script>
    </body>

原因分析：

这是axios请求的返回值是一个promise对象，当请求被取消时会返回一个错误信息的为cancel的结果，需要有对应的错误处理

解决方案：

在请求的最后加上catch函数，进行错误信息的处理

    axios.get('http://localhost:3000/posts/2', {
                        cancelToken: new axios.CancelToken(function executor(c) {
                            // executor 函数接收一个 cancel 函数作为参数
                            cancel = c;
                        }),
                    })
                    .then(v => {
                        // 请求状态改变之后，将cancel置为null
                        cancel = null;
                    })
                    .catch(reason => {
                        console.log(reason.message);
                    });