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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
|
---
title: Request
slug: Web/API/Request
translation_of: Web/API/Request
---
<div>{{APIRef("Fetch")}}{{SeeCompatTable}}</div>
<div><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> 的 <strong><code>Request</code></strong>接口?用来表示资源请求。</div>
<div></div>
<p>你可以使用 {{domxref("Request.Request()")}} ?构造函数创建一个<code>Request 对象，但是你可能会遇到一个 Request 对象作为其它 API 的操作被返回，比如一个 </code>service worker的{{domxref("FetchEvent.request")}}。</p>
<h2 id="构造器">构造器</h2>
<dl>
<dt>{{domxref("Request.Request()")}}</dt>
<dd>创建一个新的 <code>Request</code> 对象。</dd>
</dl>
<h2 id="属性">属性</h2>
<dl>
<dt>{{domxref("Request.method")}} {{readonlyInline}}</dt>
<dd>包含请求的方法 (<code>GET</code>, <code>POST</code>, 等.)</dd>
<dt>{{domxref("Request.url")}} {{readonlyInline}}</dt>
<dd>包含这个请求的URL。</dd>
<dt>{{domxref("Request.headers")}} {{readonlyInline}}</dt>
<dd>包含请求相关的{{domxref("Headers")}}对象。</dd>
<dt>{{domxref("Request.context")}} {{readonlyInline}} {{deprecated_inline()}}</dt>
<dd>包含请求的上下文(例如：<code>audio</code>, <code>image</code>, <code>iframe</code>, 等)</dd>
<dt>{{domxref("Request.referrer")}} {{readonlyInline}}</dt>
<dd>?包含请求的来源 (例如：<code>client</code>)。</dd>
<dt>{{domxref("Request.referrerPolicy")}} {{readonlyInline}}</dt>
<dd>?包含请求来源的策略 (例如：<code>no-referrer</code>)。</dd>
<dt>{{domxref("Request.mode")}} {{readonlyInline}}</dt>
<dd>包含请求的模式 (例如： <code>cors</code>, <code>no-cors</code>, <code>same-origin</code>,<code> navigate</code>).</dd>
<dt>{{domxref("Request.credentials")}} {{readonlyInline}}</dt>
<dd>包含请求的证书(例如： <code>omit</code>, <code>same-origin</code>).</dd>
<dt>{{domxref("Request.redirect")}} {{readonlyinline}}</dt>
<dd>包含?如何处理重定向模式，它可能是一个<code> follow </code>，<code>error</code>或者<code>manual</code>。</dd>
<dt>{{domxref("Request.integrity")}} {{readonlyInline}}</dt>
<dd>包含请求的<a href="/en-US/docs/Web/Security/Subresource_Integrity">子资源的完整性</a>值 (例如： <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</dd>
<dt>{{domxref("Request.cache")}} {{readonlyInline}}</dt>
<dd>包含请求的缓存模式 (例如： <code>default</code>, <code>reload</code>, <code>no-cache</code>).</dd>
</dl>
<p><code>Request</code>实现了{{domxref("Body")}}, 所以它还具有以下属性可用:</p>
<dl>
<dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
<dd>一个简单getter用于曝光一个{{domxref("ReadableStream")}}的主体内容.</dd>
</dl>
<dl>
<dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
<dd>存储一个{{domxref("Boolean")}}判断主体是否已经被用于一个响应中.</dd>
</dl>
<h2 id="方法">方法</h2>
<dl>
<dt>{{domxref("Request.clone()")}}</dt>
<dd>创建当前request的副本。</dd>
</dl>
<p><code>Request</code>实现 {{domxref("Body")}}, 因此它也有以下方法可用:</p>
<dl>
<dt>{{domxref("Body.arrayBuffer()")}}</dt>
<dd>返回解决一个{{domxref("ArrayBuffer")}}表示的请求主体的promise.</dd>
<dt>{{domxref("Body.blob()")}}</dt>
<dd>返回解决一个{{domxref("Blob")}}表示的请求主体的promise.</dd>
<dt>{{domxref("Body.formData()")}}</dt>
<dd>返回解决一个{{domxref("FormData")}}表示的请求主体的promise.</dd>
<dt>{{domxref("Body.json()")}}</dt>
<dd>返回解决一个{{domxref("JSON")}}表示的请求主体的promise.</dd>
<dt>{{domxref("Body.text()")}}</dt>
<dd>返回解决一个{{domxref("USVString")}}(文本)表示的请求主体的promise.</dd>
</dl>
<p class="note">注意：这些Body功能只能运行一次; 随后的调用将通过空strings/ ArrayBuffers解析.</p>
<h2 id="示例">示例</h2>
<p>在下面的代码中，我们使用 Request ( ) 构造函数创建了一个新的 request实例 （用来请求同一目录下的图片）, 然后返回请求的一些属性。</p>
<pre class="brush: js">const myRequest = new Request('http://localhost/flowers.jpg');
const myURL = myRequest.url; // http://localhost/flowers.jpg
const myMethod = myRequest.method; // GET
const myCred = myRequest.credentials; // omit
</pre>
<p>然后，通过将Request对象作为参数传递给<a href="/en-US/docs/Web/API/GlobalFetch/fetch">{{domxref("GlobalFetch.fetch()")}}</a>调用来获取此请求，例如：</p>
<pre class="brush: js line-numbers language-js">fetch(myRequest)
.then(response => response.blob())
.then(blob => {
myImage.src = URL.createObjectURL(blob);
});
</pre>
<p>在下面的代码片段中，我们使用<code>Request()</code>构造函数创建了一个新的request，其中包含一些初始数据和正文内容，用于需要主体有效载荷的api请求：</p>
<pre class="brush: js line-numbers language-js">const myRequest = new Request('http://localhost/api', {method: 'POST', body: '{"foo":"bar"}'});
const myURL = myRequest.url; // http://localhost/api
const myMethod = myRequest.method; // POST
const myCred = myRequest.credentials; // omit
const bodyUsed = myRequest.bodyUsed;
</pre>
<p class="note">注意：body类型只能是一个{{domxref("Blob")}},{{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} 或者{{domxref("ReadableStream")}}类型，因此增加一个JSON对象的有效载荷则需要字符串化该对象.</p>
<p>例如，您可以通过将<code>Request</code>对象作为参数传递给{{domxref("GlobalFetch.fetch()")}}调用来获取此api请求，并获得响应：</p>
<pre>fetch(myRequest)
.then(response => {
if (response.status === 200) {
return response.json();
} else {
throw new Error('Something went wrong on api server!');
}
})
.then(response => {
console.debug(response);
// ...
}).catch(error => {
console.error(error);
});
</pre>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Fetch','#request-class','Request')}}</td>
<td>{{Spec2('Fetch')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div id="compat-mobile">
<p>{{Compat("api.Request")}}</p>
</div>
<h2 id="相关链接">相关链接</h2>
<ul>
<li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
<li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
<li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
</ul>
|
