aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/api/request/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/zh-cn/web/api/request/index.html')
-rw-r--r--files/zh-cn/web/api/request/index.html170
1 files changed, 170 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/request/index.html b/files/zh-cn/web/api/request/index.html
new file mode 100644
index 0000000000..10248d0e2f
--- /dev/null
+++ b/files/zh-cn/web/api/request/index.html
@@ -0,0 +1,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 =&gt; response.blob())
+ .then(blob =&gt; {
+ 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 =&gt; {
+ if (response.status === 200) {
+ return response.json();
+ } else {
+ throw new Error('Something went wrong on api server!');
+ }
+ })
+ .then(response =&gt; {
+ console.debug(response);
+ // ...
+ }).catch(error =&gt; {
+ 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>