博客

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

  • Post author:
  • Post category:其他




项目场景：

在使用

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


版权声明：本文为ysml_mj原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。