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/request/cache/index.html | 103 +++++++++++++ files/zh-cn/web/api/request/clone/index.html | 62 ++++++++ files/zh-cn/web/api/request/context/index.html | 43 ++++++ files/zh-cn/web/api/request/credentials/index.html | 64 ++++++++ files/zh-cn/web/api/request/headers/index.html | 151 ++++++++++++++++++ files/zh-cn/web/api/request/index.html | 170 +++++++++++++++++++++ files/zh-cn/web/api/request/method/index.html | 113 ++++++++++++++ files/zh-cn/web/api/request/mode/index.html | 80 ++++++++++ files/zh-cn/web/api/request/request/index.html | 158 +++++++++++++++++++ files/zh-cn/web/api/request/url/index.html | 113 ++++++++++++++ 10 files changed, 1057 insertions(+) create mode 100644 files/zh-cn/web/api/request/cache/index.html create mode 100644 files/zh-cn/web/api/request/clone/index.html create mode 100644 files/zh-cn/web/api/request/context/index.html create mode 100644 files/zh-cn/web/api/request/credentials/index.html create mode 100644 files/zh-cn/web/api/request/headers/index.html create mode 100644 files/zh-cn/web/api/request/index.html create mode 100644 files/zh-cn/web/api/request/method/index.html create mode 100644 files/zh-cn/web/api/request/mode/index.html create mode 100644 files/zh-cn/web/api/request/request/index.html create mode 100644 files/zh-cn/web/api/request/url/index.html (limited to 'files/zh-cn/web/api/request') diff --git a/files/zh-cn/web/api/request/cache/index.html b/files/zh-cn/web/api/request/cache/index.html new file mode 100644 index 0000000000..9cf3212519 --- /dev/null +++ b/files/zh-cn/web/api/request/cache/index.html @@ -0,0 +1,103 @@ +--- +title: Request.cache +slug: Web/API/Request/cache +translation_of: Web/API/Request/cache +--- +
{{APIRef("Fetch")}}
+ +

cache 作为{{domxref("Request")}} 接口只读属性包含着请求的缓存模式。它控制着请求以何种方式与浏览器的  HTTP 缓存进行交互。

+ +

Syntax

+ +
var currentCacheMode = request.cache;
+ +

Value

+ +

A RequestCache value. The available values are:

+ + + +

Example

+ +
// Download a resource with cache busting, to bypass the cache
+// completely.
+fetch("some.json", {cache: "no-store"})
+  .then(function(response) { /* consume the response */ });
+
+// Download a resource with cache busting, but update the HTTP
+// cache with the downloaded resource.
+fetch("some.json", {cache: "reload"})
+  .then(function(response) { /* consume the response */ });
+
+// Download a resource with cache busting when dealing with a
+// properly configured server that will send the correct ETag
+// and Date headers and properly handle If-Modified-Since and
+// If-None-Match request headers, therefore we can rely on the
+// validation to guarantee a fresh response.
+fetch("some.json", {cache: "no-cache"})
+  .then(function(response) { /* consume the response */ });
+
+// Download a resource with economics in mind!  Prefer a cached
+// albeit stale response to conserve as much bandwidth as possible.
+fetch("some.json", {cache: "force-cache"})
+  .then(function(response) { /* consume the response */ });
+ +

Specifications

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

Browser compatibility

+ + + +

{{Compat("api.Request.cache")}}

+ +

See also

+ + diff --git a/files/zh-cn/web/api/request/clone/index.html b/files/zh-cn/web/api/request/clone/index.html new file mode 100644 index 0000000000..a256435381 --- /dev/null +++ b/files/zh-cn/web/api/request/clone/index.html @@ -0,0 +1,62 @@ +--- +title: Request.clone() +slug: Web/API/Request/clone +translation_of: Web/API/Request/clone +--- +
{{APIRef("Fetch")}}
+ +
+ +

 {{domxref("Request")}} 接口中的clone() 方法可以创建一个当前Request 对象的副本。

+ +

 如果响应体{{domxref("Body")}}已经被使用过，那么clone()会抛出一个{{jsxref("TypeError")}}。实际上，clone() 的主要作用就是支持{{domxref("Body")}}对象的多次使用

+ +

语法

+ +
var newRequest = request.clone();
+ +

参数

+ +

无。

+ +

返回值

+ +

{{domxref("Request")}}对象，也就是Request的完整拷贝

+ +

示例

+ +

在下面的代码中，我们使用{{domxref("Request.Request()")}}构造函数创建了一个新的request对象(请求当前文件夹中的一个图片文件)，然后拷贝了这个request对象。

+ +
var myRequest = new Request('flowers.jpg');
+var newRequest = myRequest.clone(); // a copy of the request is now stored in newRequest
+ +

规范

+ + + + + + + + + + + + + + +
规范状态说明
{{SpecName('Fetch','#dom-request-clone','clone')}}{{Spec2('Fetch')}}初始化定义
+ +

浏览器兼容性

+ + + +

{{Compat("api.Request.clone")}}

+ +

了解更多

+ + diff --git a/files/zh-cn/web/api/request/context/index.html b/files/zh-cn/web/api/request/context/index.html new file mode 100644 index 0000000000..c1ecbc28a0 --- /dev/null +++ b/files/zh-cn/web/api/request/context/index.html @@ -0,0 +1,43 @@ +--- +title: Request.context +slug: Web/API/Request/context +translation_of: Web/API/Request/context +--- +
{{APIRef("Fetch")}}{{deprecated_header()}}
+ +

The deprecated 弃用context所述的只读属性{{domxref（“请求”）}}接口包含请求的上下文（例如，audio，image，iframe）。这定义了要获取的资源类型。它已由{{domxref（“ Request.destination”，“ destination”）}}属性取代。 This defines what sort of resource is being fetched. This has been replaced by the {{domxref("Request.destination", "destination")}} property.

+ +

The context of a request is only relevant in the 请求的上下文仅与ServiceWorker API相关；服务人员可以根据URL是用于图像还是可嵌入对象（例如{{htmlelement（“视频”）}}，{{domxref（“ iframe”）}}等）进行决策。; a service worker can make decisions based on whether the URL is for an image, or an embeddable object such as a {{htmlelement("video")}}, {{domxref("iframe")}}, etc.

+ +
+

Note注意：您可以在“ 获取规范请求上下文”部分中找到不同可用上下文的完整列表，包括关联的上下文框架类型，CSP指令和平台功能示例。 section.

+
+ +

Syntax

+ +
var myContext = request.context;
+ +

Value

+ +

A {{domxref("RequestContext")}} value.一个{{domxref（“ RequestContext”）}}值。

+ +

Example例子

+ +

In the following snippet, we create a new request using the {{domxref("Request.Request()")}} constructor (for an image file in the same directory as the script), then save the request context in a variable:在以下代码段中，我们使用{{domxref（“ Request.Request（）”）}}}构造函数创建一个新请求（用于与脚本位于同一目录中的图像文件），然后将请求上下文保存在变量中：

+ +
var myRequest = new Request('flowers.jpg');
+var myContext = myRequest.context; // returns the empty string by default
+ +

Browser compatibility浏览器兼容性

+ + + +

{{Compat("api.Request.context")}}

+ +

更多

+ + diff --git a/files/zh-cn/web/api/request/credentials/index.html b/files/zh-cn/web/api/request/credentials/index.html new file mode 100644 index 0000000000..f7a57ad6c0 --- /dev/null +++ b/files/zh-cn/web/api/request/credentials/index.html @@ -0,0 +1,64 @@ +--- +title: Request.credentials +slug: Web/API/Request/credentials +tags: + - API + - Fetch + - 属性 + - 证书 + - 请求 +translation_of: Web/API/Request/credentials +--- +
{{APIRef("Fetch")}}
+ +

credentials 是{{domxref("Request")}}接口的只读属性，用于表示用户代理是否应该在跨域请求的情况下从其他域发送cookies。这与XHR的withCredentials 标志相似，不同的是有三个可选值（后者是两个）：

+ + + +

语法

+ +
var myCred = request.credentials;
+ +

Value

+ +

A {{domxref("RequestCredentials")}} value.

+ +

举例

+ +

在以下代码中，我们使用{{domxref("Request.Request()")}}创建了一个新的request（为了一个与脚本在同一目录下的图片文件）， 接着将request credentials存入一个变量：

+ +
var myRequest = new Request('flowers.jpg');
+var myCred = myRequest.credentials; // returns "same-origin" by default
+ +

说明

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

浏览器兼容性

+ +

{{Compat("api.Request.credentials")}}

+ +

See also

+ + diff --git a/files/zh-cn/web/api/request/headers/index.html b/files/zh-cn/web/api/request/headers/index.html new file mode 100644 index 0000000000..37e7f41654 --- /dev/null +++ b/files/zh-cn/web/api/request/headers/index.html @@ -0,0 +1,151 @@ +--- +title: Request.headers +slug: Web/API/Request/headers +translation_of: Web/API/Request/headers +--- +
{{APIRef("Fetch")}}
+ +

{{domxref("Request")}}接口的只读属性  headers 包含与当前请求关联的{{domxref("Headers")}}对象.

+ +

语法

+ +
var myHeaders = request.headers;
+ +

值

+ +

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

+ +

例子

+ +

在下面的代码段中，我们使用 {{domxref("Request.Request()")}} 构造函数（为获取与脚本处于同一目录的图片文件）创建新请求，然后将请求headers保存到变量中:

+ +
var myRequest = new Request('flowers.jpg');
+var myHeaders = myRequest.headers; // Headers {}
+ +

使用 {{domxref("Headers.append")}} 向 {{domxref("Headers")}} 对象中添加header；然后，使用第二个init参数创建一个新的 Request ，同时，传递headers作为一个init选项:

+ +
var myHeaders = new Headers();
+myHeaders.append('Content-Type', 'image/jpeg');
+
+var myInit = { method: 'GET',
+                   headers: myHeaders,
+                   mode: 'cors',
+                   cache: 'default' };
+
+var myRequest = new Request('flowers.jpg',myInit);
+
+myContentType = myRequest.headers.get('Content-Type'); // returns 'image/jpeg'
+ +

规范

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

浏览器兼容性

+ + + +

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

+ +

See also

+ + + +
+ + + + + +
diff --git a/files/zh-cn/web/api/request/index.html b/files/zh-cn/web/api/request/index.html new file mode 100644 index 0000000000..10248d0e2f --- /dev/null +++ b/files/zh-cn/web/api/request/index.html @@ -0,0 +1,170 @@ +--- +title: Request +slug: Web/API/Request +translation_of: Web/API/Request +--- +
{{APIRef("Fetch")}}{{SeeCompatTable}}
+ +
Fetch API 的 Request接口?用来表示资源请求。
+ +
+ +

你可以使用  {{domxref("Request.Request()")}} ?构造函数创建一个Request 对象，但是你可能会遇到一个 Request 对象作为其它 API 的操作被返回，比如一个 service worker的{{domxref("FetchEvent.request")}}。

+ +

构造器

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

属性

+ +
+
{{domxref("Request.method")}} {{readonlyInline}}
+
包含请求的方法 (GET, POST, 等.)
+
{{domxref("Request.url")}} {{readonlyInline}}
+
包含这个请求的URL。
+
{{domxref("Request.headers")}} {{readonlyInline}}
+
包含请求相关的{{domxref("Headers")}}对象。
+
{{domxref("Request.context")}} {{readonlyInline}} {{deprecated_inline()}}
+
包含请求的上下文(例如：audio, image, iframe, 等)
+
{{domxref("Request.referrer")}} {{readonlyInline}}
+
?包含请求的来源 (例如：client)。
+
{{domxref("Request.referrerPolicy")}} {{readonlyInline}}
+
?包含请求来源的策略 (例如：no-referrer)。
+
{{domxref("Request.mode")}} {{readonlyInline}}
+
包含请求的模式 (例如： cors, no-cors, same-origin, navigate).
+
{{domxref("Request.credentials")}} {{readonlyInline}}
+
包含请求的证书(例如： omit, same-origin).
+
{{domxref("Request.redirect")}} {{readonlyinline}}
+
包含?如何处理重定向模式，它可能是一个 follow ，error或者manual。
+
{{domxref("Request.integrity")}} {{readonlyInline}}
+
包含请求的子资源的完整性值 (例如： sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).
+
{{domxref("Request.cache")}} {{readonlyInline}}
+
包含请求的缓存模式 (例如： default, reload, no-cache).
+
+ +

Request实现了{{domxref("Body")}}, 所以它还具有以下属性可用:

+ +
+
{{domxref("Body.body")}} {{readonlyInline}}
+
一个简单getter用于曝光一个{{domxref("ReadableStream")}}的主体内容.
+
+ +
+
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
+
存储一个{{domxref("Boolean")}}判断主体是否已经被用于一个响应中.
+
+ +

方法

+ +
+
{{domxref("Request.clone()")}}
+
创建当前request的副本。
+
+ +

Request实现 {{domxref("Body")}}, 因此它也有以下方法可用:

+ +
+
{{domxref("Body.arrayBuffer()")}}
+
返回解决一个{{domxref("ArrayBuffer")}}表示的请求主体的promise.
+
{{domxref("Body.blob()")}}
+
返回解决一个{{domxref("Blob")}}表示的请求主体的promise.
+
{{domxref("Body.formData()")}}
+
返回解决一个{{domxref("FormData")}}表示的请求主体的promise.
+
{{domxref("Body.json()")}}
+
返回解决一个{{domxref("JSON")}}表示的请求主体的promise.
+
{{domxref("Body.text()")}}
+
返回解决一个{{domxref("USVString")}}(文本)表示的请求主体的promise.
+
+ +

注意：这些Body功能只能运行一次; 随后的调用将通过空strings/ ArrayBuffers解析.

+ +

示例

+ +

在下面的代码中，我们使用 Request ( ) 构造函数创建了一个新的 request实例 （用来请求同一目录下的图片）, 然后返回请求的一些属性。

+ +
const myRequest = new Request('http://localhost/flowers.jpg');
+
+const myURL = myRequest.url; // http://localhost/flowers.jpg
+const myMethod = myRequest.method; // GET
+const myCred = myRequest.credentials; // omit
+
+ +

然后，通过将Request对象作为参数传递给{{domxref("GlobalFetch.fetch()")}}调用来获取此请求，例如：

+ +
fetch(myRequest)
+  .then(response => response.blob())
+  .then(blob => {
+    myImage.src = URL.createObjectURL(blob);
+  });
+
+
+ +

在下面的代码片段中，我们使用Request()构造函数创建了一个新的request，其中包含一些初始数据和正文内容，用于需要主体有效载荷的api请求：

+ +
const myRequest = new Request('http://localhost/api', {method: 'POST', body: '{"foo":"bar"}'});
+
+const myURL = myRequest.url; // http://localhost/api
+const myMethod = myRequest.method; // POST
+const myCred = myRequest.credentials; // omit
+const bodyUsed = myRequest.bodyUsed;
+
+ +

注意：body类型只能是一个{{domxref("Blob")}},{{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} 或者{{domxref("ReadableStream")}}类型，因此增加一个JSON对象的有效载荷则需要字符串化该对象.

+ +

例如，您可以通过将Request对象作为参数传递给{{domxref("GlobalFetch.fetch()")}}调用来获取此api请求，并获得响应：

+ +
fetch(myRequest)
+  .then(response => {
+    if (response.status === 200) {
+      return response.json();
+    } else {
+      throw new Error('Something went wrong on api server!');
+    }
+  })
+  .then(response => {
+    console.debug(response);
+    // ...
+  }).catch(error => {
+    console.error(error);
+  });
+
+ +

规范

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

浏览器兼容性

+ + + +
+ + + + +

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

+
+ +

相关链接

+ + diff --git a/files/zh-cn/web/api/request/method/index.html b/files/zh-cn/web/api/request/method/index.html new file mode 100644 index 0000000000..a10396fe27 --- /dev/null +++ b/files/zh-cn/web/api/request/method/index.html @@ -0,0 +1,113 @@ +--- +title: Request.method +slug: Web/API/Request/method +translation_of: Web/API/Request/method +--- +
{{APIRef("Fetch")}}{{SeeCompatTable}}
+ +

{{domxref("Request")}}的只读属性method包含请求的方法(GET, POST, etc.)

+ +

语法

+ +
var myMethod = request.method;
+ +

Value

+ +

A {{domxref("ByteString")}} indicating the method of the request.

+ +

举例

+ +

In the following snippet, we create a new request using the {{domxref("Request.Request()")}} constructor (for an image file in the same directory as the script), then save the method of the request in a variable:

+ +
var myRequest = new Request('flowers.jpg');
+var myMethod = myRequest.method; // GET
+ +

说明

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

浏览器兼容性

+ +

{{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/request/mode/index.html b/files/zh-cn/web/api/request/mode/index.html new file mode 100644 index 0000000000..ae3bb32f8a --- /dev/null +++ b/files/zh-cn/web/api/request/mode/index.html @@ -0,0 +1,80 @@ +--- +title: Request.mode +slug: Web/API/Request/mode +tags: + - API + - Fetch + - 参考 + - 属性 + - 请求 +translation_of: Web/API/Request/mode +--- +
{{APIRef("Fetch")}}
+ +

{{domxref("Request")}} 接口的 mode 只读属性包含请求的模式（例如：cors 、 no-cors 、 cors-with-forced-preflight 、 same-origin 或 navigate 。）这用于确定跨域请求是否能得到有效的响应，以及响应的哪些属性是可读的。

+ + + +

语法

+ +
var myMode = request.mode;
+ +

属性值

+ +

一个 RequestMode 值。

+ + + +

默认模式

+ +

可以以多种方式发起请求，并且请求的模式取决于发起请求的特定方式。

+ +

例如，当一个 Request 对象以 {{domxref("Request.Request")}} 方式创建，该Request 的 mode 的值为 cors 。

+ +

然而，除了以 {{domxref("Request.Request")}} 创建的请求，模式通常为 no-cors 。例如，对与嵌入资源发起的请求，除非存在 crossorigin 属性，即对于 {{HTMLElement("link")}} 、 {{HTMLElement("script")}} （除了和模块一起使用之外）、 {{HTMLElement("img")}}、 {{HTMLElement("audio")}}、 {{HTMLElement("video")}}、 {{HTMLElement("object")}}、 {{HTMLElement("embed")}}还有 {{HTMLElement("iframe")}} 元素，在大多数情况下是使用 no-cors 模式。

+ +

示例

+ +

在下面代码段中，我们使用 {{domxref("Request.Request()")}} 创建请求（请求与脚本位于同一目录中的图像文件），然后将请求模式保存在一个变量中：

+ +

In the following snippet, we create a new request using theconstructor (for an image file in the same directory as the script), then save the request mode in a variable:

+ +
var myRequest = new Request('flowers.jpg');
+var myMode = myRequest.mode; // returns "cors" by default
+ +

规范

+ + + + + + + + + + + + + + +
规范状态备注
{{SpecName('Fetch','#dom-request-mode', 'mode')}}{{Spec2('Fetch')}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("api.Request.mode")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/api/request/request/index.html b/files/zh-cn/web/api/request/request/index.html new file mode 100644 index 0000000000..369f8d4e7f --- /dev/null +++ b/files/zh-cn/web/api/request/request/index.html @@ -0,0 +1,158 @@ +--- +title: Request() +slug: Web/API/Request/Request +tags: + - API + - Fetch + - Reference + - request + - 实验性功能 + - 构造函数 +translation_of: Web/API/Request/Request +--- +

{{APIRef("Fetch")}}{{ SeeCompatTable() }}

+ +

Request() 构造器创建一个新的{{domxref("Request")}} 对象。

+ +

语法

+ +
var myRequest = new Request(input[, init]);
+ +

参数

+ +
+
input
+
定义你想要fetch的资源。可以是下面两者之一: +
    +
  • 一个直接包含你希望 fetch 的资源的 URL 的 {{domxref("USVString")}}。
    • +
  • 一个 {{domxref("Request")}} 对象。请注意以下行为更新，以在保留安全性的同时使构造函数不太可能引发异常： +
      +
    • 如果此对象存在于构造函数调用的另一个起源上，则将除去{{domxref("Request.referrer")}}。
      • +
    • 如果此对象的导航为 {{domxref("Request.mode")}}，则mode将转换为same-origin。
      • +
    +
    • +
+
+
init {{optional_inline}}
+
一个可选对象，包含希望被包括到请求中的各种自定义选项。可用的选项如下： +
    +
  • method: 请求的方法，例如：GET, POST。
    • +
  • headers: 任何你想加到请求中的头，其被放在{{domxref("Headers")}}对象或内部值为{{domxref("ByteString")}} 的对象字面量中。
    • +
  • body: 任何你想加到请求中的body，可以是{{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, 或 {{domxref("USVString")}}对象。注意GET 和 HEAD请求没有body。
    • +
  • mode: 请求的模式, 比如 cors, no-cors, same-origin, 或 navigate。默认值为 cors。
    • +
  • credentials: 想要在请求中使用的credentials：: omit, same-origin, 或 include。默认值应该为omit。但在Chrome中，Chrome 47 之前的版本默认值为 same-origin ，自Chrome 47起，默认值为include。
    • +
  • cache: 请求中想要使用的 cache mode 
    • +
  • redirect: 对重定向处理的模式： follow, error, or manual。在Chrome中，Chrome 47 之前的版本默认值为 manual ，自Chrome 47起，默认值为follow。
    • +
  • referrer: 一个指定了no-referrer, client, 或一个 URL的 {{domxref("USVString")}} 。默认值是about:client。
    • +
  • integrity: 包括请求的 subresource integrity 值 (e.g., sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).
    • +
+
+
+ +

Errors

+ + + + + + + + + + + + + + +
TypeDescription
TypeError自 Firefox 43后, 若URL有credentials，Request() 会抛出TypeError , 例如http://user:password@example.com。
+ +

Example

+ +

在我们的获取请求示例 Fetch Request example  (see Fetch Request live) 中，我们使用构造函数创建一个新的Request对象, 然后使用 {{domxref("GlobalFetch.fetch")}} 发送请求. 由于我们正在获取图像, 我们在响应上运行 {{domxref("Body.blob")}} 以为其提供正确的 MIME 类型，以便对其进行正确处理, 然后为其创建一个 Object URL，并将其显示在 {{htmlelement("img")}} 元素中。

+ +
var myImage = document.querySelector('img');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest).then(function(response) {
+  return response.blob();
+}).then(function(response) {
+  var objectURL = URL.createObjectURL(response);
+  myImage.src = objectURL;
+});
+ +

在Fetch Request with init example (参见 Fetch Request init live) 我们做了同样的事情，只不过我们在调用fetch()时，还传递进了一个 init 对象：

+ +
var myImage = document.querySelector('img');
+
+var myHeaders = new Headers();
+myHeaders.append('Content-Type', 'image/jpeg');
+
+var myInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg',myInit);
+
+fetch(myRequest).then(function(response) {
+  ...
+});
+ +

注意你也可以把 init 对象作为参数传递到fetch调用中来达到同样的效果。如下：

+ +
fetch(myRequest,myInit).then(function(response) {
+  ...
+});
+ +

也可以使用在init中使用对象字面量作为headers。

+ +
var myInit = { method: 'GET',
+               headers: {
+                   'Content-Type': 'image/jpeg'
+               },
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg', myInit);
+
+ +

也可以把 {{domxref("Request")}} 对象再作参数传递进 Request() 构造器来创建一个请求的副本（就像调用{{domxref("Request.clone","clone()")}}一样）。

+ +
+
var copy = new Request(myRequest);
+
+
+ +
+

Note: This last usage is probably only useful in ServiceWorkers.

+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-request','Request()')}}{{Spec2('Fetch')}}
+ +

浏览器兼容性

+ +

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

+ +

参见

+ + diff --git a/files/zh-cn/web/api/request/url/index.html b/files/zh-cn/web/api/request/url/index.html new file mode 100644 index 0000000000..de2a6d17f1 --- /dev/null +++ b/files/zh-cn/web/api/request/url/index.html @@ -0,0 +1,113 @@ +--- +title: Request.url +slug: Web/API/Request/url +translation_of: Web/API/Request/url +--- +
{{APIRef("Fetch")}}{{SeeCompatTable}}
+ +

The url read-only property of the {{domxref("Request")}} interface contains the URL of the request.

+ +

句法

+ +
var myURL = request.url;
+ +

Value

+ +

A {{domxref("USVString")}} indicating the url of the request.

+ +

举例

+ +

In the following snippet, we create a new request using the {{domxref("Request.Request()")}} constructor (for an image file in the same directory as the script), then save the url of the request in a variable:

+ +
var myRequest = new Request('flowers.jpg');
+var myURL = myRequest.url; // "http://mdn.github.io/fetch-examples/fetch-request/flowers.jpg"
+ +

特性

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

浏览器兼容性

+ +

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

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