Vue：处理Axios多次请求问题数据显示问题

场景：

一个搜索框，要求用户输入内容改变之后立即进行搜索

遇到的问题：

用户频繁的进行搜索词修改，会触发很多次搜索请求，如果请求有延时，就会出现显示不正确的现象

比如下面这个例子：

​​请求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如何取消重复请求