> For the complete documentation index, see [llms.txt](https://anjia1.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://anjia1.gitbook.io/web/browser/fetch/overview.md).

# 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 对象](/web/browser/fetch/request.md)
2. [Response 对象](/web/browser/fetch/response.md)
3. [`fetch()`](/web/browser/fetch/fetch-method.md)

和 `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。比如：

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

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