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实现搜索功能

    vue实现搜索功能

    这篇文章主要为大家详细介绍了vue实现搜索功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • Vue表单及表单绑定方法

    Vue表单及表单绑定方法

    今天小编就为大家分享一篇Vue表单及表单绑定方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 一个Vue页面的内存泄露分析详解

    一个Vue页面的内存泄露分析详解

    这篇文章主要介绍了一个Vue页面的内存泄露分析详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • vue之如何实现打印功能

    vue之如何实现打印功能

    这篇文章主要介绍了vue之如何实现打印功能问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • 详解Vue3 SFC 和 TSX 方式调用子组件中的函数

    详解Vue3 SFC 和 TSX 方式调用子组件中的函数

    在使用 .vue 定义的组件中,setup 中提供了 defineExpose() 方法,该方法可以将组件内部的方法暴露给父组件,这篇文章主要介绍了Vue3 SFC 和 TSX 方式调用子组件中的函数,需要的朋友可以参考下
    2022-10-10
  • 在Vue项目中引入Echarts绘制K线图的方法技巧

    在Vue项目中引入Echarts绘制K线图的方法技巧

    在Vue项目开发中,数据可视化是一项重要的任务,Echarts是一个由百度开源的数据可视化库,提供了丰富的图表类型和强大的交互功能,其中,K线图常用于展示金融数据的走势,本文将详细介绍如何在Vue项目中引入Echarts并绘制K线图,需要的朋友可以参考下
    2025-04-04
  • element中el-autocomplete的常见用法示例

    element中el-autocomplete的常见用法示例

    这篇文章主要给大家介绍了关于element中el-autocomplete的常见用法的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用element具有一定的参考学习价值,需要的朋友可以参考下
    2023-03-03
  • VUE对接deepseekAPI调用方式

    VUE对接deepseekAPI调用方式

    文章介绍了如何在Vue项目中对接DeepSeek API,包括在开放平台注册账号申请APIKey、安装axios库、创建API调用函数以及在Vue组件中调用该函数
    2025-01-01
  • 解决vue v-for 遍历循环时key值报错的问题

    解决vue v-for 遍历循环时key值报错的问题

    今天小编就为大家分享一篇解决vue v-for 遍历循环时key值报错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 在Vue中使用WebScoket 会怎么样?

    在Vue中使用WebScoket 会怎么样?

    这篇文章主要介绍了在Vue中使用WebScoket,网络的不稳定而断开连接,webscoket不会出现异常,下面就一起进入文章看看吧
    2022-01-01

最新评论