丢弃旧时序的请求

场景

实时搜索中，存在第一次搜索比第二次搜索的请求时间更久的可能，这个时候，已经展示了第二次搜索的结果，第一次搜索的结果就不需要展示了，应该丢弃

实现

class RequestWithoutOldTime {
  // 当前最新传入请求的下标
  private index = 0
  // 当前最新完成请求的下标
  private finish = 0
  private onResponse: (response: any) => void

  // 传入一个方法，当请求成功会调用此方法，并且传入结果
  constructor(onResponse: (response: any) => void) {
    this.onResponse = onResponse
  }

	// 添加请求
  add(request: Promise<any>) {
    // 缓存当前请求的下标
    const index = this.index
    // 当请求成功后
    const check = (response: any) => {
      // 如果这次的完成下标更加新，则更新完成下标，并且通知
      if (this.finish < index) {
        this.finish = index
        this.onResponse(response)
      }
    }
    request.then(check, check)
    this.index++
  }
}

const requestWithoutOldTime = new RequestWithoutOldTime((r) => {
  console.log(r)
})
for (let i = 0; i < 5; i++) {
  requestWithoutOldTime.add(fetch(`http://127.0.0.1:3001/api/id/${i}`))
}