codecamp

Body接口:Request()构造函数

Request()构造函数

在Body接口中,该Request()构造函数用来创建一个新的Request对象。

Request() 语法

var myRequest = new Request(input,init);

Request() 参数

input
定义您想要获取的资源。这可以是:
  • 一个USVString包含要获取资源的直接URL。
  • 一个Request对象,有效地创建一个副本。请注意以下操作更新以保持安全性,同时使构造函数不太可能抛出异常:
    • 如果这个对象存在于构造函数调用的另一个起源中,则将Request.referrer除去。
    • 如果该对象具有navigateRequest.mode,该mode值被转换为same-origin
init(可选的)
包含要应用于请求的任何自定义设置的选项对象。可能的选项是:
  • method:请求方法,例如GETPOST
  • headers:你想添加到你的请求的任何头文件,包含在一个Headers对象或带有ByteString值的对象文本中。
  • body:您要添加到您的请求的任何body:这可以是一个BlobBufferSourceFormDataURLSearchParamsUSVStringReadableStream对象。请注意,使用GET或者HEAD方法的请求不能有一个主体。
  • mode:您要使用该请求的模式,例如corsno-corssame-originnavigate,默认是cors。在Chrome中,默认情况下是no-cors在Chrome 47之前,same-origin从Chrome 47开始。
  • credentials:请求凭据要使用的要求:omitsame-origininclude。默认是omit。在Chrome中,默认情况下是same-origin在Chrome 47之前,从Chrome 47开始默认为include
  • cache:您想要用于请求的缓存模式。
  • redirect:要使用的Redirect方式:followerrormanual。在Chrome中,默认情况下是manual在Chrome 47之前,从Chrome 47开始默认为follow
  • referrerUSVString指定no-referrerclient或URL;默认是client
  • integrity:包含请求的子资源完整性值(例如,sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=)。

异常错误

类型 描述
TypeError 自Firefox 43以来,如果URL具有证书(如http:// user:password@example.com),Request()将会引发TypeError。

Request() 构造函数示例

在我们的Fetch Request示例中(请参阅“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;
});

在我们的带有init例子的Fetch Request中(请参阅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);

注意:这最后一个用法可能只在ServiceWorkers中有用。

规范

规范 状态 注释
Fetch
在该说明书中“Request()”的定义。
Living Standard
 

浏览器兼容性

  • 电脑端
Feature
Chrome
Firefox(Gecko)
Edge
Opera
Safari(WebKit)
基本的支持
支持:42.0 [1] 
 
支持:39[2] 支持:15

支持:29 [3]

支持:10.1
body 可以是 ReadableStream 支持:43.0 不支持[4] 支持:15 支持:10.1
navigate 模式 支持:49.0 支持:46 支持:15 (是) 支持:10.1
referrer init选项 支持:47 支持:15 (是) 支持:10.1
从现有Request对象创建构造函数时,跨源referrer剥离和navigate模式被转换为same-origin (是) 支持:54 支持:15 (是) 支持:10.1
  • 移动端
Feature Android Android Webview Firefox Mobile (Gecko) Edge Opera Mobile Safari Mobile Chrome for Android
基本的支持 不支持 支持:42 [1] (是) 支持:15 不支持
支持:10.3 支持:42.0 [1]
body可以是ReadableStream 不支持
支持:43.0  不支持[4] 支持:15 ? 支持:10.3 支持:43.0 
navigate模式 不支持
不支持 (是) 支持:15 不支持
支持:10.3 支持:49.0 
referrer init 选项 不支持
(是) (是) 支持:15 ? 支持:10.3 (是)
跨源referrer剥离和 navigate模式被转换为 same-origin,当从现有的Request对象创建构造函数。 不支持
(是) (是) 支持:15 ? 支持:10.3 (是)

[1] 在Chrome 47中初始化参数的某些默认值已更改。有关详细信息,请参阅“属性(Properties)”部分。

[2]在版本34的首选项后。 

[3]在版本28的首选项后。 

[4]可读流当前在Firefox中启用,但隐藏在dom.streams.enabled和javascript.options.streamsprefs 后面。

Body接口执行者
Request属性:cache
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

Fetch API官方文档指南

Fetch API方法

WindowOrWorkerGlobalScope执行者:window

window属性

WindowOrWorkerGlobalScope执行者:WorkerGlobalScope

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }