Fetch API - 提供了一个用于获取资源的接口

Fetch API 提供了一个用于获取资源（包括跨网络）的接口。任何使用过 XMLHttpRequest 的人都会觉得很熟悉，但新的 API 提供了更强大、更灵活的功能集。

概念和用法

Fetch 为 Request 和 Response 对象（以及其他涉及网络请求的东西）提供了一个通用定义。这将允许它们在未来任何需要的地方被使用，无论是服务工作线程、缓存 API 和其他处理或修改请求和响应的类似事物，还是任何一种可能需要你以编程方式生成响应（即使用计算机程序或个人编程指令）的用例。

它还定义了相关概念，例如 CORS 和 HTTP Origin 标头语义，取代了它们在其他地方的单独定义。

要发出请求并获取资源，请使用 WindowOrWorkerGlobalScope.fetch() 方法。它在多个接口中实现，特别是 Window 和 WorkerGlobalScope。这使得它几乎可以在您想要获取资源的任何上下文中使用。

fetch() 方法必须有一个参数，即您要获取的资源的路径。它返回一个 Promise 解析为该请求的 Response — 只要服务器响应头 — 即使服务器响应是 HTTP 错误状态。您还可以选择传入一个 init 选项对象作为第二个参数（参见 Request）。

检索到 Response 后，有许多方法可用于定义正文内容是什么以及应如何处理它（请参阅 Body）。

您可以直接使用 Request() 和 Response() 构造函数创建请求和响应，但直接这样做的情况并不多见。相反，这些更有可能作为其他 API 操作的结果创建（例如，来自服务工作线程的 FetchEvent.respondWith()）。

与 jQuery 的区别

fetch 规范与 jQuery.ajax() 主要有三个方面的不同：

• 从 fetch() 返回的 Promise 不会拒绝 HTTP 错误状态，即使响应是 HTTP 404 或 500。相反，它将正常解析（ok 状态设置为 false），并且只会在网络故障或任何阻止请求完成的情况下才拒绝。
• fetch() 不会发送跨域 cookies，除非你设置 credentials init 选项（为 include）。
  • 在 2018 年 4 月，规范将默认凭据策略更改为 'same-origin'。因此以下浏览器的原生 fetch 变成过时的，并在这些版本中更新了：Firefox 61.0b13、Safari 12、Chrome 68。
  • 如果你的目标是这些浏览器的旧版本，请确保在所有可能受 cookie / 用户登录状态影响的 API 请求中加入 credentials: 'same-origin' init 选项。

备注

在使用 Fetch 中了解有关使用 Fetch API 功能的更多信息，并在 Fetch 基本概念中学习概念。

中止 fetch

浏览器已经开始为 AbortController 和 AbortSignal 接口（又称 Abort API）添加实验性支持，允许 Fetch 和 XHR 等操作在尚未完成时被中止。更多细节见接口页面。

Fetch 接口

WindowOrWorkerGlobalScope.fetch()

fetch() 方法用于获取资源。

Headers

表示响应 / 请求标头，允许您查询它们并根据结果采取不同的操作。

Request

表示一个资源请求。

Response

表示对请求的响应。

Fetch mixin

Body

提供与响应 / 请求正文相关的方法，允许您声明其内容类型是什么以及应该如何处理。

规范

规范	状态	备注
Fetch	现行的标准	初始定义

桌面浏览器兼容性

移动浏览器兼容性

1. fetch() 现在定义在 WindowOrWorkerGlobalScope mixin 中。

相关链接

• 使用 Fetch
• ServiceWorker API
• HTTP 访问控制 (CORS)
• HTTP
• Fetch polyfill
• Fetch 基本概念