TLDR:
当我们需要的时候&＃xff0c;我们可以通过AbortController接口来终止一个或者多个请求。
前言
到目前为止&＃xff0c;我们有两个常用的基本的手段去发送请求进而局部刷新页面内容&＃xff0c;其一是XMR(XMLHttpRequest)&＃xff0c;其二是fetch&＃xff0c;我们一个个说
XHR
对于XHR&＃xff0c;我们或许已经很熟悉了&＃xff0c;当我们想要发送一个请求的时候&＃xff0c;我们可以这样做&＃xff1a;
const xhr &＃61; new XMLHttpRequest();
const method &＃61; &＃39;GET&＃39;;
const url &＃61; &＃39;https://xxx&＃39;;xhr.open(method, url, true);
xhr.onreadystatechange &＃61; () &＃61;> {if (xhr.readyState &＃61;&＃61;&＃61; 4) {// do something}
}
xhr.send();
当我们由于某种原因(比如重复请求)想要终止它的时候&＃xff0c;我们只需要调用abort即可。
xhr.abort();
很方便也很简洁&＃xff0c;但是对于fetch呢&＃xff1f;
fetch
首先我们看下fetch的基本定义:
- 接受一个必须的参数和一个可选的参数
- 定义要获取的资源&＃xff0c;地址或者Request对象
- 可选的配置对象&＃xff0c;比如请求方式、body、credentials等等&＃xff0c;其中我们需要知道的是
signal&＃xff0c;他的定义如下: 一个AbortSignal对象实例&＃xff0c;允许你通过AbortController与fetch请求通信或者终止fetch - 返回值是一个promise
看到这里我们已经知道了答案&＃xff0c;但是我们需要再去了解一下上文所说的AbortController.
AbortController
最初es6引入fetch的时候&＃xff0c;其实就是没有abort这样的功能&＃xff0c;不过广大程序朋友们还会希望能有这个灵活的api&＃xff0c;所以在2015年就有人提了这个issue&＃xff0c;再次之后大家尝试了注入promise式的取消或者是其他hack等等&＃xff0c;经过这份折腾最终我们迎来了AbortController和AbortSignal。
AbortController目前很简单&＃xff0c;有一个制度的属性AbortController.signal和一个用来中断请求的.abort()
光说也没啥意思&＃xff0c;咱看代码说话&＃xff1a;
// 启动一个node服务&＃xff0c;其中包括一个api和一个html页面const Koa &＃61; require(&＃39;koa&＃39;);
const fs &＃61; require(&＃39;fs&＃39;);
const app &＃61; new Koa();const sleep &＃61; () &＃61;> {return new Promise(res &＃61;> {setTimeout(function() {res();}, 3000);});
};app.use(async ctx &＃61;> {if (ctx.request.url &＃61;&＃61;&＃61; &＃39;/api&＃39;) {await sleep();ctx.body &＃61; &＃39;Hello World&＃39;;} else {ctx.status &＃61; 200;ctx.respond &＃61; false;fs.createReadStream(&＃39;./test.html&＃39;).pipe(ctx.res);}
});app.listen(3000);
下面是test.html的内容
启动服务后&＃xff0c;我们看下network的内容。
我们注意两个地方&＃xff0c;一个代表fetch请求&＃xff0c;一个代表请求的延时时间&＃xff0c;也就是我们定义的三秒
取消fetch
这时候我们想中断&＃xff0c;就可以这样做&＃xff1a;
再次运行&＃xff0c;我们会得到如下结果&＃xff1a;
从图中我们可以很清楚的看到&＃xff0c;请求在2s后被终止&＃xff0c;请求状态变为canceled&＃xff0c;然后aborted的状态由false转变为true。
就是这样&＃xff0c;我们对fetch也进行的取消操作&＃xff0c;还算是豁然开朗吧。嘻嘻。
兼容性
虽然AbortController已经诞生很长时间了&＃xff0c;但是目前mdn上的定义还是实验性技术&＃xff0c;查看mdn我们可以发现&＃xff0c;其实主流浏览器大部分都支持了&＃xff0c;如果我们开发的平台很新还是可以使用的&＃xff0c;相信不远的将来&＃xff0c;肯定会大批量使用。前端的道路也会越来越顺畅&＃xff01;
最后如果这边文章能帮给你带来一点帮助&＃xff0c;欢迎关注&＃xff0c;点赞&＃xff0c;制作不易&＃xff0c;与君共勉&＃xff01;
京公网安备 11010802041100号