PWA(Progressive Web App)入门系列：Fetch & Request & Headers & Response & Body

前言

在 WEB 中，对于网络请求一直使用的是 XMLHttpRequest API 来处理，XMLHttpRequest 也很强大，传统的 Ajax 也是基于此 API 的。那么为何 W3C 标准中又加入了相似功能的 Fetch API 呢？他有何优点。

---

Fetch

什么是 Fetch

Fetch 提供了 Request 和 Response 对象的通用定义（以及与网络请求有关的其余内容）。这将容许 Fetch 在未来须要的任何地方使用，不管在 serviceWorker、Cache API以及处理或修改 Request 和 Response 的其余相似事物上，或者任何可能须要你以编程方式生成的 Response 的地方。

它还提供了相关概念的定义，例如 CORS 和 HTTP 原始头语义，在其余地方取代它们的单独定义。

要发出请求并获取资源，请使用 WindowOrWorkerGlobalScope.fetch() 方法。这使得它几乎能够在你想要获取资源的任何上下文中使用。

Fetch API 是 W3C 正式规范中加入的新的用于网络请求相关的功能 API，核心就是对于 HTTP 接口的抽象，包含 Request / Response / Headers / Body，经过这些抽象出来的模块，对于 HTTP 相关的操做变得更简单方便。Fetch API 是异步化的接口，全部的结果都是 Promise 化的，一样在 window 环境和 seviceWorker 环境下都可访问。在 ServiceWorker 中，Fetch 被大量使用。

对于使用过 XMLHttpRequest 的人来讲，很容易上手。但 Fetch API 功能更强大和灵活。

模块与 fetch 的关系

接口

描述 Fetch 的接口，不是很单纯，它是以抽象出来的 HTTP 的那些模块来组合的。下面简单列一下，后面每一个模块详细说明。

fetch

位于 WindowOrWorkerGlobalScope 这一个 mixin 中的 fetch() 方法用于发起获取资源的请求。它返回一个 promise，这个 promise 会在请求响应后被 resolve，并传回 Response 对象。

Window 和 WorkerGlobalScope 下都可访问 fetch() 方法。

fetch() 方法由 Content Security Policy 的 connect-src指令控制，而不是它请求的资源。

HTTP 404 状态并不被认为是网络错误。

语法

Promise<Response> fetch(input[, init]);
复制代码

fetch() 的构造器和 Request 的构造器彻底同样。

参数 resource：支持如下两种类型：

• USVString：要获取资源的 URL 字符串。（有些浏览器也支持 blob:和data:类型的 URL）
• Request 对象。 （Request 这块在后面 Request 部分说）

init：可选。可设置任何须要应用到 Request 中的配置项。一般设置以下：

• method：请求的方法。如 POST、GET等。注意在 Fetch 请求方法为 GET 或 HEAD 下不能设置 Origin 头。（Firefox 65 已修正此问题 - 参考：Bug1508661）
• headers：在 Headers 对象或具备 ByteString 值的对象中的任何你想添加的头。注意某此名称是被禁止的。
• body：任何你想添加到 Request 中的 body，它能够是 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或者 HEAD 方法的 Request 没有 body。
• mode：用于请求的模式。例如：cors, no-cors, 或者 same-origin。
• credentials：用于请求的受信类型，包括：omit, same-origin, 或者 include。要自动发送当前域的cookie，必须提供此选项。从Chrome 50开始，此属性还会使用FederatedCredential实例或PasswordCredential实例。
• cache：要用于请求的缓存模式。
• redirect：要使用的重定向模式：follow（自动跟随重定向），error（若是发生重定向则停止错误），manual（手动处理重定向）。Chrome 默认follow（Chrome 47 之前默认 manual）。
• referrer：指定no-referrer，client或URL的USVString。默认为client。
• referrerPolicy：指定 referer HTTP 标头的值。 能够是 no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url。
• integrity：包含请求的子资源完整性值（例如：sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=）。
• keepalive：keepalive选项可用于容许请求比页面长。带keepalive标志的 fetch 替代了navigator.sendboacon() API。
• signal：AbortSignal实例。容许你与获取请求进行通讯，并在须要时经过AbortController停止它。

返回值

Promise，resolve 时回传 Response 对象。

例外

类型	描述
AbortError	请求中断 （经过使用 AbortController.abort()）
TypeError	从Firefox 43开始，若是 URL 包含 credentials ，则 fetch() 将抛出 TypeError，例如 http:// user:password@example.com。

---

Request

Fetch API 的 Request 接口表示资源请求。

你可使用 Request.Request() 构造函数建立新的 Request 对象，你也能够经过一个 API 操做返回 Request 对象，例如 serviceWorker 中的 FetchEvent.request。

构造器

Request.Request()

建立新的 Request 对象。

语法

var myRequest = new Request(input[, init]);
复制代码

参数

input： 可用以下之一：

• 要获取资源的 URL 字符串。
• Request 对象，用于建立副本。请注意如下行为更新以保持安全性，同时使构造函数不太可能抛出异常：
  • 若是此对象存在于构造函数调用的另外一个源上，则会剥离 Request.referrer。
  • 若是此对象具备navigate的 Request.mode，则mode值将转换为same-origin。

init： 可选。同 fetch init。

属性

• cache：包含请求的缓存模式，例如：default, reload, no-cache。
• credentials：包含请求的凭据，例如：omit, same-origin, include。默认same-origin。
• destination：返回RequestDestination枚举中的字符串，描述请求的目标。这是一个字符串，表示所请求内容的类型。
• headers：包含请求的关联 Headers 对象。
• integrity：包含请求的子资源完整性值。例如：sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=。
• method：包含请求的方法，GET/POST等。
• mode：包含请求的模式。例如：cors, no-cors, same-origin, navigate。
• redirect：包含重定向处理方式。它多是其中之一：follow, error, manual。
• referrer：包含请求的引用者。例如：client。
• referrerPolicy：包含请求的引用者策略。例如：no-referrer。
• url：包含请求中的 URL。
• bodyUsed ：存储一个布尔值，声明是否已在响应中使用过。

Request 实现 Body，因此 Body 的属性和方法在 Request 中依然有效。关于 Body，后面说。

---

Headers

Fetch API 的 Headers 接口容许你对 HTTP 请求和响应头执行各类操做。这些操做包括检索，设置，添加和删除。Headers 对象具备关联的标题列表，该列表最初为空，由零个或多个名称和值对组成。在此接口的全部方法中，标头名称由不区分大小写的字节序列匹配。

出于安全缘由，某些标头只能由浏览器控制。这些标头包括禁止的标头名称和禁止的响应标头名称。

一个Headers对象也有一个相关的“门”，取值为immutable, request, request-no-cors, response, none。它会影响 set(), delete(), append() 是否会改变 header。

你也能够经过 Request.headers 和 Response.headers 属性取 Headers 对象。

构造器

Headers

建立一个 Header 对象。

语法：

var myHeaders = new Headers(init);
复制代码

参数：

• init：包含要使用其预填充 Headers 对象的任何HTTP标头的对象。这能够是具备 ByteString 值的简单对象值或现有的 Headers 对象（新的 Headers 对象从现有的Headers对象继承其数据）。

方法

• append(name, value)：将新值附加到 Headers 对象内的现有标头上，或者若是标头、不存在则添加标头。此方法用于一个属性对应多个值的添加方法。
• delete(name)：方法从当前 Headers 对象中删除指定标头。
• entries()：方法返回一个迭代器，容许遍历此对象中包含的全部键/值对。每对的键和值都是 ByteString 对象。
• forEach()：为每一个数组元素执行一次提供的函数。
• get(name)：方法返回具备给定名称的 Headers 对象中标头的全部值的字节字符串。若是 Headers 对象中不存在请求的标头，则返回 null。
• has(name)：方法返回一个布尔值，代表Headers对象是否包含某个头。
• keys()：方法返回一个迭代器，容许遍历此对象中包含的全部键。键是 ByteString 对象。
• set(name, value)：方法为 Headers 对象内的现有标头设置新值，或者若是标头尚不存在则添加标头。（set 和 append 之间的区别在于，若是指定的头已经存在并接受多个值，则 set 将使用新值覆盖现有值，而 append将新值附加到值集的末尾）
• values()：返回一个迭代器，容许遍历此对象中包含的全部值。值是 ByteString 对象。

若是在 Header 中的方法中使用不在可用 HTTP 标头中的值，则会抛出 TypeError 错误。

可用 HTTP 表头

表头根据上下文有以下几类：

• 常规标题：标题适用于请求和响应，但与最终在正文中传输的数据无关。
• 请求标头：包含有关要提取的资源或客户端自己的更多信息的标头。
• 响应标头：包含有关响应的其余信息的标头，例如其位置或服务器自己（名称和版本等）。
• 实体标头：包含有关实体主体的更多信息的标头，例如其内容长度或MIME类型。

认证类：

• WWW-Authenticate
• Authorization
• Proxy-Authenticate
• Proxy-Authorization

缓存类：

• Age
• Cache-Control
• Clear-Site-Data
• Expires
• Pragma
• Warning

客户端提示类：

• Accept-CH
• Accept-CH-Lifetime
• Early-Data
• Content-DPR
• DPR
• Save-Data
• Viewport-Width
• Width

条件类：

• Last-Modified
• ETag
• If-Match
• If-None-Match
• If-Modified-Since
• If-Unmodified-Since
• Vary

链接管理类：

• Connection
• Keep-Alive

内容判断类：

• Accept
• Accept-Charset
• Accept-Encoding
• Accept-Language

控制类：

• Expect
• Max-Forwards

Cookie 类：

• Cookie
• Set-Cookie

CORS 类：

• Access-Control-Allow-Origin
• Access-Control-Allow-Credentials
• Access-Control-Allow-Headers
• Access-Control-Allow-Methods
• Access-Control-Expose-Headers
• Access-Control-Max-Age
• Access-Control-Request-Headers
• Access-Control-Request-Method
• Origin
• Timing-Allow-Origin
• X-Permitted-Cross-Domain-Policies

不追踪类：

• DNT
• TK

下载类：

• Content-Disposition

消息正文类：

• Content-Length
• Content-Type
• Content-Encoding
• Content-Language
• Content-Location

代理类：

• Forwarded
• X-Forwarded-For
• X-Forwarded-Host
• X-Forwarded-Proto
• Via

重定向类：

• Location

请求上下文类：

• From
• Host
• Referer
• Referrer-Policy
• User-Agent

响应上下文类：

• Allow
• Server

范围请求类：

• Accept-Ranges
• Range
• If-Range
• Content-Range

安全类：

• Cross-Origin-Resource-Policy
• Content-Security-Policy
• Content-Security-Policy-Report-Only
• Expect-CT
• Feature-Policy
• Public-Key-Pins
• Public-Key-Pins-Report-Only
• Strict-Transport-Security
• Upgrade-Insecure-Requests
• X-Content-Type-Options
• X-Download-Options
• X-Frame-Options
• X-Powered-By
• X-XSS-Protection

服务器发送事件类：

• Last-Event-ID
• NEL
• Ping-From
• Ping-To
• Report-To

转移编码类：

• Transfer-Encoding
• TE
• Trailer

WebSockets 类：

• Sec-WebSocket-Key
• Sec-WebSocket-Extensions
• Sec-WebSocket-Accept
• Sec-WebSocket-Protocol
• Sec-WebSocket-Version

其余：

• Accept-Push-Policy
• Accept-Signature
• Alt-Svc
• Date
• Large-Allocation
• Link
• Push-Policy
• Retry-After
• Signature
• Signed-Headers
• Server-Timing
• SourceMap
• Upgrade
• X-DNS-Prefetch-Control
• X-Firefox-Spdy
• X-Pingback
• X-Requested-With
• X-Robots-Tag
• X-UA-Compatible

---

Response

Response 接口表示请求的响应。

构造器

Response()

语法：

var myResponse = new Response(body, init);
复制代码

参数：

body:（可选）

定义响应主体的对象。这能够是null，或者是：

• Blob
• BufferSource
• FormData
• ReadableStream
• URLSearchParams
• USVString

init:（可选）

包含要应用于响应的任何自定义设置的选项对象。可选：

• status：响应的状态代码，例如：200。
• statusText：与状态代码关联的状态消息，例如，OK。
• headers：要添加到响应的任何标头，包含在 Headers 对象或 ByteString 键/值对的对象文本。（可参考 HTTP Headers）

属性

• headers：接口的头只读属性包含与响应关联的 Headers 对象。
• ok：接口的 ok 只读属性包含一个布尔值，代表响应是否成功（状态在200-299范围内）
• redirected ：属性指示响应是不是您重定向的请求的结果。依靠 redirected 来过滤掉重定向，能够轻松进行伪造重定向，以防止你的内容按预期工做。相反，你应该在调用 fetch() 时执行过滤。
• status：响应的状态代码。
• statusText：相应状态文字。
• type：响应类型：
  • basic：正常状况下同域响应，除Set-Cookie和Set-Cookie2外，全部标题都被暴露。
  • cors：从有效的跨源请求收到响应。
  • error：网络错误。 没有描述错误的有用信息。响应的状态为 0，标头为空且不可变。 这是从Response.error()获取的响应的类型。
  • opaque：响应“no-cors”请求到跨源资源。
  • opaqueredirect：获取请求是使用重定向manual进行的。 响应的状态为 0，标题为空，正文为空。
• url：包含响应的 URL。 url 属性的值将是重定向后得到的最终 URL。
• bodyUsed ：布尔值，声明是否已在响应中使用了正文。

方法

• clone()：方法建立响应对象的克隆，在各方面都相同，但存储在不一样的变量中。
• error()：方法返回与网络错误关联的新Response对象。
• redirect(url, status)：方法返回一个 Response，致使重定向到指定的 URL。

Request 实现 Body，因此 Body 的属性和方法在 Request 中依然有效。关于 Body，后面说。

---

Body

Body 表示响应 / 请求的主体，容许你声明其内容类型以及应如何处理它。

Body 由 Request 和 Response 实现。这为这些对象提供了关联的主体（流），使用过的标志（最初未设置）和MIME类型（最初是空字节序列）。

属性

• body：是一个简单的getter，用于公开body内容的ReadableStream。
• bodyUsed：布尔值，指示是否已读取 body。

方法

• arrayBuffer()：方法接受一个 Response 流并将其读取完成。它返回一个使用 ArrayBuffer 解析的 promise。
• blob()：方法接受一个 Response 流并将其读取完成。它返回一个用 Blob 解析的 promise。（注意 若是 Response 的 Response.type 为opaque，则生成的 Blob 将具备 0 的 Blob.size 和空字符串“”的 Blob.type，这使得它对 URL.createObjectURL 等方法无效。）
• formData()：方法接受一个 Response 流并将其读取完成。它返回一个使用 FormData 对象解析的 promise。（这主要与 serviceWorker 有关。 若是用户提交表单而且 serviceWorker 截获请求，你能够在其上调用 formData() 以获取键值映射，修改某些字段，而后将表单向前发送到服务器）
• json()：方法接受一个 Response 流并将其读取完成。它返回一个 promise，它以将正文解析为 JSON 的结果解析。
• text()： 方法接受一个 Response 流并将其读取完成。 它返回一个使用 USVString 对象（文本）解析的 promise。 始终使用 UTF-8 解码响应。

---

博客名称：王乐平博客

CSDN博客地址：blog.csdn.net/lecepin

本做品采用 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。