vue中axios防止多次触发终止多次请求的示例代码（防抖）

需求

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

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

本文例子:  检测用户输入的值,监测这个值,然后根据值调用接口查询结果

代码：

<template>  <input type="text" v-model="message"><template><script>import axios from "axios";export default {  data(){    return{      message:''  },  watch : {    message(newVal){           var that = this;      // 取消上一次请求      this.cancelRequest();      axios.get('/api/searchList?cityId=10&kw='+ newVal, {               cancelToken: new axios.CancelToken(function(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);        }      })        }  },  methods: {     cancelRequest(){      if(typeof this.source ==='function'){        this.source('终止请求')      }    }  }}</script>

 其他做法：

   可以使用 clearTimeout()   setTimeout()  截取，设置一定时常请求一次

总结

以上所述是小编给大家介绍的vue中axios防止多次触发终止多次请求的实现方法（防抖），希望对大家有所帮助！