Request()

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

Request() 构造器创建一个新的Request 对象。

语法

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

参数

input
定义你想要fetch的资源。可以是下面两者之一:
  • 一个直接包含你希望 fetch 的资源的 URL 的 USVString
  • 一个 Request 对象。请注意以下行为更新,以在保留安全性的同时使构造函数不太可能引发异常:
    • 如果此对象存在于构造函数调用的另一个起源上,则将除去Request.referrer
    • 如果此对象的导航为 Request.mode,则mode将转换为same-origin
init 可选
一个可选对象,包含希望被包括到请求中的各种自定义选项。可用的选项如下:
  • method: 请求的方法,例如:GET, POST。
  • headers: 任何你想加到请求中的头,其被放在Headers对象或内部值为ByteString 的对象字面量中。
  • body: 任何你想加到请求中的body,可以是Blob, BufferSource, FormData, URLSearchParams, 或 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-referrerclient, 或一个 URL的 USVString 。默认值是about:client
  • integrity: 包括请求的 subresource integrity 值 (e.g., sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).

Errors

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

Example

在我们的获取请求示例 Fetch Request example  (see Fetch Request live) 中,我们使用构造函数创建一个新的Request对象, 然后使用 GlobalFetch.fetch 发送请求. 由于我们正在获取图像, 我们在响应上运行 Body.blob 以为其提供正确的 MIME 类型,以便对其进行正确处理, 然后为其创建一个 Object URL,并将其显示在 <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);

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

var copy = new Request(myRequest);

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

规范

Specification Status Comment
Fetch
Request()
Living Standard

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Request() constructor
Experimental
Chrome Full support 41
Notes
Full support 41
Notes
Notes From Chrome 47, default values for the init argument's properties changed. mode defaults to same-origin (from no-cors). credentials defaults to include (from same-origin). redirect defaults to follow (from manual).
Edge Full support 15Firefox Full support 39
Full support 39
Full support 34
Disabled
Disabled From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 29
Full support 29
Full support 28
Disabled
Disabled From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari Full support 10.1WebView Android Full support 42
Notes
Full support 42
Notes
Notes From WebView 47, default values for the init argument's properties changed. mode defaults to same-origin (from no-cors). credentials defaults to include (from same-origin). redirect defaults to follow (from manual).
Chrome Android Full support 41
Notes
Full support 41
Notes
Notes From Chrome 47, default values for the init argument's properties changed. mode defaults to same-origin (from no-cors). credentials defaults to include (from same-origin). redirect defaults to follow (from manual).
Firefox Android Full support 39
Full support 39
Full support 34
Disabled
Disabled From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android Full support 29
Full support 29
Full support 28
Disabled
Disabled From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari iOS Full support 10.3Samsung Internet Android Full support 4.0
Full support 4.0
Full support 5.0
Notes
Notes Some default values for the init parameter changed in Samsung Internet 5.0. See the Properties section for details.
cross-origin referrer stripped out and navigate mode converted to same-origin when constructor created from existing Request object.
Experimental
Chrome Full support YesEdge Full support 15Firefox Full support 54IE No support NoOpera Full support YesSafari Full support 10.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android No support NoSafari iOS Full support 10.3Samsung Internet Android Full support Yes
navigate mode
Experimental
Chrome Full support 49Edge Full support 15Firefox Full support 46IE No support NoOpera Full support YesSafari Full support 10.1WebView Android No support NoChrome Android Full support 49Firefox Android Full support YesOpera Android No support NoSafari iOS Full support 10.3Samsung Internet Android Full support 5.0
Send ReadableStream in request body
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera ? Safari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
referrer init option
Experimental
Chrome ? Edge Full support 15Firefox Full support 47IE No support NoOpera Full support YesSafari Full support 10.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android No support NoSafari iOS Full support 10.3Samsung Internet Android Full support Yes
Consume response body as a ReadableStream
Experimental
Chrome Full support 43Edge Full support ≤79Firefox Full support 65
Full support 65
Full support 57
Disabled
Disabled From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera ? Safari No support NoWebView Android Full support 43Chrome Android Full support 43Firefox Android Full support 65
Full support 65
Full support 57
Disabled
Disabled From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS Full support 10.3Samsung Internet Android Full support 4.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

参见