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防止多次触发终止多次请求的实现方法（防抖），希望对大家有所帮助！

赞 (0)

相关推荐

  • vue请求本地自己编写的json文件的方法

    1.第一步,这是目录结构 2.接下来是build/webpack.dev.conf.js文件需要配置的内容 代码: //vue配置请求本地json数据 const express = require('express') const app = express() const appData = require('../static/major_info.json')//加载本地json文件 const majorlist = appData.contents;//获取本地对应数据 const

  • 浅谈VUE防抖与节流的最佳解决方案(函数式组件)

    浅谈VUE防抖与节流的最佳解决方案(函数式组件)

    前言 有echarts使用经验的同学可能遇到过这样的场景,在window.onresize事件回调里触发echartsBox.resize()方法来达到重绘的目的,resize事件是连续触发的这意味着echarts实例会连续的重绘这是非常耗性能的.还有一个常见的场景在input标签的input事件里请求后端接口,input事件也是连续触发的,假设我输入了"12"就会请求两次接口参数分别是"1"和"12",比浪费网络资源更要命的是如果参数为&quo

  • Vue使用axios出现options请求方法

    Vue使用axios出现options请求方法

    以下代码如果需要在你本地跑起来: Ⅰ.需要apache服务,并把php代码丢进去指定位置 Ⅱ.将下面http://www.test.com/day05/jiekou.php地址,改成自己指定位置的域名或ip 1.从一段简易代码说起 前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpor

  • Vue最新防抖方案(必看篇)

    函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时.举个栗子,持续触发scroll事件时,并不执行handle函数,当1000毫秒内没有触发scroll事件时,才会延时触发scroll事件. 函数节流(throttle):当持续触发事件时,保证一定时间段内只调用一次事件处理函数.节流通俗解释就比如我们水龙头放水,阀门一打开,水哗哗的往下流,秉着勤俭节约的优良传统美德,我们要把水龙头关小点,

  • vue实现手机号码的校验实例代码（防抖函数的应用场景）

    vue实现手机号码的校验实例代码（防抖函数的应用场景）

    前言 上一篇博文我们讲到了节流函数的应用场景,我们知道了节流函数可以用在模糊查询.scroller.onresize等场景:今天这篇我们来讲防抖函数的应用场景:: 通过上一篇博文的学习,我们知道了防抖函数的原理:只有在事件触发的时候才会延迟加载,如果在延迟加载之前再次触发,则会刷新延迟时间重新延迟,触发次数有且只有触发一次: 如果对防抖函数原理有疑惑,请点击链接跳转到关于防抖函数讲解的博文:https://www.jb51.net/article/169350.htm 防抖函数一般是用于频繁触发

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

    需求 例如在搜索框中,并不是你输入一个字就需要渲染一次数据,而是取最后一次的输入内容进行搜索. 连续按下 AAAAA ,只取最后一次按下时搜索框的内容(即:AAAAA)进行搜索. 而不是搜索跟 A(第一次按下),AA(第二次按下),AAA相关联的内容 本文例子:  检测用户输入的值,监测这个值,然后根据值调用接口查询结果 代码: <template> <input type="text" v-model="message"> <temp

  • vue中axios处理http发送请求的示例（Post和get）

    vue中axios处理http发送请求的示例（Post和get）

    本文介绍了vue中axios处理http发送请求的示例(Post和get),分享给大家,具体如下: axios中文文档 https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format   axios文档 在处理http请求方面,已经不推荐使用vue-resource了,而是使用最新的axios,下面做一个简单的介绍. 安装 使用node npm install axios 使用cdn <scrip

  • vue中axios解决跨域问题和拦截器的使用方法

    vue中axios不支持vue.use()方式声明使用. 所以有两种方法可以解决这点: 第一种: 在main.js中引入axios,然后将其设置为vue原型链上的属性,这样在组件中就可以直接 this.axios使用了 import axios from 'axios'; Vue.prototype.axios=axios; components: this.axios({ url:"a.xxx", method:'post', data:{ id:3, name:'jack' } }

  • Vue 中axios配置实例详解

    1.GET 请求 //向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 也可以通过 params 对象传递参数 axios.get('/user', { params: { ID: 12345 } }) .then(function (respons

  • 详解vue中axios的使用与封装

    分享下我自己的axios封装 axios是个很好用的插件,都是一些params对象,所以很方便做一些统一处理 当然首先是npm安装axios 很简单$ npm install axios --save 在src下新建文件夹 service / index.js 接着上代码 import axios from 'axios'; import { Toast} from 'mint-ui';// 我用的mint的框架来弹出我的错误返回 大家可以用别的提示 import router from '..

  • vue中axios实现数据交互与跨域问题

    1. 通过axios实现数据请求 vue.js默认没有提供ajax功能的. 所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互. 注意,axios本质上就是javascript的ajax封装,所以会被同源策略限制. 下载地址: https://unpkg.com/axios@0.18.0/dist/axios.js https://unpkg.com/axios@0.18.0/dist/axios.min.js axios提供发送请求的常用方法有两个:axio

  • Vue中axios的封装（报错、鉴权、跳转、拦截、提示）

    统一捕获接口报错 弹窗提示 报错重定向 基础鉴权 表单序列化 实现的功能 统一捕获接口报错 : 用的axios内置的拦截器 弹窗提示: 引入 Element UI 的 Message 组件 报错重定向: 路由钩子 基础鉴权: 服务端过期时间戳和token,还有借助路由的钩子 表单序列化: 我这边直接用 qs (npm模块),你有时间也可以自己写 用法及封装 用法 // 服务层 , import默认会找该目录下index.js的文件,这个可能有小伙伴不知道 // 可以去了解npm的引入和es6引入

  • vue中axios的封装问题(简易版拦截,get,post)

    第一步还是先下载axios npm install axios --save 第二步/src/utils/目录下建立一个htttp.js import axios from 'axios'; axios.defaults.timeout = 5000; axios.defaults.baseURL =''; //http request 拦截器 axios.interceptors.request.use( config => { // const token = getCookie('名称')

  • 关于Vue中axios的封装实例详解

    前言 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 作为一个优秀的 HTTP 库,axios 打败了曾经由 Vue 官方团队维护的 vue-resource,获得了 Vue 作者尤小右的大力推荐,成为了 Vue 项目中 HTTP 库的最佳选择. 虽然,axios 是个优秀的 HTTP 库,但是,直接在项目中使用并不是那么方便,所以,我们需要对其进行一

  • vue中axios的二次封装实例讲解

    我们做项目时,虽然axios也可以直接拿来用,但是对接口比较零散,不太好进行维护,也会产生大量的重复代码,所以我在这对axios进行了统一接口处理 第一步,先在src中的公共文件夹中如utils里新建request.js文件 import axios from 'axios' import router from '@/router/routers' import { Notification, MessageBox } from 'element-ui' import store from '

随机推荐