526互联

【javascript】关于 AbortController

发布时间 2023-08-09 14:44:20作者: 皮五辣子

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

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

部分逻辑：

1 for(let i=0;i<imgUrlList.length;i++){
2    let image = new Image()
3    image.src = imgUrlList[i]
4    image.onload = () =>{
5       do soming....
6    }
7 }

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

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

 1 if (this.abortController) {
 2       // 如果存在abortController,就取消掉上次的请求,注意不同接口如果使用同一个 
 3       abortController,则会被abort() 一起取消掉
 4       this.abortController.abort()
 5       this.abortController = ""
 6 } else {
 7       this.abortController = new AbortController()
 8 }
 9 this.abortController = new AbortController()
10 
11 for(let i=0;i<imgUrlList.length;i++){
12        fetch(imgUrlList[i],{this.abortController.signal}).then(response=>{
13           return response.blob()
14         }).then(response=>{
15           const objectURL = URL.createObjectURL(response);
16            image.src = objectURL
17            image.onload=()=>{
18               do soming...
19            }
20 }