Fetch

• url —— 要访问的 URL。

• options —— 可选参数：method，header 等。
没有 options，这就是一个简单的 GET 请求，下载 url 的内容。

• response.status —— response 的 HTTP 状态码，

• response.ok —— HTTP 状态码为 200-299，则为 true。

• response.headers —— 类似于 Map 的带有 HTTP header 的对象。

• response.text() —— 读取 response，并以文本形式返回 response，

• response.json() —— 将 response 解析为 JSON 对象形式，

• response.formData() —— 以 FormData 对象（multipart/form-data 编码，参见下一章）的形式返回 response，

• response.blob() —— 以 Blob（具有类型的二进制数据）形式返回 response，

• response.arrayBuffer() —— 以 ArrayBuffer（低级别的二进制数据）形式返回 response。

• method —— HTTP 方法，例如 POST，

• body —— request body，其中之一：
• 字符串（例如 JSON 编码的），
• FormData 对象，以 multipart/form-data 形式发送数据，
• Blob/BufferSource 发送二进制数据，
• URLSearchParams，以 x-www-form-urlencoded 编码形式发送数据，很少使用。

FormData

• formData.append(name, value) —— 添加具有给定 name 和 value 的表单字段，

• formData.append(name, blob, fileName) —— 添加一个字段，就像它是 <input type="file">，第三个参数 fileName 设置文件名（而不是表单字段名），因为它是用户文件系统中文件的名称，

• formData.delete(name) —— 移除带有给定 name 的字段，

• formData.get(name) —— 获取带有给定 name 的字段值，

• formData.has(name) —— 如果存在带有给定 name 的字段，则返回 true，否则返回 false。

• formData.set(name, value)，

• formData.set(name, blob, fileName)。

Fetch 下载进度

• done —— 当读取完成时为 true，否则为 false。

• value —— 字节的类型化数组：Uint8Array。

Fetch 中止（Abort）

• 它具有单个方法 abort()，

• 和单个属性 signal，我们可以在这个属性上设置事件监听器。

• controller.signal 就会触发 abort 事件。

• controller.signal.aborted 属性变为 true。

1. 一部分是通过在 controller.signal 上添加一个监听器，来执行可取消操作。

2. 另一部分是触发取消：在需要的时候调用 controller.abort()。

Fetch 跨源请求

“CORS”：跨源资源共享（Cross-Origin Resource Sharing）

安全请求

1. 安全请求。

2. 所有其他请求。

1. 安全的方法：GET，POST 或 HEAD

2. 安全的 header —— 仅允许自定义下列 header：
• Accept，
• Accept-Language，
• Content-Language，
• Content-Type 的值为 application/x-www-form-urlencoded，multipart/form-data 或 text/plain。

安全请求的CORS

1. 它确保发送的跨源请求带有正确的 Origin。

2. 它检查响应中的许可 Access-Control-Allow-Origin，如果存在，则允许 JavaScript 访问响应，否则将失败并报错。

安全的 response header

• Cache-Control

• Content-Language

• Content-Type

• Expires

• Last-Modified

• Pragma

”非安全“请求

• Access-Control-Request-Method header 带有非安全请求的方法。

• Access-Control-Request-Headers header 提供一个以逗号分隔的非安全 HTTP-header 列表。

• Access-Control-Allow-Origin 必须为  或进行请求的源（例如 https://javascript.info）才能允许此请求。

• Access-Control-Allow-Methods 必须具有允许的方法。

• Access-Control-Allow-Headers 必须具有一个允许的 header 列表。

• 另外，header Access-Control-Max-Age 可以指定缓存此权限的秒数。因此，浏览器不是必须为满足给定权限的后续请求发送预检。

• Step 1 预检请求（preflight request）
在发送我们的请求前，浏览器会自己发送如下所示的预检请求：
• 方法：OPTIONS。
• 路径 —— 与主请求完全相同：/service.json。
• 特殊跨源头：
• Origin —— 来源。
• Access-Control-Request-Method —— 请求方法。
• Access-Control-Request-Headers —— 以逗号分隔的“非安全” header 列表。

• Step 2 预检响应（preflight response）
服务应响应状态 200 和 header：
• Access-Control-Allow-Origin: https://javascript.info
• Access-Control-Allow-Methods: PATCH
• Access-Control-Allow-Headers: Content-Type,API-Key。
这将允许后续通信，否则会触发错误。

• Step 3 实际请求（actual request）
预检成功后，浏览器现在发出主请求。这里的过程与安全请求的过程相同。

• Step 4 实际响应（actual response）
服务器不应该忘记在主响应中添加 Access-Control-Allow-Origin。成功的预检并不能免除此要求

Fetch API

URL 对象

• url —— 完整的 URL，或者仅路径（如果设置了 base），

• base —— 可选的 base URL：如果设置了此参数，且参数 url 只有路径，则会根据这个 base 生成 URL。

URL 组件的备忘单：

SearchParams

• append(name, value) —— 按照 name 添加参数，

• delete(name) —— 按照 name 移除参数，

• get(name) —— 按照 name 获取参数，

• getAll(name) —— 获取相同 name 的所有参数（这是可行的，例如 ?user=John&user=Pete），

• has(name) —— 按照 name 检查参数是否存在，

• set(name, value) —— set/replace 参数，

• sort() —— 按 name 对参数进行排序，很少使用，

• ……并且它是可迭代的，类似于 Map。

编码（encoding）

编码字符串

• encodeURI —— 编码整个 URL。

• decodeURI —— 解码为编码前的状态。

• encodeURIComponent —— 编码 URL 组件，例如搜索参数，或者 hash，或者 pathname。

• decodeURIComponent —— 解码为编码前的状态。

区别：

• encodeURI 仅编码 URL 中完全禁止的字符。

• encodeURIComponent 也编码这类字符，此外，还编码 #，$，&，+，,，/，:，;，=，? 和 @ 字符。

XMLHttpRequest

异步模式

1. 创建 XMLHttpRequest：

2. 初始化它，通常就在 new XMLHttpRequest 之后：
此方法指定请求的主要参数：
• method —— HTTP 方法。通常是 "GET" 或 "POST"。
• URL —— 要请求的 URL，通常是一个字符串，也可以是 URL 对象。
• async —— 如果显式地设置为 false，那么请求将会以同步的方式处理，我们稍后会讲到它。
• user，password —— HTTP 基本身份验证（如果需要的话）的登录名和密码。
请注意，open 调用与其名称相反，不会建立连接。它仅配置请求，而网络活动仅以 send 调用开启。

3. 发送请求。
这个方法会建立连接，并将请求发送到服务器。可选参数 body 包含了 request body。

4. 监听 xhr 事件以获取响应。
这三个事件是最常用的：
• load —— 当请求完成（即使 HTTP 状态为 400 或 500 等），并且响应已完全下载。
• error —— 当无法发出请求，例如网络中断或者无效的 URL。
• progress —— 在下载响应期间定期触发，报告已经下载了多少。

响应：

• ""（默认）—— 响应格式为字符串，

• "text" —— 响应格式为字符串，

• "arraybuffer" —— 响应格式为 ArrayBuffer（对于二进制数据，请参见 ArrayBuffer，二进制数组），

• "blob" —— 响应格式为 Blob（对于二进制数据，请参见 Blob），

• "document" —— 响应格式为 XML document（可以使用 XPath 和其他 XML 方法）或 HTML document（基于接收数据的 MIME 类型）

• "json" —— 响应格式为 JSON（自动解析）。

readyState：

同步请求

HTTP 配置

• setRequestHeader(name, value)
使用给定的 name 和 value 设置 request header。

• getResponseHeader(name)
获取具有给定 name 的 header（Set-Cookie 和 Set-Cookie2 除外）

• getAllResponseHeaders()
返回除 Set-Cookie 和 Set-Cookie2 外的所有 response header。

1. xhr.open('POST', ...) —— 使用 POST 方法。

2. xhr.send(formData) 将表单发送到服务器。

上传进度

• loadstart —— 上传开始。

• progress —— 上传期间定期触发。

• abort —— 上传中止。

• error —— 非 HTTP 错误。

• load —— 上传成功完成。

• timeout —— 上传超时（如果设置了 timeout 属性）。

• loadend —— 上传完成，无论成功还是 error。

可恢复的文件上传

长轮询

常规轮询

1. 消息传递的延迟最多为 10 秒（两个请求之间）。

2. 即使没有消息，服务器也会每隔 10 秒被请求轰炸一次，即使用户切换到其他地方或者处于休眠状态，也是如此。就性能而言，这是一个很大的负担。

长轮询

1. 请求发送到服务器。

2. 服务器在有消息之前不会关闭连接。

3. 当消息出现时 —— 服务器将对其请求作出响应。

4. 浏览器立即发出一个新的请求。

WebSocket

• open —— 连接已建立，

• message —— 接收到数据，

• error —— WebSocket 错误，

• close —— 连接已关闭。

• socket.send(data)，

• socket.close([code], [reason])。

连接状态

• 0 —— “CONNECTING”：连接还未建立，

• 1 —— “OPEN”：通信中，

• 2 —— “CLOSING”：连接关闭中，

• 3 —— “CLOSED”：连接已关闭。

深入

• Origin —— 客户端页面的源，例如 https://javascript.info。WebSocket 对象是原生支持跨源的。没有特殊的 header 或其他限制。旧的服务器无法处理 WebSocket，因此不存在兼容性问题。但 Origin header 很重要，因为它允许服务器决定是否使用 WebSocket 与该网站通信。

• Connection: Upgrade —— 表示客户端想要更改协议。

• Upgrade: websocket —— 请求的协议是 “websocket”。

• Sec-WebSocket-Key —— 浏览器随机生成的安全密钥。

• Sec-WebSocket-Version —— WebSocket 协议版本，当前为 13。

扩展和子协议

• Sec-WebSocket-Extensions: deflate-frame 表示浏览器支持数据压缩。扩展与传输数据有关，扩展了 WebSocket 协议的功能。Sec-WebSocket-Extensions header 由浏览器自动发送，其中包含其支持的所有扩展的列表。

• Sec-WebSocket-Protocol: soap, wamp 表示我们不仅要传输任何数据，还要传输 SOAP 或 WAMP（“The WebSocket Application Messaging Protocol”）协议中的数据。WebSocket 子协议已经在 IANA catalogue 中注册。因此，此 header 描述了我们将要使用的数据格式。

数据传输

• “text frames” —— 包含各方发送给彼此的文本数据。

• “binary data frames” —— 包含各方发送给彼此的二进制数据。

• “ping/pong frames” 被用于检查从服务器发送的连接，浏览器会自动响应它们。

• 还有 “connection close frame” 以及其他服务 frames。

限速

Server Sent Events

使用它的主要原因：简单。在很多应用中，WebSocket 有点大材小用。

使用

• data: 后为消息文本，冒号后面的空格是可选的。

• 消息以双换行符 \n\n 分隔。

• 要发送一个换行 \n，我们可以在要换行的位置立即再发送一个 data:（上面的第三条消息）。

重新连接

• 如果服务器想要浏览器停止重新连接，那么它应该使用 HTTP 状态码 204 进行响应。

• 如果浏览器想要关闭连接，则应该调用 eventSource.close()：

消息 id

• 将属性 eventSource.lastEventId 设置为其值。

• 重新连接后，发送带有 id 的 header Last-Event-ID，以便服务器可以重新发送后面的消息。

连接状态：readyState

事件

• message —— 收到消息，可以用 event.data 访问。

• open —— 连接已打开。

• error —— 无法建立连接，例如，服务器返回 HTTP 500 状态码。

Node端 简单使用

服务器响应格式：

• data: —— 消息体（body），一系列多个 data 被解释为单个消息，各个部分之间由 \n 分隔。

• id: —— 更新 lastEventId，重连时以 Last-Event-ID 发送此 id。

• retry: —— 建议重连的延迟，以 ms 为单位。无法通过 JavaScript 进行设置。

• event: —— 事件名，必须在 data: 之前。

1. 网络请求 (javascript.info)