关于vue.js:前端项目中如何保证请求时序

前端我的项目中常常遇到申请输出查找场景，防抖与截流很好解决了频繁输出问题，然而不能解决最先发动申请后果后返回，笼罩了最初一次的搜寻后果，导致搜寻后果不正确。我总结一下本人罕用的两种办法。

1. 应用工夫戳来过滤返回后果，如果申请回调函数中的工夫戳小于以后工夫戳则返回，阐明曾经解决了之后的申请后果了，这个申请过期了。

// 近程搜寻商品
    searchGoods(data) {if (!data) {return}
      if (this.isRemote) {const reqCount = new Date().getTime()
        this.OrderInquireQuerySpuAndUnit({keyWord: data}).then(res => {if (this.reqCount < currentReqCount) {return}
          if (res.data) {if (res.data.length > 0) {this.goodsList = res.data}
          }
        }).catch(err => {console.log(err)
        }).finally(() => {this.currentReqCount = reqCount})
      }
    },

2. 基于 axios 封装对立的申请办法，前面发动的申请会勾销之前期待返回后果的申请，须要多传一个 cancelTokenPath，示意以后同一个输出组件发动的申请

export const getRequest = param => {const { cancelTokenPath, ...restQuery} = (param && param.query) || {}
    // cancelTokenPath 是为了防止页面中多处申请的同一个接，导致谬误的勾销
  if (cancelTokenPath) {
    const CancelToken = axios.CancelToken
    const source = CancelToken.source()

    if (store[cancelTokenPath]) {store[cancelTokenPath].cancel('Canceled by the last request')
    }
    store[cancelTokenPath] = source
  }

  return new Promise((resolve, reject) => {
    Vue.axios
      .get(param.url, {params: restQuery || {},
        headers: param.headers || {},
        cancelToken: cancelTokenPath && store[cancelTokenPath].token
      })
      .then(res => { resolve(res) })
      .catch(err => {reject(err)
      })
  })
}