【javascript】关于 AbortController

相关概念：https://developer.mozilla.org/zh-CN/docs/Web/API/AbortController

需求描述：后台返回10000条图片url，前端拿到后需要做成假分页，假设1页显示20张图，分成50页。

部分逻辑：

for(let i=0;i<imgUrlList.length;i++){
   let image = new Image()
   image.src = imgUrlList[i]
   image.onload = () =>{
      do soming....
   }
}

问题：在迅速换页的过程中，例如从第1页连续切换2、3、4到第5页，第2、3、4页的60条请求并不会被取消，这就造成了资源浪费，延迟了第5页数据加载，有没有办法取消这些来不及响应的请求呢？

答案是 AbortController，该接口表示一个控制器对象，允许你根据需要中止一个或多个 Web 请求。

if (this.abortController) {
      // 如果存在abortController,就取消掉上次的请求,注意不同接口如果使用同一个 
      abortController,则会被abort() 一起取消掉
      this.abortController.abort()
      this.abortController = ""
} else {
      this.abortController = new AbortController()
}
this.abortController = new AbortController()

for(let i=0;i<imgUrlList.length;i++){
       fetch(imgUrlList[i],{this.abortController.signal}).then(response=>{
          return response.blob()
        }).then(response=>{
          const objectURL = URL.createObjectURL(response);
           image.src = objectURL
           image.onload=()=>{
              do soming...
           }
}