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

 更新时间:2023年01月19日 10:07:09   作者:彭世瑜  
这篇文章主要介绍了Vue如何处理Axios多次请求数据显示问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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 },
      });
    },
  },
};

vue axios多次请求一个接口取消前面请求

方法一

    var CancelToken = axios.CancelToken;
    var source = CancelToken.source(); // 每次调用接口之前都赋值一下 不然不会触发请求
    axios.get('/user/12345', {//get请求在第二个参数
     cancelToken: source.token
    }).catch(function(thrown) {
    });
    axios.post('/user/12345', {//post请求在第三个参数
     name: 'new name'
    }, {
     cancelToken: source.token
    });
    source.cancel('不想请求了');

方法二

const CancelToken = axios.CancelToken;
let cancel;
 
axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});
 
// cancel the request
cancel();

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 使用vuedraggable实现从左向右拖拽功能

    使用vuedraggable实现从左向右拖拽功能

    这篇文章主要为大家详细介绍了使用vuedraggable实现从左向右拖拽功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 使用Vue自定义指令实现Select组件

    使用Vue自定义指令实现Select组件

    这篇文章主要介绍了使用Vue自定义指令实现Select组件,如果哪位朋友对vue自定义指令不是多了解的话,此篇文章会对你有所帮助的,需要的朋友可以参考下
    2018-05-05
  • ant-design-vue中设置Table每页显示的条目数量方式

    ant-design-vue中设置Table每页显示的条目数量方式

    这篇文章主要介绍了ant-design-vue中设置Table每页显示的条目数量方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 如何优雅地在vue中添加权限控制示例详解

    如何优雅地在vue中添加权限控制示例详解

    这篇文章主要给大家介绍了关于如何优雅地在vue中添加权限控制的相关资料,文中通过示例代码以及图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • 使用vue实现pdf预览功能的方法

    使用vue实现pdf预览功能的方法

    许多朋友想要材料上传之后点击预览实现在浏览器上预览的效果,所以本文将给大家介绍如何使用vue实现pdf预览功能,文中有实现代码,有需要的朋友可以参考阅读下
    2023-08-08
  • vue和webpack打包项目相对路径修改的方法

    vue和webpack打包项目相对路径修改的方法

    这篇文章主要介绍了vue和webpack打包项目相对路径修改的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • Vue组件间的通信pubsub-js实现步骤解析

    Vue组件间的通信pubsub-js实现步骤解析

    这篇文章主要介绍了Vue组件间的通信pubsub-js实现原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-03-03
  • 解决vue项目nginx部署到非根目录下刷新空白的问题

    解决vue项目nginx部署到非根目录下刷新空白的问题

    今天小编就为大家分享一篇解决vue项目nginx部署到非根目录下刷新空白的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • uniapp+vue3实现上传图片组件封装功能

    uniapp+vue3实现上传图片组件封装功能

    这篇文章主要介绍了uniapp+vue3实现上传图片组件封装功能,首先创建一个 components 文件在里面进行组件的创建,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2024-07-07
  • vue3 vite如何读取文件内容

    vue3 vite如何读取文件内容

    这篇文章主要介绍了vue3 vite如何读取文件内容问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-05-05

最新评论