diff options
author | MDN <actions@users.noreply.github.com> | 2021-07-01 00:37:12 +0000 |
---|---|---|
committer | MDN <actions@users.noreply.github.com> | 2021-07-01 00:37:12 +0000 |
commit | b0a393384aa4021c915e6a650c75ff328a054cb2 (patch) | |
tree | 5f049f0db1c3b87c9d8ea12564cf7bc43b0e8f07 /files/zh-cn/web/api | |
parent | 3f2eea0abf998516fe98d64da8da53a03d36c3ee (diff) | |
download | translated-content-b0a393384aa4021c915e6a650c75ff328a054cb2.tar.gz translated-content-b0a393384aa4021c915e6a650c75ff328a054cb2.tar.bz2 translated-content-b0a393384aa4021c915e6a650c75ff328a054cb2.zip |
[CRON] sync translated content
Diffstat (limited to 'files/zh-cn/web/api')
-rw-r--r-- | files/zh-cn/web/api/body/arraybuffer/index.html | 142 | ||||
-rw-r--r-- | files/zh-cn/web/api/body/blob/index.html | 136 | ||||
-rw-r--r-- | files/zh-cn/web/api/body/body/index.html | 86 | ||||
-rw-r--r-- | files/zh-cn/web/api/body/bodyused/index.html | 134 | ||||
-rw-r--r-- | files/zh-cn/web/api/body/formdata/index.html | 122 | ||||
-rw-r--r-- | files/zh-cn/web/api/body/index.html | 96 | ||||
-rw-r--r-- | files/zh-cn/web/api/body/json/index.html | 90 | ||||
-rw-r--r-- | files/zh-cn/web/api/body/text/index.html | 85 |
8 files changed, 0 insertions, 891 deletions
diff --git a/files/zh-cn/web/api/body/arraybuffer/index.html b/files/zh-cn/web/api/body/arraybuffer/index.html deleted file mode 100644 index de711b01b9..0000000000 --- a/files/zh-cn/web/api/body/arraybuffer/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: Body.arrayBuffer() -slug: Web/API/Body/arrayBuffer -translation_of: Web/API/Body/arrayBuffer ---- -<p>{{APIRef("Fetch")}}{{ SeeCompatTable() }}</p> - -<p> {{domxref("Body")}}上的<strong><code>方法 arrayBuffer()</code></strong> 接受一个 {{domxref("Response")}} 流, 并等待其读取完成. 它返回一个 promise 实例, 并 resolve 一个 {{domxref("ArrayBuffer")}} 对象.</p> - -<h2 id="语法">语法</h2> - -<pre class="brush: js">response.arrayBuffer().then(function(buffer) { - // do something with buffer -)};</pre> - -<h3 id="参数">参数</h3> - -<p>无。</p> - -<h3 id="返回值">返回值</h3> - -<p>A promise that resolves with an {{domxref("ArrayBuffer")}}.</p> - -<h2 id="例子">例子</h2> - -<p>In our <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-array-buffer">fetch array buffer example</a> (run <a href="http://mdn.github.io/fetch-examples/fetch-array-buffer/">fetch array buffer live</a>), we have a Play button. When pressed, the <code>getData()</code> function is run.</p> - -<p>In <code>getData()</code> we create a new request using the {{domxref("Request.Request")}} constructor, then use it to fetch an OGG music track. We also use {{domxref("AudioContext.createBufferSource")}} to create an audio buffer source. When the fetch is successful, we read an {{domxref("ArrayBuffer")}} out of the response using <code>arrayBuffer()</code>, decode the audio data using {{domxref("AudioContext.decodeAudioData")}}, set the decoded data as the audio buffer source's buffer (<code>source.buffer</code>), then connect the source up to the {{domxref("AudioContext.destination")}}.</p> - -<p>Once <code>getData()</code> has finished running, we start the audio source playing with <code>start(0)</code>, then disable the play button so it can't be clicked again when it is already playing (this would cause an error.)</p> - -<pre class="brush: js">function getData() { - source = audioCtx.createBufferSource(); - - var myRequest = new Request('viper.ogg'); - - fetch(myRequest).then(function(response) { - response.arrayBuffer().then(function(buffer) { - audioCtx.decodeAudioData(buffer, function(decodedData) { - source.buffer = decodedData; - source.connect(audioCtx.destination); - }); - }); - }); -}; - -// wire up buttons to stop and play audio - -play.onclick = function() { - getData(); - source.start(0); - play.setAttribute('disabled', 'disabled'); -}</pre> - -<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','#dom-body-arraybuffer','arrayBuffer()')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatChrome(41) }}<sup>[1]</sup><br> - {{ CompatChrome(42) }}<br> - </td> - <td>34<sup>[1]</sup><br> - {{ CompatGeckoDesktop(39)}}</td> - <td>{{ CompatNo }}</td> - <td> - <p>28<sup>[1]</sup><br> - 29</p> - </td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] In Chrome 42, Firefox 34 and Opera 28 support for <code>arrayBuffer()</code> was hidden behind a preference.</p> - -<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> - -<div id="sVim-command" class="hidden">-- NORMAL --</div> diff --git a/files/zh-cn/web/api/body/blob/index.html b/files/zh-cn/web/api/body/blob/index.html deleted file mode 100644 index 6b292cc7a5..0000000000 --- a/files/zh-cn/web/api/body/blob/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: Body.blob() -slug: Web/API/Body/blob -tags: - - Body.blob() -translation_of: Web/API/Body/blob ---- -<p>{{APIRef("Fetch")}}</p> - -<p>{{domxref("Body")}} mixin的 <strong><code>blob()</code></strong>方法使用一个 {{domxref("Response")}} 流,并将其读取完成。它返回一个使用{{domxref("Blob")}}解决的promise。</p> - -<h2 id="句法">句法</h2> - -<pre class="brush: js">response.blob().then(function(myBlob) { - // do something with myBlob -});</pre> - -<h3 id="参数">参数</h3> - -<p>None.</p> - -<h3 id="返回值">返回值</h3> - -<p>A promise that resolves with a {{domxref("Blob")}}.</p> - -<h2 id="例子">例子</h2> - -<p>在我们 <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request">fetch request example</a> (run <a href="http://mdn.github.io/fetch-examples/fetch-request/">fetch request live</a>)中,我们使用<a href="/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/webRequest/RequestFilter">Request.Request</a>构造方法创建了一个新的request对象,然后使用它来获取一个JPG文件。当fetch成功的时候,我们使用blob()从response中读取一个<a href="/zh-CN/docs/Web/API/Blob">Blob</a>对象,并使用<a href="/zh-CN/docs/Web/API/URL/createObjectURL">URL.createObjectURL</a> 将它放入一个object URL ,然后把URL设置为<a href="/zh-CN/docs/Web/HTML/Element/img">img</a>元素的src属性以显示这张图片。</p> - -<p> </p> - -<pre class="brush: js">var myImage = document.querySelector('img'); - -var myRequest = new Request('flowers.jpg'); - -fetch(myRequest) -.then(function(response) { - return response.blob(); -}) -.then(function(myBlob) { - var objectURL = URL.createObjectURL(myBlob); - myImage.src = objectURL; -}); -</pre> - -<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','#dom-body-blob','blob()')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{ CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatChrome(42) }} [1]<br> - </td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoDesktop(39)}} [2]</td> - <td>{{ CompatNo }}</td> - <td> - <p>29 [3]</p> - </td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo }}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Behind a preference in version 41.</p> - -<p>[2] Behind a preference starting with version 34.</p> - -<p>[3] Behind a preference in version 28.</p> - -<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> diff --git a/files/zh-cn/web/api/body/body/index.html b/files/zh-cn/web/api/body/body/index.html deleted file mode 100644 index 2361cc9145..0000000000 --- a/files/zh-cn/web/api/body/body/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Body.body -slug: Web/API/Body/body -translation_of: Web/API/Body/body ---- -<div>{{APIRef("Fetch")}}</div> - -<p>{{domxref("Body")}} mixin的只读getter属性 <strong><code>body</code></strong> 用于暴露其body内容的{{domxref("ReadableStream")}}(流读取)。</p> - -<h2 id="语法">语法</h2> - -<pre class="brush: js">var stream = responseInstance.body;</pre> - -<h3 id="Value">Value</h3> - -<p>一个 {{domxref("ReadableStream")}}.</p> - -<h2 id="例程">例程</h2> - -<p>在我们的 <a href="https://mdn.github.io/dom-examples/streams/simple-pump.html">simple stream pump</a> 例程中我们fetch一个图片地址,使用<code>response.body</code>暴露响应的流,用{{domxref("body.getReader()", "ReadableStream.getReader()")}}创建一个读取器,然后将其置入第二个自定义读取流中——有效的创建了一个完全相同的图片副本。</p> - -<pre class="brush: js">const image = document.getElementById('target'); - -// 请求原始图片 -fetch('./tortoise.png') -// 取出body -.then(response => response.body) -.then(body => { - const reader = body.getReader(); - - return new ReadableStream({ - start(controller) { - return pump(); - - function pump() { - return reader.read().then(({ done, value }) => { - // 读不到更多数据就关闭流 - if (done) { - controller.close(); - return; - } - - // 将下一个数据块置入流中 - controller.enqueue(value); - return pump(); - }); - } - } - }) -}) -.then(stream => new Response(stream)) -.then(response => response.blob()) -.then(blob => URL.createObjectURL(blob)) -.then(url => console.log(image.src = url)) -.catch(err => console.error(err));</pre> - -<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','#dom-body-body','body')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<div>{{Compat("api.Body.body")}}</div> - -<p> </p> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li> - <li><a href="/en-US/docs/Web/API/Streams_API">Streams API</a></li> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> -</ul> diff --git a/files/zh-cn/web/api/body/bodyused/index.html b/files/zh-cn/web/api/body/bodyused/index.html deleted file mode 100644 index fd776b8a65..0000000000 --- a/files/zh-cn/web/api/body/bodyused/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Body.bodyUsed -slug: Web/API/Body/bodyUsed -translation_of: Web/API/Body/bodyUsed ---- -<p>{{APIRef("Fetch")}}{{ SeeCompatTable }}</p> - -<p><strong><code>bodyUsed</code></strong><code> 是</code>{{domxref("Body")}} mixin中的一个<code>只读属性。用以表示该body是否被使用过。</code></p> - -<h2 id="语法">语法</h2> - -<pre class="brush: js">var myBodyUsed = response.bodyUsed;</pre> - -<h3 id="可能的值">可能的值</h3> - -<p>{{domxref("Boolean")}}.</p> - -<h2 id="示例">示例</h2> - -<p>在以下<a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request">fetch 请求示例</a>(运行 <a href="http://mdn.github.io/fetch-examples/fetch-request/">fetch request live</a>)。通过{{domxref("Request.Request")}}构造器创建了一个fetch请求,来获得一张JPG图片。当fetch成功后,通过{{domxref("Blob")}} 来使用了fetch返回的资源--{{domxref("URL.createObjectURL")}}创建该资源的URL,并作为 {{htmlelement("img")}}元素的src源来显示图片。</p> - -<p>注意:<code>在response.blob()被调用前后,</code>输出<code>response.bodyUsed的差异。</code></p> - -<h3 id="HTML_Content">HTML Content</h3> - -<pre class="brush: html"><img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"> -</pre> - -<h3 id="JS_Content">JS Content</h3> - -<pre class="brush: js">var myImage = document.querySelector('.my-image'); -fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg').then(function(response) { - console.log(response.bodyUsed); - var res = response.blob(); - console.log(response.bodyUsed); - return res; -}).then(function(response) { - var objectURL = URL.createObjectURL(response); - myImage.src = objectURL; -});</pre> - -<p>{{ EmbedLiveSample('Example', '100%', '250px') }}</p> - -<h2 id="Specifications">Specifications</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','#dom-body-bodyused','bodyUsed')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{ CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatChrome(42) }} [1]<br> - </td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoDesktop(39)}} [2]</td> - <td>{{ CompatNo }}</td> - <td> - <p>29 [3]</p> - </td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo }}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Behind a preference in version 41.</p> - -<p>[2] Behind a preference starting with version 34.</p> - -<p>[3] Behind a preference in version 28.</p> - -<h2 id="See_also">See also</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> diff --git a/files/zh-cn/web/api/body/formdata/index.html b/files/zh-cn/web/api/body/formdata/index.html deleted file mode 100644 index 846b6afa07..0000000000 --- a/files/zh-cn/web/api/body/formdata/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: Body.formData() -slug: Web/API/Body/formData -translation_of: Web/API/Body/formData ---- -<div>{{APIRef("Fetch")}}</div> - -<p> {{domxref("Body")}} 对象中的<strong><code>formData()</code></strong> 方法将 {{domxref("Response")}} 对象中的所承载的数据流读取并封装成为一个对象,该方法将返回一个 <strong><code>Promise</code></strong> 对象,该对象将产生一个{{domxref("FormData")}} 对象。</p> - -<div class="note"> -<p><strong>注意</strong>: 该方法主要与 <a href="/en-US/docs/Web/API/ServiceWorker_API">service workers</a> 有关. 如果客户端提交的一个表单请求被Service Worker 所截取,您可以像下述的样例一样,调用 <code>formData()</code> 方法来获取一个key-value 字典, 对该字典可以进行修饰, 然后将修饰后的表填提交给远端服务器 (或在本地应用)。</p> -</div> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox">response.formData() -.then(function(formdata) { - // do something with your formdata -});</pre> - -<h3 id="参数">参数</h3> - -<p>无。</p> - -<h3 id="返回值">返回值</h3> - -<p>生成 {{domxref("FormData")}}对象的{{domxref("Promise")}} 对象.</p> - -<h2 id="样例">样例</h2> - -<p>待定.</p> - -<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','#dom-body-formdata','formData()')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td> - <p>{{CompatChrome(60)}}</p> - </td> - <td>{{ CompatGeckoDesktop(39)}} [1]</td> - <td>{{ CompatNo }}</td> - <td> - <p>{{CompatOpera(47)}}</p> - </td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android Webview</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td> - <p>{{CompatChrome(60)}}</p> - </td> - <td> - <p>{{CompatChrome(60)}}</p> - </td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td> - <p>{{CompatOperaMobile(47)}}</p> - </td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Behind a preference starting with version 34.</p> - -<h2 id="See_also">See also</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> diff --git a/files/zh-cn/web/api/body/index.html b/files/zh-cn/web/api/body/index.html deleted file mode 100644 index d6094d90ab..0000000000 --- a/files/zh-cn/web/api/body/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Body -slug: Web/API/Body -tags: - - API - - BODY - - Fetch - - bolb() - - json() - - request -translation_of: Web/API/Body ---- -<p>{{ APIRef("Fetch") }}</p> - -<p><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> 中的 <strong><code>Body</code></strong> {{glossary("mixin")}} 代表响应/请求的正文,允许你声明其内容类型是什么以及应该如何处理。</p> - -<p><code>Body</code>被{{domxref("Request")}} 和{{domxref("Response")}}实现,并为这些对象提供了一个相关联的主体(字节流),一个已使用的标志(最初未设置)和一个MIME类型(最初为空字节序列)。</p> - -<h2 id="属性">属性</h2> - -<dl> - <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt> - <dd>一个简单的getter用于暴露一个{{domxref("ReadableStream")}}类型的主体内容。</dd> - <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt> - <dd>一个{{domxref("Boolean")}} 值指示是否body已经被标记读取。</dd> -</dl> - -<h2 id="方法">方法</h2> - -<dl> - <dt>{{domxref("Body.arrayBuffer()")}}</dt> - <dd>使{{domxref("Response")}}挂起一个流操作并且在完成时读取其值,它返回一个{{domxref("Promise")}}对象,其resolve参数类型是{{domxref("ArrayBuffer")}}。此操作会将bodyUsed状态改为已使用(true)。</dd> - <dt>{{domxref("Body.blob()")}}</dt> - <dd>使{{domxref("Response")}}挂起一个流操作并且在完成时读取其值,它返回一个{{domxref("Promise")}}对象,其resolve参数类型是{{domxref("Blob")}}。此操作会将bodyUsed状态改为已使用(true)。</dd> - <dt>{{domxref("Body.formData()")}}</dt> - <dd>使{{domxref("Response")}}挂起一个流操作并且在完成时读取其值,它返回一个{{domxref("Promise")}}对象,其resolve参数类型是{{domxref("FormData")}}表单。此操作会将bodyUsed状态改为已使用(true)。</dd> - <dt>{{domxref("Body.json()")}}</dt> - <dd>使{{domxref("Response")}}挂起一个流操作并且在完成时读取其值,它返回一个{{domxref("Promise")}}对象,其resolve参数类型是使用{{jsxref("JSON")}}解析body文本的结果。此操作会将bodyUsed状态改为已使用(true)。</dd> - <dt>{{domxref("Body.text()")}}</dt> - <dd>使{{domxref("Response")}}挂起一个流操作并且在完成时读取其值,它返回一个{{domxref("Promise")}}对象,其resolve参数类型是{{domxref("USVString")}}(文本)。此操作会将bodyUsed状态改为已使用(true)。</dd> -</dl> - -<h2 id="范例">范例</h2> - -<p>在<a href="https://github.com/mdn/fetch-examples/tree/gh-pages/basic-fetch">基本 fetch 使用实例</a> (<a href="http://mdn.github.io/fetch-examples/basic-fetch/">查看运行效果</a>) 中,我们使用简单的 fetch 请求获取一张图片并将其使用 {{htmlelement("img")}} 标签展示。你可能注意到当我们请求一张图片,需要使用 {{domxref("Body.blob")}} ({{domxref("Response")}} 实现 body 接口以发送正确的MIME类型给服务器进行识别。</p> - -<h3 id="HTML_内容">HTML 内容</h3> - -<pre class="brush: html"><img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"> -</pre> - -<h3 id="JS_内容">JS 内容</h3> - -<pre class="brush: js">var myImage = document.querySelector('.my-image'); -fetch('flowers.jpg').then(function(response) { - return response.blob(); -}).then(function(response) { - var objectURL = URL.createObjectURL(response); - myImage.src = objectURL; -});</pre> - -<p>你也可以使用 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Response/Response" title="The Response() constructor creates a new Response object."><code>Response.Response()</code></a> 构造函数创建自定义的 <code>Response</code> 对象。</p> - -<pre><code>const response = new Response();</code> -</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','#body-mixin','Body')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容情况">浏览器兼容情况</h2> - -<p>{{Compat("api.Body")}}</p> - -<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> - -<p> </p> diff --git a/files/zh-cn/web/api/body/json/index.html b/files/zh-cn/web/api/body/json/index.html deleted file mode 100644 index 58583dddf0..0000000000 --- a/files/zh-cn/web/api/body/json/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Body.json() -slug: Web/API/Body/json -tags: - - API - - BODY - - Fetch - - JSON - - 参考 - - 方法 -translation_of: Web/API/Body/json ---- -<div>{{APIRef("Fetch")}}</div> - -<div>{{domxref("Body")}} mixin 的 <strong><code>json()</code></strong> 方法接收一个 {{domxref("Response")}} 流,并将其读取完成。它返回一个 Promise,Promise 的解析 resolve 结果是将文本体解析为 {{jsxref("JSON")}}。</div> - -<h2 id="语法">语法</h2> - -<pre class="brush: js">response.json().then(data => { - // do something with your data -});</pre> - -<h3 id="参数">参数</h3> - -<p>没有。</p> - -<h3 id="返回值">返回值</h3> - -<p>返回一个被解析为<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/JSON" title="此页面仍未被本地化, 期待您的翻译!"><code>JSON</code></a>格式的promise对象,这可以是任何可以由JSON表示的东西 - 一个object,一个array,一个string,一个number...</p> - -<h2 id="示例">示例</h2> - -<p>在我们的 <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-json">fetch json 示例</a> 中(运行 <a href="http://mdn.github.io/fetch-examples/fetch-json/">fetch json live</a>), 我们使用 {{domxref("Request.Request")}} 构造函数创建一个新的请求, 然后使用它来获取一个 <code>.json</code> 文件。当获取成功时,我们使用 <code>json()</code> 读取并解析数据,然后像预期的那样从结果对象中读取值,并将其插入到列表项中以显示我们的产品数据。</p> - -<pre class="brush: js highlight[5]">const myList = document.querySelector('ul'); -const myRequest = new Request('products.json'); - -fetch(myRequest) - .then(response => response.json()) - .then(data => { - for (const product of data.products) { - let listItem = document.createElement('li'); - listItem.appendChild( - document.createElement('strong') - ).textContent = product.Name; - listItem.append( - ` can be found in ${ - product.Location - }. Cost: ` - ); - listItem.appendChild( - document.createElement('strong') - ).textContent = `£${product.Price}`; - myList.appendChild(listItem); - } - });</pre> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Fetch", "#dom-body-json", "Body.json()")}}</td> - <td>{{Spec2("Fetch")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.Body.json")}}</p> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <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> -</ul> diff --git a/files/zh-cn/web/api/body/text/index.html b/files/zh-cn/web/api/body/text/index.html deleted file mode 100644 index 4a67985fd9..0000000000 --- a/files/zh-cn/web/api/body/text/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Body.text() -slug: Web/API/Body/text -tags: - - API - - Fetch - - 参考 - - 方法 -translation_of: Web/API/Body/text ---- -<div>{{APIRef("Fetch")}}</div> - -<p>{{domxref("Body")}} mixin 的 <strong><code>text()</code></strong> 方法提供了一个可供读取的“返回流”({{domxref("Response")}} stream),并将它读取完。它返回一个包含 {{domxref("USVString")}} 对象(也就是文本)的 Promise 对象,返回结果的编码<em>永远是</em> UTF-8。</p> - -<h2 id="语法">语法</h2> - -<pre class="brush: js">response.text().then(function (text) { - // do something with the text response -});</pre> - -<h3 id="参数">参数</h3> - -<p>无。</p> - -<h3 id="返回值">返回值</h3> - -<p>A promise that resolves with a {{domxref("USVString")}}.</p> - -<h2 id="示例">示例</h2> - -<p>在我们 <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-text">fetch text example</a> (运行 <a href="http://mdn.github.io/fetch-examples/fetch-text/">fetch text live</a>)的案例中, 我们有一个 {{htmlelement("article")}} 元素和三个链接(储存在 <code>myLinks </code> 数组中),首先,遍历 <code>myLinks </code> 数组,并且给数组中的所有元素添加 <code>onclick</code> 事件监听器,当按钮被点击的时候,链接的 <code>data-page</code> 标识作为会参数传入 <code>getData()</code> 中。</p> - -<p>当进入 <code>getData()</code> 函数, 我们使用 {{domxref("Request.Request","Request()")}} 构造函数创建了一个请求(Request)对象,然后,使用它获取指定的<code>.txt</code>的文件, 当fetch 函数执行成功, 我们使用 <code>text()</code> 函数来返回一个{{jsxref("USVString")}} (text) 对象,将它设置到 {{htmlelement("article")}} 对象的{{domxref("Element.innerHTML","innerHTML")}} (元素文本)中。</p> - -<pre class="brush: js">const myArticle = document.querySelector('article'); -const myLinks = document.querySelectorAll('ul a'); - -for(i = 0; i <= myLinks.length-1; i++) { - myLinks[i].onclick = function(e) { - e.preventDefault(); - var linkData = e.target.getAttribute('data-page'); - getData(linkData); - } -}; - -function getData(pageId) { - console.log(pageId); - const myRequest = new Request(pageId + '.txt'); - fetch(myRequest).then(function(response) { - return response.text().then(function(text) { - myArticle.innerHTML = text; - }); - }); -}</pre> - -<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','#dom-body-text','text()')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.Body.text")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <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> -</ul> |