因为受 cancelable promise 的拖延,fetch 一直没有传统的 XHR 所拥有的 abort() 和 onprogress 功能,去年年底 cancelable promise 草案被彻底废弃了,所以今年年初的这几个月里,一份完全新的、fetch 专用的、不依赖 JS 规范、与 Promise 没有任何直接关系的草案诞生了,而且 Firefox 已经率先实现了其中的大部分功能。

这份草案中引入了 3 种新的对象类型,FetchController(fetch 控制器)、FetchSignal(fetch 信号)、FetchObserver(fetch 观察者),虽然这三个都是全局构造函数,但其实只有 FetchController 对象是真的需要你手动 new 出来的,其它两种对象都是浏览器为你生成的,我们下面分别演示下如何中断(取消、中止)一个 fetch 请求,以及如何监听 fetch 请求的执行进度。

中断 fetch 请求

const controller = new FetchController()
const signal = controller.signal fetch("https://tc39.github.io/ecma262/", { signal }).then(() => {
alert("请求成功")
}).catch(err => {
if (err.name === "AbortError") {
alert("请求被中断")
}
}) setTimeout(() => controller.abort(), 500)

这段代码中,我们先创建了一个 fetch 控制器 controller,每个控制器都自带一个 fetch 信号对象(signal 属性),然后在你用 fetch() 发送请求的时候把这个信号对象带上(signal 参数)。之后,你就可以通过控制器的 abort() 方法,来中断那个 fetch 请求了。只要在你执行 abort() 方法的时候,那个 fetch 请求还没有执行完毕(请求还没发出去、请求发出去了还没接收到响应、响应还没接收完),那么当初 fetch() 返回的那个 promise 就会被 reject,所产生的 error 对象的 name 为 AbortError。

上面这个例子中,我是在 500 毫秒的时候中断了这个请求,这是个绝对的数字,所以根据你的网速不同,执行代码时你有可能会看到弹出“请求成功”,也有能看到“请求被中断”。

一个信号对象还可以同时传递给多个 fetch 请求:

const controller = new FetchController()
const signal = controller.signal fetch("https://tc39.github.io/ecma262/", { signal })
fetch("https://fetch.spec.whatwg.org/", { signal })
fetch("https://dom.spec.whatwg.org/", { signal }) controller.abort() // 同时中断三个请求

信号对象有一个 aborted 属性表明自己是否已经被中断过了,一旦被中断,它不可能回到当初的状态,也就是说,你不能二次利用一个已经被中断过的信号对象,把这样的信号对象传给 fetch() 的话,fetch() 会立即结束,不会发出请求:

const controller = new FetchController()
const signal = controller.signal controller.abort() alert(signal.aborted) // true fetch("https://tc39.github.io/ecma262/", { signal }) // 直接被 reject,请求不会发出

信号对象上还可以监听 abort 事件,不过我想一般用不上,因为请求中断后的处理代码一般写在 fetch(...).catch(...) 里面:

const controller = new FetchController()
const signal = controller.signal signal.addEventListener("abort", function(e) { // 使用 signal.onabort = 注册监听函数也可以
alert(e.type) // abort
alert(signal.aborted) // true
}) alert(signal.aborted) // false controller.abort()

一个控制器除了可以让自己的信号对象 abort,还可以关注(跟随、监听)一个别的控制器的信号对象,只要关注的这个信号对象被 abort 了,自己的 abort() 方法就会被自动执行,从而自己的信号对象也会被 abort:

const fc1 = new FetchController()
const fc2 = new FetchController() fc1.follow(fc2.signal) fc2.abort() alert(fc1.signal.aborted) // true,即便你没有手动执行 fc1.abort()

再来看个更复杂的例子:

const fc1 = new FetchController()
const fc2 = new FetchController()
const fc3 = new FetchController() fc1.follow(fc2.signal)
fc2.follow(fc3.signal) fetch("https://tc39.github.io/ecma262/", { signal: fc1.signal })
fetch("https://fetch.spec.whatwg.org/", { signal: fc2.signal })
fetch("https://dom.spec.whatwg.org/", { signal: fc3.signal }) fc3.abort() // 三个请求都中断了

一个控制器只能关注一个别人家的信号对象,而一个信号对象可以被任意多个别家的控制器关注。不能直接或间接的关注自己的信号对象,比如上面的代码中再增加一行 fc3.follow(fc1.signal) 就会产生环形关注,所以那句代码会没有任何效果。还有一个 unfollow() 方法可以取消关注。

总结下就是,一个控制器对象有一个 signal 属性指向一个信号对象,还有 abort()、follow()、unfollow() 这三个方法。一个信号对象有一个 aborted 属性,还有一个 onabort 事件监听函数。

监听 fetch 请求

上面说到了 FetchController 和 FetchSignal,接下来要说说 fetch 观察者 - FetchObserver 对象。fetch 观察者对象上可以监听 statechange、requestprogress、responseprogress 三种事件,分别用来获取 fetch 请求的状态信息变化、请求数据发送的大小变化(POST 请求)、响应数据接收的大小变化信息,先来看看如何监听状态信息的变化:

fetch("https://tc39.github.io/ecma262/", {
observe(observer) {
observer.onstatechange = () => { // 也可以用 addEventListener("statechange"...
alert(observer.state) // "requesting"、"responding"、"aborted", "errored"、"complete" 中的某个值
}
}
})

FetchObserver 对象不用你手动 new,浏览器会为你 new 一个,在 fetch 请求开始之前,通过你事先指定的 observe 回调函数的参数传递给你。然后你在这个观察者对象上注册 statechange 监听函数,就可以在请求的不同阶段执行特定的代码了。

监听响应的接收进度使用 responseprogress 事件:

fetch("https://img.alicdn.com/tfscom/TB1y6icQXXXXXaQXFXXXXXXXXXX.mp4", {
observe(observer) {
observer.onresponseprogress = e => {
if(e.lengthComputable) {
console.log("视频下载进度:" + parseInt(e.loaded / e.total * 100) + "%")
}
}
}
})

监听 POST 数据的发送进度使用 requestprogress 事件:

fetch("/upload", {
method: "POST",
credentials: "include",
body: canvas.toBlob(),
observe(observer) {
observer.onrequestprogress = e => {
console.log("图片上传进度:" + parseInt(e.loaded / e.total * 100) + "%")
}
}
})

在本文发布的现在,规范草案还只是最初的阶段,可能有很多细节没考虑,目前 Firefox 也没有实现我上面所说的所有功能,实现了的也有一些 bug,而且还需要事先在 about:config 手动添加某两个选项才可以使用,所以本文仅仅是简要介绍,大家暂时眼睛看看就够了。

以后 fetch 控制器的功能可能还会增加,不仅仅能让一个 fetch 请求中断,比如还可以指定这个请求的优先级,fetch 观察者同时也可以用来监听 fetch 请求优先级的变化。

fetch 的控制器和观察者的更多相关文章

  1. ASP.NET MVC 5 04 - 控制器

    PS: 唉.本来这一篇前几天早就应该发了的,可是谁每月没有那么几天啊... 呵呵.开个玩笑.反正就是各种烦气,所以也就一直没上来继续发了. 年底了,摆正一下心态吧.好好干,整点钱,过年回家能跟亲朋好友 ...

  2. ThinkPHP2.2框架执行流程图,ThinkPHP控制器的执行流程

    ThinkPHP2.2框架执行原理.流程图在线手册 ThinkPHP控制器的执行流程 对用户的第一次URL访问 http://<serverIp>/My/index.php/Index/s ...

  3. iOS开发——高级篇——iOS中常见的设计模式(MVC/单例/委托/观察者)

    关于设计模式这个问题,在网上也找过一些资料,下面是我自己总结的,分享给大家 如果你刚接触设计模式,我们有好消息告诉你!首先,多亏了Cocoa的构建方式,你已经使用了许多的设计模式以及被鼓励的最佳实践. ...

  4. ios - kvo观察者示例

    首先创建Person分类 #import <Foundation/Foundation.h> @interface Person : NSObject @property (nonatom ...

  5. Thinkphp源码分析系列(七)–控制器基类

    在mvc模式中,c代表的就是控制器,是是应用程序中处理用户交互的部分.通常控制器负责从视图读取数据,控制用户输入,并向模型发送数据.控制器是沟通视图和模型的桥梁,他接受用户请求,并调用模型层去处理用户 ...

  6. iOS开发app启动原理及视图和控制器的函数调用顺序

    main()函数是整个程序的入口,在程序启动之前,系统会调用exec()函数.在Unix中exec和system的不同在于,system是用shell来调用程序,相当于fork+exec+waitpi ...

  7. 基于TP框架的ThinkCMF,控制器display方法源码分析

    昨天在写代码的时候,看见写了无数次的模版渲染方法:$this->display(),突然很想弄清楚它是如何实现的. 今天不忙,就分析了一下. class TestController exten ...

  8. ThinkPHP中的跨控制器调用与框架执行流程

    一.跨控制器调用 UserController.class.php <?php namespace Home/Controller use Think/Controller class User ...

  9. iOS常用设计模式:MVC、单例、代理、观察者。

    MVC 模型-视图-控制器(MVC)设计模式 MVC根据角色划分类,涉及到三个角色: Model:模型保存应用程序的数据. View:视图是模型的可视化表示以及用户交互的控件. Controller: ...

随机推荐

  1. Django REST framework框架介绍和基本使用

    Django REST framework介绍 Django REST framework是基于Django实现的一个RESTful风格API框架,能够帮助我们快速开发RESTful风格的API. 官 ...

  2. linux环境下快速安装Mariadb和Redis

    一 Mariadb(Mysql)篇 1.新建一个yum源仓库 touch /etc/yum.repos.d/Mariadb.repo 2.在这个yum源仓库文件中,添加仓库url地址 [mariadb ...

  3. Django-CRM项目学习(六)-rbac模块(权限组件)

    1.rbac权限组件 1.1 模板分析(五表结构) 1.2 模板构建 人物和角色进行多对多绑定,角色与权限进行多对多绑定.其中人物和角色的多对多绑定的操作可以避免相同的人物多重权限的操作. 1.3 数 ...

  4. winserver的consul部署实践与.net core客户端使用(附demo源码)

    winserver的consul部署实践与.net core客户端使用(附demo源码)   前言 随着微服务兴起,服务的管理显得极其重要.都知道微服务就是”拆“,把臃肿的单块应用,拆分成多个轻量级的 ...

  5. 【Consul】CONSUL调研

    [Consul]CONSUL调研 2016年08月18日 18:31:53 YoungerChina 阅读数:1962更多 所属专栏: Consul修炼   版权声明:原创不易,转载请注明出处! ht ...

  6. 货车运输-洛谷-1967-LCA+最大生成树(kruskal(并查集))

    传送门 一道:LCA+最大生成树 个人认为把这两个的板子写好(并熟练掌握了之后)就没什么难的 (但我还是de了好久bug)qwq 最大生成树:其实就是最小生成树的变形 我用的是kruskal (个人觉 ...

  7. WPF动态模板选择的两种实现

    前言 .net开发工作了六年,看了大量的博客,现在想开始自己写博客,这是我的第一篇博客,试试水,就从自己最常使用的WPF开始. 今天我来给大家分享可用户动态选择控件模板的两种实现方式:DataTrig ...

  8. 读书笔记---<<图解HTTP>>(一)

    一.了解Web及网络基础 1. 网络基础TCP/IP 通常使用的网络包括互联网都是在TCP/IP协议族的基础上运作的,而HTTP属于它内部的一个子集. 1.1 TCP/IP协议族 像这样吧与互联网关联 ...

  9. js修改父子json格式成树状结构格式

    js修改父子json成树状结构 var json = [ { "id" : "01", "pId":"" } , { & ...

  10. Bootstrap开发框架视频整理

    最近到客户处进行实地培训,整理了很多培训的材料,现将它们录制相关主题的视频,作为我的Bootstrap开发框架的知识补充,希望给感兴趣的朋友进行了解.培训内容主要包括基础框架部分.MVC框架部分.Bo ...