内容简介:当我们需要的时候,我们可以通过AbortController接口来终止一个或者多个请求。到目前为止,我们有两个常用的基本的手段去发送请求进而局部刷新页面内容,其一是XMR(XMLHttpRequest),其二是fetch,我们一个个说对于XHR,我们或许已经很熟悉了,当我们想要发送一个请求的时候,我们可以这样做:
TLDR:
当我们需要的时候,我们可以通过AbortController接口来终止一个或者多个请求。
前言
到目前为止,我们有两个常用的基本的手段去发送请求进而局部刷新页面内容,其一是XMR(XMLHttpRequest),其二是fetch,我们一个个说
XHR
对于XHR,我们或许已经很熟悉了,当我们想要发送一个请求的时候,我们可以这样做:
const xhr = new XMLHttpRequest(); const method = 'GET'; const url = 'https://xxx'; xhr.open(method, url, true); xhr.onreadystatechange = () => { if (xhr.readyState === 4) { // do something } } xhr.send();
当我们由于某种原因(比如重复请求)想要终止它的时候,我们只需要调用abort即可。
xhr.abort();
很方便也很简洁,但是对于fetch呢?
fetch
首先我们看下fetch的基本定义:
- 接受一个必须的参数和一个可选的参数
- 定义要获取的资源,地址或者 Request对象
- 可选的配置对象,比如请求方式、body、credentials等等,其中我们需要知道的是
signal
,他的定义如下:
一个AbortSignal对象实例,允许你通过AbortController与fetch请求通信或者终止fetch
- 返回值是一个promise
看到这里我们已经知道了答案,但是我们需要再去了解一下上文所说的 AbortController
.
AbortController
最初es6引入fetch的时候,其实就是没有abort这样的功能,不过广大程序朋友们还会希望能有这个灵活的api,所以在2015年就有人提了这个 issue ,再次之后大家尝试了注入promise式的取消或者是其他hack等等,经过这份折腾最终我们迎来了AbortController和AbortSignal。
AbortController目前很简单,有一个制度的属性 AbortController.signal
和一个用来中断请求的 .abort()
光说也没啥意思,咱看代码说话:
// 启动一个node服务,其中包括一个api和一个html页面 const Koa = require('koa'); const fs = require('fs'); const app = new Koa(); const sleep = () => { return new Promise(res => { setTimeout(function() { res(); }, 3000); }); }; app.use(async ctx => { if (ctx.request.url === '/api') { await sleep(); ctx.body = 'Hello World'; } else { ctx.status = 200; ctx.respond = false; fs.createReadStream('./test.html').pipe(ctx.res); } }); app.listen(3000);
下面是test.html的内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> fetch('/api') .then((res) => { console.log(res, '请求成功'); }); </script> </body> </html>
启动服务后,我们看下network的内容。
我们注意两个地方,一个代表fetch请求,一个代表请求的延时时间,也就是我们定义的三秒
取消fetch
这时候我们想中断,就可以这样做:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // 增加了如下几行 const controller = new AbortController(); const signal = controller.signal; console.log(signal, 'signal的初始状态'); signal.addEventListener('abort', function (e) { console.log(signal, 'signal的中断状态'); }); setTimeout(function() { controller.abort(); }, 2000); // 增加部分结束 fetch('/api', {signal}) .then((res) => { console.log(res, '请求成功'); }); </script> </body> </html>
再次运行,我们会得到如下结果:
从图中我们可以很清楚的看到,请求在2s后被终止,请求状态变为canceled,然后aborted的状态由false转变为true。
就是这样,我们对fetch也进行的取消操作,还算是豁然开朗吧。嘻嘻。
兼容性
虽然AbortController已经诞生很长时间了,但是目前mdn上的定义还是 实验性技术
,查看mdn我们可以发现,其实主流浏览器大部分都支持了,如果我们开发的平台很新还是可以使用的,相信不远的将来,肯定会大批量使用。前端的道路也会越来越顺畅!
最后如果这边文章能帮给你带来一点帮助,欢迎关注,点赞,制作不易,与君共勉!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- [ PHP 内核与扩展开发系列] PHP 启动与终止那点事:一次请求的生命周期
- 高性能服务之优雅终止
- Golang 如何优雅的终止一个服务
- 爬虫开发者职业生涯的终止
- Parsix GNU/Linux 项目宣布即将终止
- Python 为什么不用分号作终止符?
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Ajax基础教程
(美)阿斯利森、(美)舒塔、金灵 / 金灵 / 人民邮电出版社 / 2006-02-01 / 35.00元
Ajax技术可以提供高度交互的Web应用,给予用户更丰富的页面浏览体验。本书重点介绍Ajax及相关的工具和技术,主要内容包括XMLHttpRequest对象及其属性和方法、发送请求和处理响应、构建完备的Ajax开发工具、使用JsUnit测试JavaScript、分析JavaScript调试工具和技术,以及Ajax开发模式和框架等。本书中所有例子的代码都可以从Apress网站本书主页的源代码(Sou......一起来看看 《Ajax基础教程》 这本书的介绍吧!