vue axios请求频繁时取消上一次请求

曾经终败给现在 2022-04-04 07:44 263阅读 0赞

## 一、前言 ##

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

## 二、代码 ##

<script>
    import axios from 'axios'
    import qs from 'qs'
    
    export default {
        methods: {
            request(keyword) {
                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>

## 三、结语 ##

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

原文地址：[https://segmentfault.com/a/1190000016963943][https_segmentfault.com_a_1190000016963943]

[https_segmentfault.com_a_1190000016963943]: https://segmentfault.com/a/1190000016963943

发表评论取消回复

表情：

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

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

相关阅读

相关 axios，二次请求的时候，取消第一次发出的请求

let pending = \[\] //声明一个数组用于存储每个ajax请求的取消函数和ajax标识 let cancelToken = axios.CancelToken

川长思鸟来/ 2023年08月17日 17:15/ 0 赞/ 127 阅读

相关 vue项目进行防抖实现请求频繁时取消上一次操作

一、需求问题：在项目开发中，可能会连续发送多个请求，但是我们只想发送一次请求。比如在搜索框进行输入内容的时候，当在每输入一个字符的时候都会进行搜索查询，频繁发送请求，对服务端

矫情吗；*/ 2023年06月23日 05:53/ 0 赞/ 5 阅读

相关封装 axios 取消重复请求

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

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

相关 Vue-axios 请求超时，请求拦截器

请求超时： 1，可以在全局设置请求超时： axios.defaults.timeout = 30 1000; // 30s 2，在某一个请求里面设置超时：

╰+哭是因爲堅強的太久メ/ 2022年12月31日 02:26/ 0 赞/ 485 阅读

相关 Axios 取消请求

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

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

相关 axios 设置取消重复请求

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

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

相关 VUE Axios取消请求 - CancelToken

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

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

相关 axios如何取消请求

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

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

相关 vue axios请求频繁时取消上一次请求

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

曾经终败给现在/ 2022年04月04日 07:44/ 0 赞/ 264 阅读

相关 vue axios请求频繁时取消上一次请求

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

叁歲伎倆/ 2022年01月23日 11:53/ 0 赞/ 268 阅读