相同异步请求，只处理最后一次请求

最新推荐文章于 2023-08-23 17:10:41 发布

STRIVE_LC

最新推荐文章于 2023-08-23 17:10:41 发布

阅读量981

点赞数 7

CC 4.0 BY-SA版权

分类专栏：团团的踩坑日记文章标签：前端 javascript vue.js api

本文链接：https://blog.youkuaiyun.com/STRIVE_LC/article/details/120877698

团团的踩坑日记专栏收录该内容

3 篇文章

订阅专栏

本文探讨了在前端开发中，针对用户输入搜索时可能导致的多次接口调用和延迟数据展示问题。通过在输入时增加请求计数，并与后端配合，确保只显示最后一次请求的结果，从而提升用户体验。示例代码展示了如何实现这一优化策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在我们日常开发中，经常会有搜索框过调用接口获取数据展示，除了做必要的防抖处理外，还有我们经常忽略的一个问题：用户在输入时，因为用户输入时的停顿就会调用了几次接口，但是输入完成后，这个接口可能由于网络波动等各种原因出现调用时长较长的情况，那么就会展示之前的接口数据，很显然用户输入完成后展示之前的数据肯定是不行的，我们需要去避免这种情况，想到了一种方法可以判断出是否是最后一次请求（该方法需要后端配合）再去显示真正需要显示的数据，以免对用户造成困扰

直接上demo


<template>
    <div class="demo-input">
        <a-input type="text"  @onchange="search" />
        <p>{{responseData}}</p>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data() {
        return {
            responseData: '',
            key: 0, // 第几次请求
        }
    },
    methods: {
        search(val) {
            this.key += 1;   // 调用一次接口请求次数就+1
            axios.get('/api/search', {
                params: {
                    key: this.key,
                    title: val
                }
            }).then(res => {
                if (this.isLastRequest(res.data.key)) {
                    this.responseData = res.data.content
                }
            })
        },
        // 判断是否是最后一次请求
        isLastRequest (key) {
            return key === this.key
        }
    }
}
</script>