Vue如何处理Axios多次请求数据显示问题
彭世瑜 人气:0Vue处理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();
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容