Fetch API 概念和用法

前言：为了提出请求并获取资源，请使用该GlobalFetch.fetch方法。它在多个接口实现的，特别是Window和WorkerGlobalScope。这使得它几乎可以在任何你想要获取资源的上下文中使用。

开始学习Fetch API

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

Fetch API简述

简单来说，Fetch的核心是HTTP Requests，Responses Headers和Bodypayload 的接口抽象，以及一个用于启动异步资源请求的全局fetch方法。由于HTTP的主要组件被抽象为JavaScript对象，所以其他API可以很容易利用这些功能。

Service Workers是大量使用Fetch API的一个示例。

Fetch将这种请求的异步性质进一步提升了一步。API是完全基于Promise的。

Fetch API 概念和用法

Fetch提供了Request和Response对象（以及涉及网络请求的其他内容）的通用的定义。这将允许他们在将来需要的地方使用，无论是service worker，Cache API 和其他类似的事情，处理或修改请求和响应，或任何类型的用例，可能需要您产生自己的响应编程。

它还为CORS和HTTP源头语义等相关概念提供了定义，取代了其他地方的单独定义。

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

该 fetch() 方法采用一个强制参数，即要获取的资源的路径。它返回一个promise，它解决了对该请求的Response，无论是否成功。您也可以选择传递一个init选项对象作为第二个参数。

一旦检索到Response，就有很多方法可以定义正文内容以及应该如何处理。

您可以使用Request()和Response()构造函数直接创建请求和响应，但是您不太可能直接执行此操作。相反，这些更有可能被创建为其他API操作的结果（例如，来自service worker的FetchEvent.respondWith）。

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

中止 Fetch

浏览器已经开始为 AbortController 和 AbortSignal 接口（又名Abort API）添加实验支持，允许像 Fetch 和 XHR 操作，如果他们尚未完成将被中止。

Fetch 接口

GlobalFetch

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

Headers

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

Request

代表资源请求。

Response

表示对请求的响应。

Fetch mixin

Body

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

规范

规范	状态	注释
Fetch	Living Standard	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox（Gecko）	IE	Opera	Safari（WebKit）
基本的支持	支持：42	支持：14	支持：39、34 ^[1]、52^[2]	不支持	支持：29 、28 ^[1]	支持：10.1
`ReadableStream`响应	支持：43	支持：14	不支持^[3]	不支持	？	不支持

Feature	Android Webview	Chrome for Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
基本的支持	支持：42	支持：42	支持	支持	不支持	不支持	支持：10.1
`ReadableStream`响应	支持：43	支持：43	支持	不支持^[3]	不支持	?	不支持