codecamp

WindowOrWorkerGlobalScope接口方法:fetch()

fetch()方法

WindowOrWorkerGlobalScope mixin 的 fetch() 方法启动从网络获取资源的过程。这将返回一个 promise,它解析为表示对请求的响应的 Response 对象。

WorkerOrGlobalScope 由 Window 和 WorkerGlobalScope 实现的,这意味着该 fetch() 方法是在几乎可以在其中获取资源的任何上下文中都可用。

当遇到网络错误时。一个 fetch() 承诺拒绝使用 TypeError,虽然这通常意味着权限问题或类似的情况。准确检查成功的 fetch() 将包括检查 promise 是否解决,然后检查该 Response.ok 属性的值为 true。HTTP 状态为404并不构成网络错误。

该fetch()方法由内容安全策略的 connect-src 指令控制略,而不是它的检索资源的指令。

注意:该 fetch() 方法的参数与 Request() 构造函数的参数相同。

fetch()方法语法

Promise <Response> fetch(input [,init]);

fetch()方法参数

input
这定义了您想要获取的资源。这可以是:
  • 一个USVString,它包含要获取资源的直接 URL,一些浏览器接受blob:data:作为方案。
  • 一个Request对象。
init 可选的
包含要应用于请求的任何自定义设置的选项对象。可能的选项是:
  • method:请求方法,例如GETPOST
  • headers:您想添加到您的请求中的任何标题,包含在Headers对象或带有ByteString值的对象文本中。
  • body:您要添加到您的请求的任何 body:这可以是一个BlobBufferSourceFormDataURLSearchParams,或USVString对象。请注意,使用GET或者HEAD方法的请求不能有一个 body。
  • mode:该模式下,你要使用的要求,例如corsno-corssame-origin
  • credentials:请求凭据要使用的要求:omitsame-origininclude。要为当前域自动发送Cookie,必须提供此选项。从Chrome 50开始,此属性还需要一个FederatedCredential实例或一个PasswordCredential实例。
  • cache:您要使用该请求的缓存模式defaultno-storereloadno-cacheforce-cacheonly-if-cached
  • redirect:要使用的重定向模式:follow(自动跟随重定向),error(如果发生重定向时发生错误则中止)或manual(手动重定向处理)。在Chrome中默认是follow (在Chrome 47之前默认manual)。
  • referrerUSVString指定no-referrer,  client或URL。默认是client
  • referrerPolicy:指定引用者HTTP头的值。可以是一个no-referrerno-referrer-when-downgradeoriginorigin-when-cross-originunsafe-url
  • integrity:包含请求的子资源完整性值(例如,sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=)。
  • keepalive:该keepalive选项可用于允许请求超出页面。使用该keepalive标志提取是Navigator.sendBeacon()API 的替代品。 
  • signal:一个AbortSignal对象实例;允许您与获取请求进行通信,并在需要时通过AbortController

fetch()方法返回值

fetch()方法返回一个 Promise,它解析为一个 Response 对象。

fetch()方法异常

类型描述
AbortError该请求被中止(使用AbortController.abort())。
TypeError自Firefox 43以后,如果URL具有凭据,fetch()将会抛出TypeError,例如http://user:password@example.com

fetch()方法示例

在我们的 Fetch Request 示例中,我们使用相关的构造函数创建一个新 Request 对象,然后使用 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 和 Request 获取请求示例之后,我们做了同样的事情,只不过我们在调用 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');

fetch(myRequest,myInit).then(function(response) {
  ... 
});

请注意,您也可以将 init 对象与 Request 构造函数一起传递以获得相同的效果,例如:

var myRequest = new Request('flowers.jpg', myInit);

也可以在 init 中使用对象文本作为 headers:

var myInit = { method: 'GET',
               headers: {
                   'Content-Type': 'image/jpeg'
               },
               mode: 'cors',
               cache: 'default' };

var myRequest = new Request('flowers.jpg', myInit);

规范

规范状态注释
Fetch
在该说明书中的定义“fetch()”。
Living Standard
在最新的规范中的WindowOrWorkerGlobalScope部分定义。
Fetch
在该说明书中的定义“fetch()”。
Living Standard
初始定义
凭证管理1级(Credential Management Level 1
Working Draft
添加FederatedCredentialPasswordCredential实例作为init.credentials可能的值

浏览器兼容性

我们正在将兼容性数据转换为机器可读的JSON格式。

  • 电脑端
特征Chrome
Edge
Firefox(Gecko)
Internet Explorer
Opera
Safari(WebKit)
基本支持支持:42支持:38(14.14393)支持:34[1] 、39、52[2]不支持支持:29、28 [1]支持:10.1
流式响应 body支持:43支持:38(14.14393)支持:57不支持
支持:29支持:10.1
支持  blob:data:支持:48不支持不支持
referrerPolicy支持:52支持不支持
支持:39
signal支持:57不支持
不支持 
  • 移动端

特征AndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
基本支持不支持
支持:42支持:14支持:52.0[2]不支持
?支持:10.3支持:42
流式响应 body不支持
支持:43支持:14支持:57不支持
?支持:10.3支持:43
Support for blob: and data:不支持
支持:43不支持
?不支持
??支持:43
referrerPolicy不支持
支持:52??不支持
支持:39?支持:52
signal不支持
??支持:57.0不支持
?不支持
?

注释:

[1] API 是在首选项后面实现的。

[2] fetch() 现在在 WindowOrWorkerGlobalScope mixin 上定义。

WindowOrWorkerGlobalScope接口方法:createImageBitmap()
WindowOrWorkerGlobalScope接口方法:setInterval()
温馨提示
下载编程狮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; }