diff options
Diffstat (limited to 'files/zh-cn/web/api/response')
| -rw-r--r-- | files/zh-cn/web/api/response/arraybuffer/index.html | 150 | ||||
| -rw-r--r-- | files/zh-cn/web/api/response/blob/index.html | 142 | ||||
| -rw-r--r-- | files/zh-cn/web/api/response/body/index.html | 94 | ||||
| -rw-r--r-- | files/zh-cn/web/api/response/bodyused/index.html | 142 | ||||
| -rw-r--r-- | files/zh-cn/web/api/response/formdata/index.html | 132 | ||||
| -rw-r--r-- | files/zh-cn/web/api/response/json/index.html | 91 | ||||
| -rw-r--r-- | files/zh-cn/web/api/response/text/index.html | 88 |
7 files changed, 839 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/response/arraybuffer/index.html b/files/zh-cn/web/api/response/arraybuffer/index.html new file mode 100644 index 0000000000..48ec4e65a2 --- /dev/null +++ b/files/zh-cn/web/api/response/arraybuffer/index.html @@ -0,0 +1,150 @@ +--- +title: Response.arrayBuffer() +slug: Web/API/Response/arrayBuffer +translation_of: Web/API/Response/arrayBuffer +tags: + - API + - ArrayBuffer + - Fetch + - Method + - Reference + - Response +browser-compat: api.Response.arrayBuffer +--- +<p>{{APIRef("Fetch")}}{{ SeeCompatTable() }}</p> + +<p> {{domxref("Response")}}上的<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/response/blob/index.html b/files/zh-cn/web/api/response/blob/index.html new file mode 100644 index 0000000000..89444de3d4 --- /dev/null +++ b/files/zh-cn/web/api/response/blob/index.html @@ -0,0 +1,142 @@ +--- +title: Response.blob() +slug: Web/API/Response/blob +translation_of: Web/API/Response/blob +tags: + - API + - Blob + - Fetch + - Method + - Reference + - Response +browser-compat: api.Response.blob +--- +<p>{{APIRef("Fetch")}}</p> + +<p>{{domxref("Response")}} 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/response/body/index.html b/files/zh-cn/web/api/response/body/index.html new file mode 100644 index 0000000000..ffd78b8dfe --- /dev/null +++ b/files/zh-cn/web/api/response/body/index.html @@ -0,0 +1,94 @@ +--- +title: Response.body +slug: Web/API/Response/body +translation_of: Web/API/Response/body +tags: + - API + - Fetch + - Property + - Reference + - Streams + - Response +browser-compat: api.Response.body +--- +<div>{{APIRef("Fetch")}}</div> + +<p>{{domxref("Response")}} 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("Response.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 = Response.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.Response.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/response/bodyused/index.html b/files/zh-cn/web/api/response/bodyused/index.html new file mode 100644 index 0000000000..2e9428b9c2 --- /dev/null +++ b/files/zh-cn/web/api/response/bodyused/index.html @@ -0,0 +1,142 @@ +--- +title: Response.bodyUsed +slug: Web/API/Response/bodyUsed +translation_of: Web/API/Response/bodyUsed +tags: + - API + - Fetch + - Property + - Reference + - bodyUsed + - Response +browser-compat: api.Response.bodyUsed +--- +<p>{{APIRef("Fetch")}}{{ SeeCompatTable }}</p> + +<p><strong><code>bodyUsed</code></strong><code> 是</code>{{domxref("Response")}} 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/response/formdata/index.html b/files/zh-cn/web/api/response/formdata/index.html new file mode 100644 index 0000000000..26b61274fe --- /dev/null +++ b/files/zh-cn/web/api/response/formdata/index.html @@ -0,0 +1,132 @@ +--- +title: Response.formData() +slug: Web/API/Response/formData +translation_of: Web/API/Response/formData +tags: + - API + - Fetch + - Fetch API + - FormData + - Method + - NeedsExample + - Reference + - Response +browser-compat: api.Response.formData +--- +<div>{{APIRef("Fetch")}}</div> + +<p> {{domxref("Response")}} 对象中的<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/response/json/index.html b/files/zh-cn/web/api/response/json/index.html new file mode 100644 index 0000000000..360c349054 --- /dev/null +++ b/files/zh-cn/web/api/response/json/index.html @@ -0,0 +1,91 @@ +--- +title: Response.json() +slug: Web/API/Response/json +translation_of: Web/API/Response/json +tags: + - API + - Fetch + - JSON + - Method + - Reference + - Response +browser-compat: api.Response.json +--- +<div>{{APIRef("Fetch")}}</div> + +<div>{{domxref("Response")}} 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", "Response.json()")}}</td> + <td>{{Spec2("Fetch")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Response.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/response/text/index.html b/files/zh-cn/web/api/response/text/index.html new file mode 100644 index 0000000000..a56418518f --- /dev/null +++ b/files/zh-cn/web/api/response/text/index.html @@ -0,0 +1,88 @@ +--- +title: Response.text() +slug: Web/API/Response/text +translation_of: Web/API/Response/text +tags: + - API + - Fetch + - Method + - Reference + - Text + - Response +browser-compat: api.Response.text +--- +<div>{{APIRef("Fetch")}}</div> + +<p>{{domxref("Response")}} 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.Response.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> |