3.2.1 概况

Fetch API 可以让我们处理 HTTP 请求和响应，与 XMLHttpRequest 相比，它更强大更灵活。

Fetch 提供了 Request 对象和 Response 对象的通用定义，也提供了其它和网络请求相关的东西，比如 CORS 和 HTTP Origin header 的语义。这非常利于它能灵活地应用在 Service Worker、Cache API 和其它需要处理 request 和 response 的类似场景，以及任何需要用编程的方式生成 response 的情况。

Fetch 还提供了一个全局方法 fetch()，它以一种简单的合乎逻辑的方式通过网络异步获取资源。该方法返回一个可以解析为 Response 的 Promise。

1. Request 对象

2. Response 对象

3. fetch()

和 jQuery.ajax() 相比，Fetch 规范有以下主要不同：

1. fetch() 返回的 Promise 不会拒绝 HTTP error 状态，即便是 HTTP 404 或 500

   • 只有当出现网络故障或任何 request 未完成的情况时，Promise 才会被 reject

   • 只要服务器用 headers 响应，Promise 就会正常解析，并不会 reject

   • 当响应是 HTTP error 状态时，Promise 对应的 Response.ok 属性会被设置为 false

2. fetch() 不会发送跨域 cookie，除非手动将 Request 的 credentials 选项设置为 include

   • 既不会在跨域的 requests 中发送 cookie，也不会在跨域的 responses 中发回 cookie

   • 从 2018 年 8 月起，credentials 选项的默认值是 same-origin

Response 对象不直接包含实际的 response body，而是整个 HTTP response 表示。所以，需要使用 Response 对象提供的方法来提取 body，它们也都返回一个 Promise。比如：

fetch('http://xxx.json')
.then((response) => response.json())
.then((data) => console.log(data))

Fetch 请求由 HTTP Content-Security-Policy header 里的 connect-src 指令控制，而不是由它正在检索的资源的指令控制。