Request()

Experimental

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

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

语法

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

参数

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

浏览器兼容性

BCD tables only load in the browser

参见