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

 更新时间:2018年11月10日 10:06:21   作者:Peggy7  
这篇文章主要介绍了vue axios请求频繁时取消上一次请求的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

一、前言

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

二、代码

<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>

三、结语

这样就可以成功取消上一次请求啦!以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • vue与原生app的对接交互的方法(混合开发)

    vue与原生app的对接交互的方法(混合开发)

    vue开发h5项目特别是移动端的项目,很多都是打包后挂载在原生APP上的,这篇文章主要介绍了vue与原生app的对接交互的方法,非常具有实用价值,需要的朋友可以参考下
    2018-11-11
  • Vue文件如何转换成base64并去除多余的文件类型前缀

    Vue文件如何转换成base64并去除多余的文件类型前缀

    这篇文章主要介绍了Vue文件如何转换成base64并去除多余的文件类型前缀问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue3+pinia的快速入门使用教程

    vue3+pinia的快速入门使用教程

    Pinia是Vue的一个存储库,它允许你跨组件/页面共享状态,下面这篇文章主要给大家介绍了关于vue3+pinia的快速入门使用,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • vue-router路由传参及隐藏参数问题

    vue-router路由传参及隐藏参数问题

    这篇文章主要介绍了vue-router路由传参及隐藏参数问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • vue2.0 elementUI制作面包屑导航栏

    vue2.0 elementUI制作面包屑导航栏

    本篇文章主要给大家详细代码讲解了vue2.0 elementUI制作面包屑导航栏的过程,对此有兴趣的朋友可以学习下。
    2018-02-02
  • Vue实现图书管理案例

    Vue实现图书管理案例

    这篇文章主要为大家详细介绍了Vue实现图书管理案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • 脚手架vue-cli工程webpack的作用和特点

    脚手架vue-cli工程webpack的作用和特点

    webpack是一个模块打包的工具,它的作用是把互相依赖的模块处理成静态资源。这篇文章主要介绍了vue-cli工程webpack的作用和特点,需要的朋友可以参考下
    2018-09-09
  • vue中关于computed的this指向问题

    vue中关于computed的this指向问题

    这篇文章主要介绍了vue中关于computed的this指向问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • 详解vue 模版组件的三种用法

    详解vue 模版组件的三种用法

    本篇文章主要介绍了详解vue 模版组件的三种用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • vue.js多页面开发环境搭建过程

    vue.js多页面开发环境搭建过程

    利用 vue-cli 搭建的项目大都是单页面应用项目,对于简单的项目,单页面就能满足要求。这篇文章主要介绍了vue.js多页面开发环境搭建 ,需要的朋友可以参考下
    2019-04-04

最新评论