AbortController中止请求通信[模糊搜索案例]

AbortController中止请求通信[模糊搜索案例]

AbortController中止请求通信(模糊搜索案例)

这里用模糊搜索来做示例,这里是调用后端模糊搜索接口

该案例的中止请求可以用于很多地方,比如取消上传/下载文件等

  • 完整代码
javascript 复制代码
<template>
  <div>
    <input v-model="inputValue" @input="getData" type="text"/>
    <div v-for="item in list" :key="item">{{ item }}</div>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      inputValue: '',
      list: [],
      controller: null
    }
  },
  methods: {
    getData() {
      // this.controller && this.controller.abort(); // 如果存在控制器对象 那么就 在请求完成之前中止它
      // this.controller = new AbortController; // 创建一个新的控制器对象
      this.$axios({
        url: "/api/dirData",
        method:'GET',
        params: { value: this.inputValue },
        // signal: this.controller.signal // 根据需要处理DOM请求通信, 既可以建立通信也可以中止通信
      }).then(res => {
        this.list = res.data
      }).catch(err => {
        err.code !== "ERR_CANCELED" && console.log(err);
      })
    }
  }
}
</script>

该示例应该渲染的结果是包含1234的模糊搜索,但是结果却是123和1234

问题:由于请求的响应的时间不同,所以快速改变输入框的值会导致界面渲染错误。

解决:如果之前的请求还没有响应成功,那么就中止之前的请求。

解决的代码: 很简单,打开注释掉的 3 行代码即可

解决之后的运行结果,可以看到之前的请求已经被取消了。

如果之前的请求响应很快,在下一次请求之前就已经响应了呢,结果会渲染错吗?

答案是,当然不会,因为最后的请求结果会覆盖之前的结果

相关推荐
li357410 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj11 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel11 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
excel11 小时前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端
honder试试12 小时前
焊接自动化测试平台图像处理分析-模型训练推理
开发语言·python
^Rocky12 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化
ponnylv12 小时前
深入剖析Spring Boot启动流程
java·开发语言·spring boot·spring
萧邀人12 小时前
第一课、Cocos Creator 3.8 安装与配置
开发语言
西陵12 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld12 小时前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试