场景：
一个搜索框，要求用户输入内容改变之后立即进行搜索
遇到的问题：
用户频繁的进行搜索词修改，会触发很多次搜索请求，如果请求有延时，就会出现显示不正确的现象
比如下面这个例子：
请求1发出后，存在延时大，响应1后返回；
请求2发出后，延时小，响应2先返回；
最后显示的内容是响应1；
而我期待的显示内容，是最后一次的请求结果响应2
请求1 -------> 延时 ---------> 响应1 请求2 -> 延时 -> 响应2
服务端代码
server.py
# -*- coding: utf-8 -*- from flask import Flask, request from flask_cors import CORS import time import random app = Flask(__name__) # 允许跨域 CORS(app, supports_credentials=True) # 路由 @app.route('/search') def search(): # 模拟网络延时 sleep = random.random() * 2 time.sleep(sleep) keyword = request.args.get('keyword') return {'keyword': keyword, "sleep": sleep} if __name__ == '__main__': app.run(debug=True)
客户端代码
1、直接请求，会出现数据显示不对的情况
<template> <div class=""> <input type="text" @input="handleInput" >{{result}}</div> </template> <script> import axios from 'axios'; export default { name: '', data() { return { result: '', }; }, methods: { async handleInput(e) { const keyword = e.target.value; const res = await this.search(keyword); this.result = res.data; }, // 直接搜索：可能显示的不是最后一次搜索结果 async search(keyword) { return await axios.get('http://127.0.0.1:5000/search', { params: { keyword: keyword }, }); }, }, }; </script> <style lang="scss" scoped> </style>
2、增加一个定时器
import axios from 'axios'; export default { name: '', data() { return { result: '', timer: null, // 定时器 }; }, methods: { async handleInput(e) { const keyword = e.target.value; const res = await this.searchForTimeout(keyword); this.result = res.data; }, // 加定时器：会有一个延迟，如果有超过500ms的网络延时，也会出现数据不一致 async searchForTimeout(keyword) { return new Promise((resolve, reject) => { // 清除没执行的timer定时器 clearTimeout(this.timer); this.timer = setTimeout(() => { try { const res = axios.get('http://127.0.0.1:5000/search', { params: { keyword: keyword }, }); resolve(res); } catch (e) { reject(e); } }, 500); }); }, } };
3、加请求时间戳
import axios from 'axios'; // 使用axios的拦截器 const instance = axios.create(); instance.interceptors.request.use( (config) => { config['X-Timestamp'] = new Date().getTime(); return config; }, (err) => { return Promise.reject(err); } ); instance.interceptors.response.use( (res) => { res.data.timestamp = res.config['X-Timestamp']; return res; }, (err) => { return Promise.reject(err); } ); export default { name: '', data() { return { result: '', timestamp: 0, // 相当于版本号 }; }, methods: { async handleInput(e) { const keyword = e.target.value; const res = await this.searchForTimestamp(keyword); // 如果时间戳大于当前记录的时间戳则更新数据 if (res.data.timestamp > this.timestamp) { this.timestamp = res.data.timestamp; this.result = res.data; } }, // 加请求时间戳：类似乐观锁 async searchForTimestamp(keyword) { return instance.get('http://127.0.0.1:5000/search', { params: { keyword: keyword }, }); }, }, };
更多参考
【知识整理】多次快速请求同一数据接口时，由于请求返回的时间原因导致数据渲染混乱的web前端解决方案
axios如何取消重复请求
