axios中取消请求（使用CancelToken）

你的名字 2023-02-15 03:56 14阅读 0赞

## 一、前言 ##

在项目中经常有一些场景会连续发送多个请求，而异步会导致最后得到的结果不是我们想要的，并且对性能也有非常大的影响。例如一个搜索框，每输入一个字符都要发送一次请求，但输入过快的时候其实前面的请求并没有必要真的发送出去，这时候就需要在发送新请求的时候直接取消上一次请求。

## 二、代码 ##

<script>
    import axios from 'axios'
    import qs from 'qs'
    
    export default {
        methods: {
            request(keyword) {
                var that = this;
                var CancelToken = axios.CancelToken
                var source = CancelToken.source()
                  
                // 取消上一次请求
                this.cancelRequest();
                
                axios.post(url, qs.stringify({kw:keyword}), {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'Accept': 'application/json'
                    },
                    cancelToken: new axios.CancelToken(function executor(c) {
                        that.source = c;
                    })
                }).then((res) => {
                    // 在这里处理得到的数据
                    ...
                }).catch((err) => {
                    if (axios.isCancel(err)) {
                        console.log('Rquest canceled', err.message); //请求如果被取消，这里是返回取消的message
                    } else {
                        //handle error
                        console.log(err);
                    }
                })
            },
            cancelRequest(){
                if(typeof this.source ==='function'){
                    this.source('终止请求')
                }
            },
        }
    }
    </script>

## 三、结语 ##

这样就可以成功取消上一次请求啦！真的非常好用~

原理：[http://www.qiutianaimeili.com/html/page/2019/03/8grudzwvfmq.html][http_www.qiutianaimeili.com_html_page_2019_03_8grudzwvfmq.html]

[http_www.qiutianaimeili.com_html_page_2019_03_8grudzwvfmq.html]: http://www.qiutianaimeili.com/html/page/2019/03/8grudzwvfmq.html

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关 Axios 如何取消重复请求？

在 Web 项目开发过程中，我们经常会遇到重复请求的场景，如果系统不对重复的请求进行处理，则可能会导致系统出现各种问题。比如重复的 `post` 请求可能会导致服务端产生两笔记

ゝ一纸荒年。/ 2023年09月23日 20:19/ 0 赞/ 125 阅读

相关 axios中的取消请求

转自；[https://www.cnblogs.com/Yancyzheng/p/12576329.html][https_www.cnblogs.com_Yancyzheng

柔光的暖阳◎/ 2023年02月15日 05:22/ 0 赞/ 15 阅读

相关 axios中取消请求（使用CancelToken）

一、前言在项目中经常有一些场景会连续发送多个请求，而异步会导致最后得到的结果不是我们想要的，并且对性能也有非常大的影响。例如一个搜索框，每输入一个字符都要发送一次请求，

你的名字/ 2023年02月15日 03:56/ 0 赞/ 15 阅读

相关封装 axios 取消重复请求

编者按：本文作者舒丽琦，奇舞团前端开发工程师在我们web开发过程中，很多地方需要我们取消重复的请求。但是哪种场合需要我们取消呢？我们如何取消呢？带着这些问题我们阅读本文。

我就是我/ 2023年01月03日 12:43/ 0 赞/ 243 阅读

相关封装 axios 取消重复请求

编者按：本文作者舒丽琦，奇舞团前端开发工程师在我们web开发过程中，很多地方需要我们取消重复的请求。但是哪种场合需要我们取消呢？我们如何取消呢？带着这些问题我们阅读本文。

落日映苍穹つ/ 2022年12月28日 15:25/ 0 赞/ 194 阅读

相关 Axios 取消请求

应用场景取消请求偶尔会用到，以下是两个工作中可能用到的场景 1. 如果一个数据请求量比较大（可能会请求错误），还没请求完就切换路由，可能会出现错误的提示框（响应拦截

我不是女神ヾ/ 2022年11月16日 15:14/ 0 赞/ 246 阅读

相关 axios 设置取消重复请求

取消请求需要用到cancelToken，cancelToken就是用来取消ajax请求的，取消请求之后,会进入error,在里面处理一下如果是取消请求,就不报错。在响应拦

桃扇骨/ 2022年10月13日 00:29/ 0 赞/ 205 阅读

相关 VUE Axios取消请求 - CancelToken

铺垫 Axios 是一个基于 Promise 的 HTTP 库，它的浏览器支持性良好，是Vue主推请求异步的方法；它支持多种请求的简写和请求参数的配置，也支持使用自定

以你之姓@/ 2022年09月10日 07:16/ 0 赞/ 395 阅读

相关 axios 请求取消及其实现过程

一、axios 请求取消 1. `axios` 请求取消，代码如下所示： <!DOCTYPE html> <html lang="en"> <

怼烎@/ 2022年08月31日 12:21/ 0 赞/ 227 阅读

相关 axios如何取消请求

场景：小邹最近在使用axios时碰到一个问题，就是我想在特性条件时取消请求，以便减少不必要的前后接口交互。我们知道ajax取消请求的方式有两种：一种是通过设置时间，超时自动断开

拼搏现实的明天。/ 2022年04月22日 04:08/ 0 赞/ 481 阅读