vue判断是不是最新的请求接口返回的数据

有时候一个页面，我们可能会重复请求同一个接口，但是请求参数不同，如果第一个参数请求接口了，我们又使用第二个参数请求同一个接口了，但是第二个参数请求先返回数据，然后第一个参数才返回数据，这时我们拿到的接口数据其实是第一个参数返回的数据，但是我们想拿到是最新的参数返回的数据，也就是第二个参数返回的数据。

造成这种现象的原因：可能是其他页面跳转过来，然后携带有多个参数，然后在当前页面又使用watch监听来重新请求接口，然后在mounted里面也写有请求接口

解决方案：自定义一个字段来记录请求接口的次数，只保留最新请求的数据

1、首先在data里面自定义一个字段记录请求接口的次数

data() {
  return {
    latestFetchId: 0,
  }
},

2、在请求接口和返回数据里面做判断

this.latestFetchId += 1;
const fetchId = this.latestFetchId;
getList(param).then(res => {
  // 获取最新的 latestFetchId 值，判断当前次请求是否为最后一次，不是则丢弃
  if (fetchId !== this.latestFetchId) {
      console.log('不是最新请求')
      return
  }
  let data = res.data.data;
  this.dataList = data.records;
  this.portalTotal = data.total;
}).catch(err => {
  console.log(err)
})