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 行代码即可

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

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

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

相关推荐
嘻嘻嘻嘻嘻嘻ys4 分钟前
《Spring Boot 3响应式架构实战:R2DBC驱动的高并发数据持久化革命》
前端·后端
滚石_stars4 分钟前
了解 CSS 的 display: inline-flex;
前端
程序员Bears4 分钟前
HTML5 新特性详解:语义化标签、表单与音视频嵌入
前端·html·html5·visual studio code
进取星辰4 分钟前
14、服务端组件:未来魔法预览——React 19 RSC实践
前端·react.js·前端框架
前端大白话10 分钟前
Vue2和Vue3语法糖差异大揭秘:一文读懂,开发不纠结!
javascript·vue.js·设计模式
剽悍一小兔10 分钟前
小程序发布后,不能强更的情况下,怎么通知到用户需要去更新?
前端
115432031q11 分钟前
基于SpringBoot+Vue实现的旅游景点预约平台功能十三
java·前端·后端
JiangJiang12 分钟前
🧠 面试官:受控组件都分不清?还敢说自己写过 React?
前端·react.js·面试
tianchang12 分钟前
JS 中 Map 的概念与使用
前端·javascript
Jenlybein12 分钟前
[ Javascript 面试题 ]:提取对应的信息,并给其赋予一个颜色,保持幂等性
前端·javascript·面试