blob: 4aa036332c48a174766d9fd8372ed896d5d5f497 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
---
title: Fetch API
slug: Web/API/Fetch_API
tags:
- Fetch
- Fetch API
- Web
- XMLHttpRequest
- 参考
translation_of: Web/API/Fetch_API
---
<p>{{DefaultAPISidebar("Fetch API")}}</p>
<p>Fetch API 提供了一个获取资源的接口（包括跨域请求）。任何使用过 {{domxref("XMLHttpRequest")}} 的人都能轻松上手，而且新的 API 提供了更强大和灵活的功能集。</p>
<h2 id="概念和用法">概念和用法</h2>
<p>Fetch 提供了对 {{domxref("Request")}} 和 {{domxref("Response")}} （以及其他与网络请求有关的）对象的通用定义。使之今后可以被使用到更多地应用场景中：无论是 service worker、Cache API、又或者是其他处理请求和响应的方式，甚至是任何一种需要你自己在程序中生成响应的方式。</p>
<p>它同时还为有关联性的概念，例如CORS和HTTP原生头信息，提供一种新的定义，取代它们原来那种分离的定义。</p>
<p>发送请求或者获取资源，需要使用 {{domxref("WindowOrWorkerGlobalScope.fetch()")}} 方法。它在很多接口中都被实现了，更具体地说，是在 {{domxref("Window")}} 和 {{domxref("WorkerGlobalScope")}} 接口上。因此在几乎所有环境中都可以用这个方法获取到资源。</p>
<p> <code>fetch()</code> 必须接受一个参数——资源的路径。无论请求成功与否，它都返回一个 Promise 对象，resolve 对应请求的 {{domxref("Response")}}。你也可以传一个可选的第二个参数 <code>init</code>（参见 {{domxref("Request")}}）。</p>
<p>一旦 {{domxref("Response")}} 被返回，就可以使用一些方法来定义内容的形式，以及应当如何处理内容（参见 {{domxref("Body")}}）。</p>
<p>你也可以通过 {{domxref("Request.Request","Request()")}} 和 {{domxref("Response.Response","Response()")}} 的构造函数直接创建请求和响应，但是我们不建议这么做。他们应该被用于创建其他 API 的结果（比如，service workers 中的 {{domxref("FetchEvent.respondWith")}}）。</p>
<div class="note">
<p><strong>注意</strong>：更多关于 Fetch API 的用法，参考 <a href="/zh-CN/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a>，以及一些概念 <a href="/zh-CN/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a>。</p>
</div>
<h3 id="中止_fetch">中止 fetch</h3>
<p>浏览器已经开始为 {{domxref("AbortController")}} 和 {{domxref("AbortSignal")}} 接口（也就是Abort API）添加实验性支持，允许像 Fetch 和 XHR 这样的操作在还未完成时被中止 。请参阅接口页面了解更多详情。</p>
<h2 id="Fetch_接口">Fetch 接口</h2>
<dl>
<dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt>
<dd>包含了<code>fetch()</code> 方法，用于获取资源。</dd>
<dt>{{domxref("Headers")}}</dt>
<dd>相当于 response/request 的头信息，可以使你查询到这些头信息，或者针对不同的结果做不同的操作。</dd>
<dt>{{domxref("Request")}}</dt>
<dd>相当于一个资源请求。</dd>
<dt>{{domxref("Response")}}</dt>
<dd>相当于请求的响应</dd>
</dl>
<h2 id="Fetch_mixin">Fetch mixin</h2>
<dl>
<dt>{{domxref("Body")}}</dt>
<dd>提供了与 response/request 中的 body 有关的方法，可以定义它的内容形式以及处理方式。</dd>
</dl>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">说明</th>
</tr>
<tr>
<td>{{SpecName('Fetch')}}</td>
<td>{{Spec2('Fetch')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容">浏览器兼容</h2>
<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
<h2 id="相关链接">相关链接</h2>
<ul>
<li><a href="/zh-CN/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a></li>
<li><a href="/zh-CN/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
<li><a href="/zh-CN/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
<li><a href="/zh-CN/docs/Web/HTTP">HTTP</a></li>
<li><a href="https://github.com/github/fetch">Fetch polyfill</a></li>
<li><a href="/zh-CN/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a></li>
</ul>
|
