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-referrer, client, 或一个 URL的 USVString 。默认值是client.
• integrity: 包括请求的 subresource integrity 值 (e.g., sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).

Errors

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

规范

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

• [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.

参见

• ServiceWorker API
• HTTP access control (CORS)
• HTTP