【Vue】取消重复请求

在开发过程中经常会遇到这样的问题：根据条件查询列表数据，当数据量过大时，查询速度会有延迟，此时如果变更一个查询范围更小条件，此时第二次发起的请求延迟较低，数据就会先返回到前端页面，可能过了几秒钟之后，第一次请求的数据才会在页面上渲染出来，这样的话旧数据就覆盖了新的数据，我们页面上展示的就是不符合预期的脏数据了。

此时，解决方法有两种。

第一种，在前端页面定义一个全局 uuid，请求的时候发送给后端，后端接口执行完毕之后将该 uuid 返回给前端，前端在处理逻辑的时候去校验当前的 uuid 与后端返回回来的 uuid 是否相同，是则执行对应的逻辑。

实现步骤：

• 前端生成一个全局唯一的 uuid
• 后端接收该 uuid 并返回给前端
• 前端校验该 uuid 是否是最新的 uuid

第二种，由于我前端使用的是 vue，在 vue 中有一种“取消请求”的技术。当重复发起同一个请求之后，vue 会取消之前的所有请求，保留最新的请求。需要注意的是，vue 只作用于前端而无法取消后端程序的执行。例如连续发起 3 次请求，前面两次都是高延迟请求，因此阻塞在后端接口，第三次响应较快，此时前端就会断开前面两次前后端的连接（实际上是逐个断开的，请求 2 断开了请求 1，请求 3 断开了请求 2）。

实现步骤：

• 用户触发一个新的异步请求时，前端生成一个取消令牌（CancelToken）
• 如果之前有类似的请求在进行中，前端会使用取消令牌取消之前的请求。
• 新的请求会使用新生成的取消令牌
• 如果前一个请求被取消，后端可以根据需要处理这个取消请求。

我采用两者结合的方式，具体实现如下：

1、导入 axios

import axios from "axios"

2、定义一个全局 uuid 和存储取消令牌的字段

export default {
	data() {
		uuid: '',		// 全局uuid
		cancelToken: axios.CancelToken.source(),    // 取消令牌
	}
}

3、具体执行逻辑

// 获取数据列表
fetchData() {
this.uuid = Math.random().toString(36).slice(-8)  // 生成8位随字符
    // 取消上一个请求
    this.cancelToken.cancel('取消上一个请求')
    // 创建新的取消令牌
    this.cancelToken = axios.CancelToken.source()
    // 发起新的请求
    axios.post(, this.listQuery, {
    headers: {
        // ...一些头部信息，例如token	
        token: yourToken,
    },
    cancelToken: this.cancelToken.token
    }).then(resp => {
        let oldUuid = resp.uuid
        if (oldUuid === this.uuid) {		// 校验uuid
        	// ...代码逻辑
        } else {
            // ...代码逻辑
        }
	}).catch(error => {
        if (axios.isCancel(error)) {
        	console.log('请求被取消', error.message)
        } else {
        	console.log('请求错误', error)
        }
    })
},

由于后端接口操作比较简单，这里就不展示后端接口了。

希望能帮到你！