上一篇: CSP 初赛知识点整理下一篇:VUE开发公众号IOS9白屏问题

vue中axios防止多次触发,终止多次请求（防抖）

HTML5 发布时间：2022-04-27 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了vue中axios防止多次触发,终止多次请求（防抖），大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

需求

例如在搜索框中，并不是你输入@L_618_1@字就需要渲染一次数据，而是取最后一次的输入内容进行搜索。

连续按下 AAAAA ，只取最后一次按下时搜索框的内容（即：AAAAA）进行搜索。而不是搜索跟 A（第一次按下），AA（第二次按下），AAA相关联的内容

&lt;script&gt;
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) =&gt; {
                // 在这里处理得到的数据
                ...
            }).catch((err) =&gt; {
                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(‘终止请求‘)
            }
        },}
}
&lt;/script&gt;