initial commit

12 files changed, 1218 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/response/error/index.html b/files/zh-cn/web/api/response/error/index.html
new file mode 100644
index 0000000000..57bdd13a0c
--- /dev/null
+++ b/files/zh-cn/web/api/response/error/index.html
@@ -0,0 +1,63 @@
+---
+title: Response.error()
+slug: Web/API/Response/error
+translation_of: Web/API/Response/error
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>{{domxref("Response")}} 接口的<code>error()</code>方法返回一个包含网络错误相关信息的新<code>Response</code>对象</p>
+
+<div class="note">
+<p><strong>Note</strong>: 这主要与Service Workers有关； 如果您愿意，可以使用error方法返回错误。 错误响应的{{domxref("Response.type","type")}} 被设置为error。</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: 一个“错误”的响应不会真正地暴露给脚本: 对 {{domxref("GlobalFetch.fetch","fetch()")}} 的“错误”响应将会返回promise的reject状态。</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var <em>errorResponse</em> = Response.error();</pre>
+
+<h3 id="参数">参数</h3>
+
+<p>无</p>
+
+<h3 id="返回值">返回值</h3>
+
+<p>一个 {{domxref("Response")}} 对象</p>
+
+<h2 id="示例">示例</h2>
+
+<p>TBD (does not yet appear to be supported anywhere).</p>
+
+<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-response-error','error()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Response.error")}}</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/headers/index.html b/files/zh-cn/web/api/response/headers/index.html
new file mode 100644
index 0000000000..935518d788
--- /dev/null
+++ b/files/zh-cn/web/api/response/headers/index.html
@@ -0,0 +1,63 @@
+---
+title: Response.headers
+slug: Web/API/Response/headers
+translation_of: Web/API/Response/headers
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>{{domxref("Response")}} 接口的只读属性 <code><strong>headers</strong></code> 包含与响应关联的{{domxref("Headers")}}对象。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var <var>myHeaders</var> = <var>response</var>.headers;</pre>
+
+<h3 id="值">值</h3>
+
+<p>一个 {{domxref("Headers")}} 对象。</p>
+
+<h2 id="例程">例程</h2>
+
+<p>在我们的 <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-response">Fetch Response example</a> 例程中（详见 <a href="http://mdn.github.io/fetch-examples/fetch-response/">Fetch Response live</a>），我们使用{{domxref("Request.Request","Request()")}}构造函数创建了一个新的{{domxref("Request")}}对象，传入了一个jpg路径。我们接着使用{{domxref("GlobalFetch.fetch","fetch()")}}触发了请求，用{{domxref("Body.blob")}}从响应中提取了blob实例，使用{{domxref("URL.createObjectURL")}}创建了一个URL对象，然后显示在了{{htmlelement("img")}}中。</p>
+
+<p>注意，在<code>fetch()</code>的顶级块中我们输出了<code>headers</code>到控制台。</p>
+
+<pre class="brush: js">var myImage = document.querySelector('img');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest).then(function(response) {
+  console.log(response.headers); // returns a Headers{} object
+  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">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-response-headers','headers')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{Compat("api.Response.headers")}}</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/index.html b/files/zh-cn/web/api/response/index.html
new file mode 100644
index 0000000000..88547a1e0d
--- /dev/null
+++ b/files/zh-cn/web/api/response/index.html
@@ -0,0 +1,129 @@
+---
+title: Response
+slug: Web/API/Response
+tags:
+  - API
+  - Experimental
+  - Fetch
+  - Fetch API
+  - Interface
+  - Reference
+  - Response
+  - 参考
+translation_of: Web/API/Response
+---
+<p>{{APIRef("Fetch API")}}</p>
+
+<p> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a> 的 <code>Response</code> 接口呈现了对一次请求的响应数据。</p>
+
+<p>你可以使用 {{domxref("Response.Response()")}} 构造函数来创建一个 <code>Response</code> 对象，但通常更可能遇到的情况是，其他的API操作返回了一个 Response 对象。例如一个service worker 的 {{domxref("Fetchevent.respondWith")}}，或者一个简单的 {{domxref("GlobalFetch.fetch()")}}。</p>
+
+<h2 id="构造函数">构造函数</h2>
+
+<dl>
+ <dt>{{domxref("Response.Response","Response()")}}</dt>
+ <dd>创建一个新的 <code>Response</code> 对象。</dd>
+</dl>
+
+<h2 id="属性">属性</h2>
+
+<dl>
+ <dt>{{domxref("Response.headers")}} {{readonlyinline}}</dt>
+ <dd>包含此 Response 所关联的 {{domxref("Headers")}} 对象。</dd>
+ <dt>{{domxref("Response.ok")}} {{readonlyinline}}</dt>
+ <dd>包含了一个布尔值，标示该 Response 成功（HTTP 状态码的范围在 200-299）。</dd>
+ <dt>{{domxref("Response.redirected")}} {{ReadOnlyInline}}</dt>
+ <dd>表示该 Response 是否来自一个重定向，如果是的话，它的 URL 列表将会有多个条目。</dd>
+ <dt>{{domxref("Response.status")}} {{readonlyinline}}</dt>
+ <dd>包含 Response 的状态码 （例如 <code>200</code> 表示成功）。</dd>
+ <dt>{{domxref("Response.statusText")}} {{readonlyinline}}</dt>
+ <dd>包含了与该 Response 状态码一致的状态信息（例如，OK对应 <code>200</code>）。</dd>
+ <dt>{{domxref("Response.type")}} {{readonlyinline}}</dt>
+ <dd>包含 Response 的类型（例如，<code>basic</code>、<code>cors</code>）。</dd>
+ <dt>{{domxref("Response.url")}} {{readonlyinline}}</dt>
+ <dd>包含 Response 的URL。</dd>
+ <dt>{{domxref("Response.useFinalURL")}}</dt>
+ <dd>包含了一个布尔值，来标示这是否是该 Response 的最终 URL。</dd>
+</dl>
+
+<p><code>Response</code> 实现了 {{domxref("Body")}} 接口，所以以下属性亦可用：</p>
+
+<dl>
+ <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
+ <dd>一个简单的 getter，用于暴露一个 {{domxref("ReadableStream")}} 类型的 body 内容。</dd>
+ <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
+ <dd>包含了一个{{domxref("Boolean", "布尔值")}}来标示该 Response 是否读取过 {{domxref("Body")}}。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{domxref("Response.clone()")}}</dt>
+ <dd>创建一个 <code>Response</code> 对象的克隆。</dd>
+ <dt>{{domxref("Response.error()")}}</dt>
+ <dd>返回一个绑定了网络错误的新的 <code>Response</code> 对象。</dd>
+ <dt>{{domxref("Response.redirect()")}}</dt>
+ <dd>用另一个 URL 创建一个新的 <code>Response</code>。</dd>
+</dl>
+
+<p><code>Response</code> 实现了 {{domxref("Body")}} 接口，所以以下方法同样可用：</p>
+
+<dl>
+ <dt>{{domxref("Body.arrayBuffer()")}}</dt>
+ <dd>读取 {{domxref("Response")}} 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 {{domxref("ArrayBuffer")}} 格式的 Promise 对象。</dd>
+ <dt>{{domxref("Body.blob()")}}</dt>
+ <dd>读取 {{domxref("Response")}} 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 {{domxref("Blob")}} 格式的 Promise 对象。</dd>
+ <dt>{{domxref("Body.formData()")}}</dt>
+ <dd>读取{{domxref("Response")}} 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 {{domxref("FormData")}} 格式的 Promise 对象。</dd>
+ <dt>{{domxref("Body.json()")}}</dt>
+ <dd>读取 {{domxref("Response")}} 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 {{domxref("JSON")}} 格式的 Promise 对象。</dd>
+ <dt>{{domxref("Body.text()")}}</dt>
+ <dd>读取 {{domxref("Response")}} 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 {{domxref("USVString")}} 格式的 Promise 对象。</dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<p>在我们的<a href="https://github.com/mdn/fetch-examples/tree/gh-pages/basic-fetch">基础实例</a> (<a href="http://mdn.github.io/fetch-examples/basic-fetch/">点击运行</a>) 中 , 我们使用了一个简单的函数调用 , 调用了 <code>fetch()</code> 函数来获取一张图片并将其显示在 HTML 的 IMG 标签中 , <code>fetch()</code> 函数返回了一个 Promise，它使用与资源获取操作相关联的 Response 对象进行解析. 你会注意到，由于我们正在请求一张图片，我们需要运行{{domxref("Body.blob")}}（{{domxref("Response")}} 实现了），以为响应提供正确的 MIME 类型。</p>
+
+<pre class="brush: js">const image = document.querySelector('.my-image');
+fetch('flowers.jpg').then(function(response) {
+  return response.blob();
+}).then(function(blob) {
+  const objectURL = URL.createObjectURL(blob);
+  image.src = objectURL;
+});</pre>
+
+<p>你也可以使用 {{domxref("Response.Response()")}} 这样的构造方法，来创建自定义的 <code>Response</code> 对象：</p>
+
+<pre class="brush: js">const response = new Response();</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','#response-class','Response')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.Response")}}</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/ok/index.html b/files/zh-cn/web/api/response/ok/index.html
new file mode 100644
index 0000000000..63448df311
--- /dev/null
+++ b/files/zh-cn/web/api/response/ok/index.html
@@ -0,0 +1,120 @@
+---
+title: Response.ok
+slug: Web/API/Response/ok
+translation_of: Web/API/Response/ok
+---
+<div>{{APIRef("Fetch")}}{{SeeCompatTable}}</div>
+
+<p>{{domxref("Response")}} 接口的只读属性  <code><strong>ok</strong></code> 包含一个布尔值，表明响应是否成功（状态码在200-299范围内）.</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var <var>myOK</var> = <var>response</var>.ok;</pre>
+
+<h3 id="值">值</h3>
+
+<p> {{domxref("Boolean")}}.</p>
+
+<h2 id="示例">示例</h2>
+
+<p>In our <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-response">Fetch Response example</a> (see <a href="http://mdn.github.io/fetch-examples/fetch-response/">Fetch Response live</a>) we create a new {{domxref("Request")}} object using the {{domxref("Request.Request","Request()")}} constructor, passing it a JPG path. We then fetch this request using {{domxref("GlobalFetch.fetch","fetch()")}}, extract a blob from the response using {{domxref("Body.blob")}}, create an object URL out of it using {{domxref("URL.createObjectURL")}}, and display this in an {{htmlelement("img")}}.</p>
+
+<p>Note that at the top of the <code>fetch()</code> block we log the response <code>ok</code> value to the console.</p>
+
+<pre class="brush: js">var myImage = document.querySelector('img');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest).then(function(response) {
+  console.log(response.ok); // returns true if the response returned successfully
+  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">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-response-ok','ok')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Initial definition</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(42)}}<br>
+    {{CompatChrome(41)}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop(39)}}<br>
+    34<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>29<br>
+     28<sup>[1]</sup></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] This feature is implemented 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>
diff --git a/files/zh-cn/web/api/response/redirect/index.html b/files/zh-cn/web/api/response/redirect/index.html
new file mode 100644
index 0000000000..ac5f77371c
--- /dev/null
+++ b/files/zh-cn/web/api/response/redirect/index.html
@@ -0,0 +1,85 @@
+---
+title: Response.redirect()
+slug: Web/API/Response/redirect
+translation_of: Web/API/Response/redirect
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>{{domxref("Response")}} 接口的 <strong><code>redirect()</code></strong> 方法返回一个可以重定向到指定 URL 的 <code>Response</code> 。</p>
+
+<div class="note">
+<p><strong>Note</strong>: 主要和 <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> 有关。 A controlling service worker could intercept a page's request and redirect it as desired. This will actually lead to a real redirect if a service worker sends it upstream.</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var <em>response</em> = Response.redirect(<em>url</em>, <em>status</em>);</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>The URL that the new response is to originate from.</dd>
+ <dt><code>status</code> {{optional_inline}}</dt>
+ <dd>用于 response 的可选的状态码 (e.g., <code>302</code>.)</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p>一个 {{domxref("Response")}} 对象。</p>
+
+<h3 id="异常">异常</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">异常类型</th>
+   <th scope="col">说明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>RangeError</code></td>
+   <td>status 不是一个重定向的状态码。</td>
+  </tr>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>url 不可用。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush: js">responseObj.redirect('https://www.example.com', 302);</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-response-redirect','redirect()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.Response.redirect")}}</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 访问控制 (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/response/redirected/index.html b/files/zh-cn/web/api/response/redirected/index.html
new file mode 100644
index 0000000000..ad43bb7596
--- /dev/null
+++ b/files/zh-cn/web/api/response/redirected/index.html
@@ -0,0 +1,85 @@
+---
+title: Response.redirected
+slug: Web/API/Response/redirected
+translation_of: Web/API/Response/redirected
+---
+<div>{{APIRef("Fetch")}}</div>
+
+
+
+<p>{{domxref("Response")}} 接口中只读的 <strong><code>redirected</code></strong> 属性表明该响应是否为一个重定向的请求的结果.</p>
+
+<div class="note">
+<p>依赖 <strong><code>redirected</code></strong> 过滤重定向很容易导致虚假的重定向阻止你的内容像预期一样生效. 因此, 当调用 {{domxref("GlobalFetch.fetch", "fetch()")}} 时你应该进行过滤操作. 详见下面 {{anch("禁用重定向")}} 的例子.</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var <em>isRedirected</em> = <var>Response</var>.redirected;</pre>
+
+<h3 id="返回值">返回值</h3>
+
+<p>一个布尔值 ({{domxref("Boolean")}}), 如果响应来自重定向的请求, 那么将返回 <code>true</code>.</p>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="检测重定向">检测重定向</h3>
+
+<p>检测某个响应是否来自一个重定向的请求就如同检测 {{domxref("Response")}} 对象中这个标识一样容易. 在下面的代码中, 当 fetch 操作引起了重定向, 一段文本信息会被插入到元素中. 但需要注意的是, 这不像下面 {{anch("禁用重定向")}} 所描述的当重定向不合法时全部阻止的行为一样安全.</p>
+
+<pre class="brush: js">fetch("awesome-picture.jpg").then(function(response) {
+  let elem = document.getElementById("warning-message-box");
+  if (response.redirected) {
+    elem.innerHTML = "Unexpected redirect";
+  } else {
+    elem.innerHTML = "";
+  }
+  return response.blob();
+}).then(function(imageBlob) {
+  let imgObjectURL = URL.createObjectURL(imageBlob);
+  document.getElementById("img-element-id").src = imgObjectURL;
+});
+</pre>
+
+<h3 id="禁用重定向">禁用重定向</h3>
+
+<p>由于使用 <strong><code>redirected</code></strong> 过滤重定向会允许虚假的重定向, 你应该像下面的例子这样, 当调用 {{domxref("GlobalFetch.fetch", "fetch()")}} 时在 <code>init</code> 参数中设置重定向模式为 <code>"error"</code> :</p>
+
+<pre class="brush: js">fetch("awesome-picture.jpg", { redirect: "error" }).then(function(response) {
+  return response.blob();
+}).then(function(imageBlob) {
+  let imgObjectURL = URL.createObjectURL(imageBlob);
+  document.getElementById("img-element-id").src = imgObjectURL;
+});</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','#dom-response-redirected','redirected')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>初始化定义</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.Response.redirected")}}</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/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/response/index.html b/files/zh-cn/web/api/response/response/index.html
new file mode 100644
index 0000000000..7dd909c604
--- /dev/null
+++ b/files/zh-cn/web/api/response/response/index.html
@@ -0,0 +1,75 @@
+---
+title: Response()
+slug: Web/API/Response/Response
+translation_of: Web/API/Response/Response
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<div></div>
+
+<p><code><strong>Response()</strong></code> 构造函数创建了一个新的  {{domxref("Response")}} 对象.</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox notranslate">let <var>myResponse</var> = new Response(<var>body</var>, <var>init</var>);</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><em>body</em> {{optional_inline}}</dt>
+ <dd>一个定义 response 中 body 的对象. 可以为 <code>null</code> ，或是以下其中一个:
+ <ul>
+  <li>{{domxref("Blob")}}</li>
+  <li>{{domxref("BufferSource")}}</li>
+  <li>{{domxref("FormData")}}</li>
+  <li>{{domxref("ReadableStream")}}</li>
+  <li>{{domxref("URLSearchParams")}}</li>
+  <li>{{domxref("USVString")}}</li>
+ </ul>
+ </dd>
+ <dt><em>init</em> {{optional_inline}}</dt>
+ <dd>一个参数(options)对象，包含要应用到 response 上的任何自定义设置. 可能参数(options)是:
+ <ul>
+  <li><code>status</code>: response 的状态码, 例如:<code>200</code>.</li>
+  <li><code>statusText</code>: 和状态码关联的状态消息, 例如: <code>OK</code>.</li>
+  <li><code>headers</code>: 你想加到 response 上的任何 headers, 包含了一个 {{domxref("Headers")}} 对象或满足对象语法的 {{domxref("ByteString")}} key/value 对 (详见 <a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a>).</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="例子">例子</h2>
+
+<p>在我们的 <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-response">Fetch Response 示例</a>中 (参见<a href="http://mdn.github.io/fetch-examples/fetch-response/">Fetch Response live</a>) 我们使用构造函数创建了一个新的Response 对象，传递一个新的 {{domxref("Blob")}} 作为 body, 和一个包含自定义 <code>status</code> <font face="Open Sans, Arial, sans-serif">和</font><code>statusText</code>的 init 对象:</p>
+
+<pre class="brush: js notranslate">var myBlob = new Blob();
+var init = { "status" : 200 , "statusText" : "SuperSmashingGreat!" };
+var myResponse = new Response(myBlob,init);</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','#dom-response','Response()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{Compat("api.Response.Response")}}</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/status/index.html b/files/zh-cn/web/api/response/status/index.html
new file mode 100644
index 0000000000..cd1ab13bca
--- /dev/null
+++ b/files/zh-cn/web/api/response/status/index.html
@@ -0,0 +1,127 @@
+---
+title: Response.status
+slug: Web/API/Response/status
+tags:
+  - Response.status
+translation_of: Web/API/Response/status
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p><br>
+ {{domxref("Response")}}  接口的<strong><code>status</code></strong> 只读属性包含响应的状态代码（例如，成功为200）。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">let <var>myStatus</var> = <var>response</var>.status;</pre>
+
+<h3 id="值">值</h3>
+
+<p>一个数字（确切来讲是一个unsigned short）</p>
+
+<h2 id="示例">示例</h2>
+
+<p>In our <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-response">Fetch Response example</a> (see <a href="http://mdn.github.io/fetch-examples/fetch-response/">Fetch Response live</a>) we create a new {{domxref("Request")}} object using the {{domxref("Request.Request","Request()")}} constructor, passing it a JPG path. We then fetch this request using {{domxref("GlobalFetch.fetch","fetch()")}}, extract a blob from the response using {{domxref("Body.blob")}}, create an object URL out of it using {{domxref("URL.createObjectURL")}}, and display this in an {{htmlelement("img")}}.</p>
+
+<p>Note that at the top of the <code>fetch()</code> block we log the response <code>status</code> value to the console.</p>
+
+<pre class="brush: js">var myImage = document.querySelector('img');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest).then(function(response) {
+  console.log(response.status); // returns 200
+  response.blob().then(function(myBlob) {
+    var objectURL = URL.createObjectURL(myBlob);
+    myImage.src = objectURL;
+  });
+});</pre>
+
+<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-response-status','status')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Initial definition</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>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)}}<br>
+    {{CompatChrome(41)}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(39)}}<br>
+    34<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>29<br>
+     28<sup>[1]</sup></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] This feature is implemented behind a preference.</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/statustext/index.html b/files/zh-cn/web/api/response/statustext/index.html
new file mode 100644
index 0000000000..812d698a3c
--- /dev/null
+++ b/files/zh-cn/web/api/response/statustext/index.html
@@ -0,0 +1,126 @@
+---
+title: Response.statusText
+slug: Web/API/Response/statusText
+tags:
+  - Response.statusText
+translation_of: Web/API/Response/statusText
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>{{domxref("Response")}} 接口的 <code><strong>statusText</strong></code>只读属性包含与状态代码相对应的状态消息（例如，对于200可以确定）。</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">let <var>myStatusText</var> = <var>response</var>.statusText;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>A {{domxref("ByteString")}}.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>In our <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-response">Fetch Response example</a> (see <a href="http://mdn.github.io/fetch-examples/fetch-response/">Fetch Response live</a>) we create a new {{domxref("Request")}} object using the {{domxref("Request.Request","Request()")}} constructor, passing it a JPG path. We then fetch this request using {{domxref("GlobalFetch.fetch","fetch()")}}, extract a blob from the response using {{domxref("Body.blob")}}, create an object URL out of it using {{domxref("URL.createObjectURL")}}, and display this in an {{htmlelement("img")}}.</p>
+
+<p>Note that at the top of the <code>fetch()</code> block we log the response <code>statusText</code> value to the console.</p>
+
+<pre class="brush: js">var myImage = document.querySelector('img');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest).then(function(response) {
+  console.log(response.statusText); // returns "OK" if the response returned successfully
+  response.blob().then(function(myBlob) {
+    var objectURL = URL.createObjectURL(myBlob);
+    myImage.src = objectURL;
+  });
+});</pre>
+
+<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-response-statustext','statusText')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Initial definition</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>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)}}<br>
+    {{CompatChrome(41)}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(39)}}<br>
+    34<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>29<br>
+     28<sup>[1]</sup></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] This feature is implemented behind a preference.</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/type/index.html b/files/zh-cn/web/api/response/type/index.html
new file mode 100644
index 0000000000..1057083426
--- /dev/null
+++ b/files/zh-cn/web/api/response/type/index.html
@@ -0,0 +1,137 @@
+---
+title: Response.type
+slug: Web/API/Response/type
+translation_of: Web/API/Response/type
+---
+<div>{{APIRef("Fetch")}}{{SeeCompatTable}}</div>
+
+<p><strong><code>type</code></strong> 是{{domxref("Response")}} 接口包含的一种响应类型，是只读属性.它可以是以下某一种值:</p>
+
+<ul>
+ <li><code>basic</code>: 标准值, 同源响应, 带有所有的头部信息除了“Set-Cookie” 和 “Set-Cookie2″.</li>
+ <li><code>cors</code>: Response 接收到一个有效的跨域请求. <a href="https://fetch.spec.whatwg.org/#concept-filtered-response-cors">部分headers和body</a>可以被访问.</li>
+ <li><code>error</code>: 网络错误. 没有有用的描述错误的信息。响应的状态为0，header为空且不可变。从 <code>Response.error()</code>中获得的响应的类型.</li>
+ <li><code>opaque</code>: 响应 “no-cors” 的跨域请求. <a href="https://fetch.spec.whatwg.org/#concept-filtered-response-opaque">严重受限</a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: “错误”响应从来没有真正暴露于脚本: 这种响应 {{domxref("GlobalFetch.fetch","fetch()")}} 将被promise拒绝.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">var myType = response.type;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p><code>ResponseType</code>说明响应类型.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>In our <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-response">Fetch Response example</a> (see <a href="http://mdn.github.io/fetch-examples/fetch-response/">Fetch Response live</a>) we create a new {{domxref("Request")}} object using the {{domxref("Request.Request","Request()")}} constructor, passing it a JPG path. We then fetch this request using {{domxref("GlobalFetch.fetch","fetch()")}}, extract a blob from the response using {{domxref("Body.blob")}}, create an object URL out of it using {{domxref("URL.createObjectURL")}}, and display this in an {{htmlelement("img")}}.</p>
+
+<p>Note that at the top of the <code>fetch()</code> block we log the response <code>type</code> to the console.</p>
+
+<pre class="brush: js">var myImage = document.querySelector('img');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest).then(function(response) {
+  console.log(response.type); // returns basic by default
+  response.blob().then(function(myBlob) {
+    var objectURL = URL.createObjectURL(myBlob);
+    myImage.src = objectURL;
+  });
+});</pre>
+
+<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-response-type", "type")}}</td>
+   <td>{{Spec2("Fetch")}}</td>
+   <td>Initial definition</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>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)}}<br>
+    {{CompatChrome(41)}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(39)}}<br>
+    34<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>29<br>
+     28<sup>[1]</sup></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] The implementation of this feature is behind the "Experimental Web Platform Features" preference in <code>chrome://flags</code>.</p>
+
+<p>[2] The implementation of this feature is behind the preference <code>dom.fetch.enabled</code> in <code>about:config</code>, defaulting to <code>false</code>.</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/url/index.html b/files/zh-cn/web/api/response/url/index.html
new file mode 100644
index 0000000000..89bcee01c6
--- /dev/null
+++ b/files/zh-cn/web/api/response/url/index.html
@@ -0,0 +1,65 @@
+---
+title: Response.url
+slug: Web/API/Response/url
+translation_of: Web/API/Response/url
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>The <strong><code>url</code></strong> read-only property of the {{domxref("Response")}} interface contains the URL of the response. The value of the <code>url</code> property will be the final URL obtained after any redirects. </p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <var>myURL</var> = <var>response</var>.url;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>A {{domxref("USVString")}}.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>In our <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-response">Fetch Response example</a> (see <a href="http://mdn.github.io/fetch-examples/fetch-response/">Fetch Response live</a>) we create a new {{domxref("Request")}} object using the {{domxref("Request.Request","Request()")}} constructor, passing it a JPG path. We then fetch this request using {{domxref("GlobalFetch.fetch","fetch()")}}, extract a blob from the response using {{domxref("Body.blob")}}, create an object URL out of it using {{domxref("URL.createObjectURL")}}, and display this in an {{htmlelement("img")}}.</p>
+
+<p>Note that at the top of the <code>fetch()</code> block we log the response <code>URL</code> to the console.</p>
+
+<pre class="brush: js">var myImage = document.querySelector('img');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest).then(function(response) {
+  console.log(response.url); // returns https://developer.mozilla.org/en-US/docs/Web/API/Response/flowers.jpg
+  response.blob().then(function(myBlob) {
+    var objectURL = URL.createObjectURL(myBlob);
+    myImage.src = objectURL;
+  });
+});</pre>
+
+<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-response-url','url')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Response.url")}}</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/克隆/index.html b/files/zh-cn/web/api/response/克隆/index.html
new file mode 100644
index 0000000000..0efccea0dc
--- /dev/null
+++ b/files/zh-cn/web/api/response/克隆/index.html
@@ -0,0 +1,143 @@
+---
+title: Response.clone()
+slug: Web/API/Response/克隆
+tags:
+  - API
+  - Experimental
+  - Fetch
+  - Method
+  - Reference
+  - Response
+  - clone
+translation_of: Web/API/Response/clone
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>{{domxref("Response")}} 接口的 clone() 方法创建了一个响应对象的克隆，这个对象在所有方面都是相同的，但是存储在一个不同的变量中。</p>
+
+<p>如果已经使用了响应 {{domxref("Body")}}，<code>clone()</code> 会抛出{{jsxref("TypeError")}}。 实际上，clone()存在的主要原因是允许多次使用{{domxref("Body")}}对象(当它们是一次性使用的时候)。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush: js">var <var>response2</var> = <var>response1</var>.clone();</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<p>None.</p>
+
+<h3 id="Value">Value</h3>
+
+<p>一个 {{domxref("Response")}} 对象.</p>
+
+<h2 id="示例">示例</h2>
+
+<p>在我们的 <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-response-clone">Fetch Response 克隆示例</a> (请参阅 <a href="http://mdn.github.io/fetch-examples/fetch-response-clone/">Fetch Response clone live</a>) 我们使用{{domxref("Request.Request","Request()")}} 构造函数创建一个新的 {{domxref("Request")}} 来传递一个 JPG 路径。 然后我们使用 {{domxref("GlobalFetch.fetch","fetch()")}} 获取这个请求。 当 fetch resolve 时，我们克隆它，使用两个{{domxref("Body.blob")}}调用从两个响应中提取blob，使用{{domxref("URL.createObjectURL")}} 从blob创建对象URL，并将它们显示在两个单独的{{htmlelement("img")}}元素中。</p>
+
+<pre class="brush: js">var image1 = document.querySelector('.img1');
+var image2 = document.querySelector('.img2');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest).then(function(response) {
+  var response2 = response.clone();
+
+  response.blob().then(function(myBlob) {
+    var objectURL = URL.createObjectURL(myBlob);
+    image1.src = objectURL;
+  });
+
+  response2.blob().then(function(myBlob) {
+    var objectURL = URL.createObjectURL(myBlob);
+    image2.src = objectURL;
+  });
+});</pre>
+
+<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-response-clone','clone()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Initial definition</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>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)}}<br>
+    {{CompatChrome(41)}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(39)}}<br>
+    34<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>29<br>
+     28<sup>[1]</sup></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] 此功能是在首选项后面实现的。</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>