From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/response/error/index.html | 63 +++++++++ files/zh-cn/web/api/response/headers/index.html | 63 +++++++++ files/zh-cn/web/api/response/index.html | 129 +++++++++++++++++++ files/zh-cn/web/api/response/ok/index.html | 120 +++++++++++++++++ files/zh-cn/web/api/response/redirect/index.html | 85 ++++++++++++ files/zh-cn/web/api/response/redirected/index.html | 85 ++++++++++++ files/zh-cn/web/api/response/response/index.html | 75 +++++++++++ files/zh-cn/web/api/response/status/index.html | 127 ++++++++++++++++++ files/zh-cn/web/api/response/statustext/index.html | 126 ++++++++++++++++++ files/zh-cn/web/api/response/type/index.html | 137 ++++++++++++++++++++ files/zh-cn/web/api/response/url/index.html | 65 ++++++++++ .../response/\345\205\213\351\232\206/index.html" | 143 +++++++++++++++++++++ 12 files changed, 1218 insertions(+) create mode 100644 files/zh-cn/web/api/response/error/index.html create mode 100644 files/zh-cn/web/api/response/headers/index.html create mode 100644 files/zh-cn/web/api/response/index.html create mode 100644 files/zh-cn/web/api/response/ok/index.html create mode 100644 files/zh-cn/web/api/response/redirect/index.html create mode 100644 files/zh-cn/web/api/response/redirected/index.html create mode 100644 files/zh-cn/web/api/response/response/index.html create mode 100644 files/zh-cn/web/api/response/status/index.html create mode 100644 files/zh-cn/web/api/response/statustext/index.html create mode 100644 files/zh-cn/web/api/response/type/index.html create mode 100644 files/zh-cn/web/api/response/url/index.html create mode 100644 "files/zh-cn/web/api/response/\345\205\213\351\232\206/index.html" (limited to 'files/zh-cn/web/api/response') 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 +--- +
{{APIRef("Fetch")}}
+ +

{{domxref("Response")}} 接口的error()方法返回一个包含网络错误相关信息的新Response对象

+ +
+

Note: 这主要与Service Workers有关； 如果您愿意，可以使用error方法返回错误。 错误响应的{{domxref("Response.type","type")}} 被设置为error。

+
+ +
+

Note: 一个“错误”的响应不会真正地暴露给脚本: 对 {{domxref("GlobalFetch.fetch","fetch()")}} 的“错误”响应将会返回promise的reject状态。

+
+ +

语法

+ +
var errorResponse = Response.error();
+ +

参数

+ +

无

+ +

返回值

+ +

一个 {{domxref("Response")}} 对象

+ +

示例

+ +

TBD (does not yet appear to be supported anywhere).

+ +

规范

+ + + + + + + + + + + + + + +
规范状态注释
{{SpecName('Fetch','#dom-response-error','error()')}}{{Spec2('Fetch')}}
+ +

Browser compatibility

+ + + +

{{Compat("api.Response.error")}}

+ +

See also

+ + 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 +--- +
{{APIRef("Fetch")}}
+ +

{{domxref("Response")}} 接口的只读属性 headers 包含与响应关联的{{domxref("Headers")}}对象。

+ +

语法

+ +
var myHeaders = response.headers;
+ +

值

+ +

一个 {{domxref("Headers")}} 对象。

+ +

例程

+ +

在我们的 Fetch Response example 例程中（详见 Fetch Response live），我们使用{{domxref("Request.Request","Request()")}}构造函数创建了一个新的{{domxref("Request")}}对象，传入了一个jpg路径。我们接着使用{{domxref("GlobalFetch.fetch","fetch()")}}触发了请求，用{{domxref("Body.blob")}}从响应中提取了blob实例，使用{{domxref("URL.createObjectURL")}}创建了一个URL对象，然后显示在了{{htmlelement("img")}}中。

+ +

注意，在fetch()的顶级块中我们输出了headers到控制台。

+ +
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;
+  });
+});
+ +

规格

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-response-headers','headers')}}{{Spec2('Fetch')}}Initial definition
+ +

浏览器兼容性

+ +

{{Compat("api.Response.headers")}}

+ +

See also

+ + 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 +--- +

{{APIRef("Fetch API")}}

+ +

 Fetch API 的 Response 接口呈现了对一次请求的响应数据。

+ +

你可以使用 {{domxref("Response.Response()")}} 构造函数来创建一个 Response 对象，但通常更可能遇到的情况是，其他的API操作返回了一个 Response 对象。例如一个service worker 的 {{domxref("Fetchevent.respondWith")}}，或者一个简单的 {{domxref("GlobalFetch.fetch()")}}。

+ +

构造函数

+ +
+
{{domxref("Response.Response","Response()")}}
+
创建一个新的 Response 对象。
+
+ +

属性

+ +
+
{{domxref("Response.headers")}} {{readonlyinline}}
+
包含此 Response 所关联的 {{domxref("Headers")}} 对象。
+
{{domxref("Response.ok")}} {{readonlyinline}}
+
包含了一个布尔值，标示该 Response 成功（HTTP 状态码的范围在 200-299）。
+
{{domxref("Response.redirected")}} {{ReadOnlyInline}}
+
表示该 Response 是否来自一个重定向，如果是的话，它的 URL 列表将会有多个条目。
+
{{domxref("Response.status")}} {{readonlyinline}}
+
包含 Response 的状态码 （例如 200 表示成功）。
+
{{domxref("Response.statusText")}} {{readonlyinline}}
+
包含了与该 Response 状态码一致的状态信息（例如，OK对应 200）。
+
{{domxref("Response.type")}} {{readonlyinline}}
+
包含 Response 的类型（例如，basic、cors）。
+
{{domxref("Response.url")}} {{readonlyinline}}
+
包含 Response 的URL。
+
{{domxref("Response.useFinalURL")}}
+
包含了一个布尔值，来标示这是否是该 Response 的最终 URL。
+
+ +

Response 实现了 {{domxref("Body")}} 接口，所以以下属性亦可用：

+ +
+
{{domxref("Body.body")}} {{readonlyInline}}
+
一个简单的 getter，用于暴露一个 {{domxref("ReadableStream")}} 类型的 body 内容。
+
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
+
包含了一个{{domxref("Boolean", "布尔值")}}来标示该 Response 是否读取过 {{domxref("Body")}}。
+
+ +

方法

+ +
+
{{domxref("Response.clone()")}}
+
创建一个 Response 对象的克隆。
+
{{domxref("Response.error()")}}
+
返回一个绑定了网络错误的新的 Response 对象。
+
{{domxref("Response.redirect()")}}
+
用另一个 URL 创建一个新的 Response。
+
+ +

Response 实现了 {{domxref("Body")}} 接口，所以以下方法同样可用：

+ +
+
{{domxref("Body.arrayBuffer()")}}
+
读取 {{domxref("Response")}} 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 {{domxref("ArrayBuffer")}} 格式的 Promise 对象。
+
{{domxref("Body.blob()")}}
+
读取 {{domxref("Response")}} 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 {{domxref("Blob")}} 格式的 Promise 对象。
+
{{domxref("Body.formData()")}}
+
读取{{domxref("Response")}} 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 {{domxref("FormData")}} 格式的 Promise 对象。
+
{{domxref("Body.json()")}}
+
读取 {{domxref("Response")}} 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 {{domxref("JSON")}} 格式的 Promise 对象。
+
{{domxref("Body.text()")}}
+
读取 {{domxref("Response")}} 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 {{domxref("USVString")}} 格式的 Promise 对象。
+
+ +

示例

+ +

在我们的基础实例 (点击运行) 中 , 我们使用了一个简单的函数调用 , 调用了 fetch() 函数来获取一张图片并将其显示在 HTML 的 IMG 标签中 , fetch() 函数返回了一个 Promise，它使用与资源获取操作相关联的 Response 对象进行解析. 你会注意到，由于我们正在请求一张图片，我们需要运行{{domxref("Body.blob")}}（{{domxref("Response")}} 实现了），以为响应提供正确的 MIME 类型。

+ +
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;
+});
+ +

你也可以使用 {{domxref("Response.Response()")}} 这样的构造方法，来创建自定义的 Response 对象：

+ +
const response = new Response();
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#response-class','Response')}}{{Spec2('Fetch')}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("api.Response")}}

+ +

相关链接

+ + 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 +--- +
{{APIRef("Fetch")}}{{SeeCompatTable}}
+ +

{{domxref("Response")}} 接口的只读属性  ok 包含一个布尔值，表明响应是否成功（状态码在200-299范围内）.

+ +

语法

+ +
var myOK = response.ok;
+ +

值

+ +

 {{domxref("Boolean")}}.

+ +

示例

+ +

In our Fetch Response example (see Fetch Response live) 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")}}.

+ +

Note that at the top of the fetch() block we log the response ok value to the console.

+ +
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;
+  });
+});
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-response-ok','ok')}}{{Spec2('Fetch')}}Initial definition
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(42)}}
+ {{CompatChrome(41)}}[1]		{{CompatGeckoDesktop(39)}}
+ 34[1]		{{CompatNo}} +

29
+ 28[1]

+ 		{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] This feature is implemented behind a preference.

+ +

相关链接

+ + 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 +--- +
{{APIRef("Fetch")}}
+ +

{{domxref("Response")}} 接口的 redirect() 方法返回一个可以重定向到指定 URL 的 Response 。

+ +
+

Note: 主要和 ServiceWorker API 有关。 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.

+
+ +

语法

+ +
var response = Response.redirect(url, status);
+ +

参数

+ +
+
url
+
The URL that the new response is to originate from.
+
status {{optional_inline}}
+
用于 response 的可选的状态码 (e.g., 302.)
+
+ +

返回值

+ +

一个 {{domxref("Response")}} 对象。

+ +

异常

+ + + + + + + + + + + + + + + + + + +
异常类型说明
RangeErrorstatus 不是一个重定向的状态码。
TypeErrorurl 不可用。
+ +

示例

+ +
responseObj.redirect('https://www.example.com', 302);
+ +

规范

+ + + + + + + + + + + + + + +
规范状态注释
{{SpecName('Fetch','#dom-response-redirect','redirect()')}}{{Spec2('Fetch')}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.Response.redirect")}}

+ +

参阅

+ + 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 +--- +
{{APIRef("Fetch")}}
+ + + +

{{domxref("Response")}} 接口中只读的 redirected 属性表明该响应是否为一个重定向的请求的结果.

+ +
+

依赖 redirected 过滤重定向很容易导致虚假的重定向阻止你的内容像预期一样生效. 因此, 当调用 {{domxref("GlobalFetch.fetch", "fetch()")}} 时你应该进行过滤操作. 详见下面 {{anch("禁用重定向")}} 的例子.

+
+ +

语法

+ +
var isRedirected = Response.redirected;
+ +

返回值

+ +

一个布尔值 ({{domxref("Boolean")}}), 如果响应来自重定向的请求, 那么将返回 true.

+ +

示例

+ +

检测重定向

+ +

检测某个响应是否来自一个重定向的请求就如同检测 {{domxref("Response")}} 对象中这个标识一样容易. 在下面的代码中, 当 fetch 操作引起了重定向, 一段文本信息会被插入到元素中. 但需要注意的是, 这不像下面 {{anch("禁用重定向")}} 所描述的当重定向不合法时全部阻止的行为一样安全.

+ +
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;
+});
+
+ +

禁用重定向

+ +

由于使用 redirected 过滤重定向会允许虚假的重定向, 你应该像下面的例子这样, 当调用 {{domxref("GlobalFetch.fetch", "fetch()")}} 时在 init 参数中设置重定向模式为 "error" :

+ +
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;
+});
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-response-redirected','redirected')}}{{Spec2('Fetch')}}初始化定义
+ +

浏览器兼容性

+ + + +

{{Compat("api.Response.redirected")}}

+ +

相关链接

+ + 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 +--- +
{{APIRef("Fetch")}}
+ +
+ +

Response() 构造函数创建了一个新的  {{domxref("Response")}} 对象.

+ +

语法

+ +
let myResponse = new Response(body, init);
+ +

参数

+ +
+
body {{optional_inline}}
+
一个定义 response 中 body 的对象. 可以为 null ，或是以下其中一个: +
    +
  • {{domxref("Blob")}}
    • +
  • {{domxref("BufferSource")}}
    • +
  • {{domxref("FormData")}}
    • +
  • {{domxref("ReadableStream")}}
    • +
  • {{domxref("URLSearchParams")}}
    • +
  • {{domxref("USVString")}}
    • +
+
+
init {{optional_inline}}
+
一个参数(options)对象，包含要应用到 response 上的任何自定义设置. 可能参数(options)是: +
    +
  • status: response 的状态码, 例如:200.
    • +
  • statusText: 和状态码关联的状态消息, 例如: OK.
    • +
  • headers: 你想加到 response 上的任何 headers, 包含了一个 {{domxref("Headers")}} 对象或满足对象语法的 {{domxref("ByteString")}} key/value 对 (详见 HTTP headers).
    • +
+
+
+ +

例子

+ +

在我们的 Fetch Response 示例中 (参见Fetch Response live) 我们使用构造函数创建了一个新的Response 对象，传递一个新的 {{domxref("Blob")}} 作为 body, 和一个包含自定义 status 和statusText的 init 对象:

+ +
var myBlob = new Blob();
+var init = { "status" : 200 , "statusText" : "SuperSmashingGreat!" };
+var myResponse = new Response(myBlob,init);
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-response','Response()')}}{{Spec2('Fetch')}}Initial definition
+ +

浏览器兼容性

+ +

{{Compat("api.Response.Response")}}

+ +

See also

+ + 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 +--- +
{{APIRef("Fetch")}}
+ +


+ {{domxref("Response")}}  接口的status 只读属性包含响应的状态代码（例如，成功为200）。

+ +

语法

+ +
let myStatus = response.status;
+ +

值

+ +

一个数字（确切来讲是一个unsigned short）

+ +

示例

+ +

In our Fetch Response example (see Fetch Response live) 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")}}.

+ +

Note that at the top of the fetch() block we log the response status value to the console.

+ +
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;
+  });
+});
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-response-status','status')}}{{Spec2('Fetch')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(42)}}
+ {{CompatChrome(41)}}[1]		{{CompatVersionUnknown}}{{CompatGeckoDesktop(39)}}
+ 34[1]		{{CompatNo}} +

29
+ 28[1]

+ 		{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] This feature is implemented behind a preference.

+ +

See also

+ + 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 +--- +
{{APIRef("Fetch")}}
+ +

{{domxref("Response")}} 接口的 statusText只读属性包含与状态代码相对应的状态消息（例如，对于200可以确定）。

+ +

Syntax

+ +
let myStatusText = response.statusText;
+ +

Value

+ +

A {{domxref("ByteString")}}.

+ +

Example

+ +

In our Fetch Response example (see Fetch Response live) 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")}}.

+ +

Note that at the top of the fetch() block we log the response statusText value to the console.

+ +
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;
+  });
+});
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-response-statustext','statusText')}}{{Spec2('Fetch')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(42)}}
+ {{CompatChrome(41)}}[1]		{{CompatVersionUnknown}}{{CompatGeckoDesktop(39)}}
+ 34[1]		{{CompatNo}} +

29
+ 28[1]

+ 		{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] This feature is implemented behind a preference.

+ +

See also

+ + 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 +--- +
{{APIRef("Fetch")}}{{SeeCompatTable}}
+ +

type 是{{domxref("Response")}} 接口包含的一种响应类型，是只读属性.它可以是以下某一种值:

+ + + +
+

Note: “错误”响应从来没有真正暴露于脚本: 这种响应 {{domxref("GlobalFetch.fetch","fetch()")}} 将被promise拒绝.

+
+ +

Syntax

+ +
var myType = response.type;
+ +

Value

+ +

ResponseType说明响应类型.

+ +

Example

+ +

In our Fetch Response example (see Fetch Response live) 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")}}.

+ +

Note that at the top of the fetch() block we log the response type to the console.

+ +
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;
+  });
+});
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Fetch", "#dom-response-type", "type")}}{{Spec2("Fetch")}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(42)}}
+ {{CompatChrome(41)}}[1]		{{CompatVersionUnknown}}{{CompatGeckoDesktop(39)}}
+ 34[2]		{{CompatNo}} +

29
+ 28[1]

+ 		{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] The implementation of this feature is behind the "Experimental Web Platform Features" preference in chrome://flags.

+ +

[2] The implementation of this feature is behind the preference dom.fetch.enabled in about:config, defaulting to false.

+ +

See also

+ + 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 +--- +
{{APIRef("Fetch")}}
+ +

The url read-only property of the {{domxref("Response")}} interface contains the URL of the response. The value of the url property will be the final URL obtained after any redirects. 

+ +

Syntax

+ +
var myURL = response.url;
+ +

Value

+ +

A {{domxref("USVString")}}.

+ +

Example

+ +

In our Fetch Response example (see Fetch Response live) 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")}}.

+ +

Note that at the top of the fetch() block we log the response URL to the console.

+ +
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;
+  });
+});
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-response-url','url')}}{{Spec2('Fetch')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.Response.url")}}

+ +

See also

+ + diff --git "a/files/zh-cn/web/api/response/\345\205\213\351\232\206/index.html" "b/files/zh-cn/web/api/response/\345\205\213\351\232\206/index.html" new file mode 100644 index 0000000000..0efccea0dc --- /dev/null +++ "b/files/zh-cn/web/api/response/\345\205\213\351\232\206/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 +--- +
{{APIRef("Fetch")}}
+ +

{{domxref("Response")}} 接口的 clone() 方法创建了一个响应对象的克隆，这个对象在所有方面都是相同的，但是存储在一个不同的变量中。

+ +

如果已经使用了响应 {{domxref("Body")}}，clone() 会抛出{{jsxref("TypeError")}}。 实际上，clone()存在的主要原因是允许多次使用{{domxref("Body")}}对象(当它们是一次性使用的时候)。

+ +

语法

+ +
var response2 = response1.clone();
+ +

Parameters

+ +

None.

+ +

Value

+ +

一个 {{domxref("Response")}} 对象.

+ +

示例

+ +

在我们的 Fetch Response 克隆示例 (请参阅 Fetch Response clone live) 我们使用{{domxref("Request.Request","Request()")}} 构造函数创建一个新的 {{domxref("Request")}} 来传递一个 JPG 路径。 然后我们使用 {{domxref("GlobalFetch.fetch","fetch()")}} 获取这个请求。 当 fetch resolve 时，我们克隆它，使用两个{{domxref("Body.blob")}}调用从两个响应中提取blob，使用{{domxref("URL.createObjectURL")}} 从blob创建对象URL，并将它们显示在两个单独的{{htmlelement("img")}}元素中。

+ +
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;
+  });
+});
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-response-clone','clone()')}}{{Spec2('Fetch')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(42)}}
+ {{CompatChrome(41)}}[1]		{{CompatVersionUnknown}}{{CompatGeckoDesktop(39)}}
+ 34[1]		{{CompatNo}} +

29
+ 28[1]

+ 		{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] 此功能是在首选项后面实现的。

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf