MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

Request()

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

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

语法

var myRequest = new Request(input, init);

参数

input
定义你想要fetch的资源。可以是下面两者之一:
  • 一个直接包含你希望fetch的资源的URL的 USVString
  • 一个 Request 对象.
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。但在Chrome中,Chrome 47 之前的版本默认值为 no-cors ,自Chrome 47起,默认值为same-origin。
  • 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 。默认值是client.
  • integrity: 包括请求的 subresource integrity 值 (e.g., sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).

Errors

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

Example

In our Fetch Request example (see Fetch Request live) we create a new Request object using the constructor, then fetch it using a GlobalFetch.fetch call. Since we are fetching an image, we run Body.blob on the response to give it the proper MIME type so it will be handled properly, then create an Object URL of it and display it in an <img> element.在我们的Fetch Request example (参见 Fetch Request live)中,我们使用构造器创建了一个新的Request对象,然后通过对GlobalFetch.fetch的调用,fetch到了结果。

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  

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 42.0 [1]
 
39 (39) [2] 未实现

29 [3]

未实现
Streaming response body 43.0 ? ? ? ?
navigate mode 49.0 46 (46) 未实现 ? 未实现
referrer init option ? 47 (47) ? ? ?
Feature Android Android Webview Firefox Mobile (Gecko) Firefox OS (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support 未实现 42 [1] ? 未实现 未实现 未实现 未实现 42.0 [1]
Streaming response body 未实现 43.0  ? ? ? ? ? 43.0 
navigate mode 未实现 未实现 ? 未实现 未实现 未实现 未实现 49.0 
referrer init option ? ? ? ? ? ? ? ?
  • [1] Some default values for the init parameter changed in Chrome 47. See the Properties section for details. 
  • [2] Behind a preference in 34.
  • [3] Behind a preference in 28.

参见

文档标签和贡献者

 此页面的贡献者: TiaossuP
 最后编辑者: TiaossuP,