[JavaScript知识库]解决接口响应快慢导致的数据渲染问题

目录

问题描述及场景
不同的决绝方案
总结

1. 问题的描述及场景

在一些数据请求比较频繁且使用同一data进行渲染的情况下，相信大部分小伙伴都遇到过数据渲染出现问题的情况。例如：每个筛选条件的变化都要请求接口，但是前一个请求的数据还没成功响应，下一个请求的数据已经响应，数据渲染成功后，等前一个请求成功响应后，渲染的数据就变成了前一个请求的数据。此时就出现了数据渲染错误的情况。

模拟此场景如下：

2. 解决方案

2.1 从axios层面解决问题（只针对使用axios做数据请求的项目）

axios为我们提供了取消请求的方法：cancel token，我们可以在上次请求没有响应时点击下次请求时来取消上次请求，达到数据不被替换的效果。
此处使用如下（对get请求进行了包装）

import $a from 'axios'

const axios = $a.create()
const { CancelToken } = $a

const tokens = new Map()
function sget(url, params = {}, key = null) {
  if (tokens.has(key)) {
    tokens.get(key).cancel('axioscancel')
  }
  const source = CancelToken.source()
  tokens.set(key, source)
  return axios.get(url, {
    params, cancelToken: source.token
  })
}

再回到刚刚的场景，可以看到慢请求直接是被取消掉了

2.2 使用js作用域来解决问题

核心：通过在全局定义一个变量$time,在发请求前定义一个变量currentTime, 将currentTime赋值给 $time,在请求成功时比较两个变量是否相等，如果不相等，直接return掉，不赋值。此处是发送数据且成功响应，在赋值时判断是否要赋值。

总结

综上两种解决方案，可依据场景具体选择，个人推荐对axios进行封装，从源头解决问题。