开始学习Fetch API
Fetch API 提供了一个获取资源的接口（包括通过网络）。任何使用过 XMLHttpRequest 的人都会觉得很熟悉，但Fetch API 提供了一个更强大和更灵活的功能集。
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] | 不支持 | ? | 不支持 |
表格中的角标解释：
[1]这个API是在首选项后面实现的。
[2]在Firefox 52之前，get()只返回指定头文件中的第一个值，getAll()返回所有的值。从52开始，get()现在返回所有值，并getAll()已被删除。
[3]可读流目前在Firefox中启用，但隐藏在dom.streams.enabled和javascript.options.streamsprefs 后面。