codecamp

开始学习Fetch API

Fetch API 提供了一个获取资源的接口(包括通过网络)。任何使用过 XMLHttpRequest 的人都会觉得很熟悉,但Fetch API 提供了一个更强大和更灵活的功能集。

Fetch API 概念和用法

Fetch提供了Request和Response对象(以及涉及网络请求的其他内容)的通用的定义。这将允许他们在将来需要的地方使用,无论是service worker,Cache API 和其他类似的事情,处理或修改请求和响应,或任何类型的用例,可能需要您产生自己的响应编程。

它还为CORS和HTTP源头语义等相关概念提供了定义,取代了其他地方的单独定义。

为了提出请求并获取资源,请使用该GlobalFetch.fetch方法。它在多个接口实现的,特别是Window和WorkerGlobalScope。这使得它几乎可以在任何你想要获取资源的上下文中使用。

该 fetch() 方法采用一个强制参数,即要获取的资源的路径。它返回一个promise,它解决了对该请求的Response,无论是否成功。您也可以选择传递一个init选项对象作为第二个参数。

一旦检索到Response,就有很多方法可以定义正文内容以及应该如何处理。

您可以使用Request()和Response()构造函数直接创建请求和响应,但是您不太可能直接执行此操作。相反,这些更有可能被创建为其他API操作的结果(例如,来自service worker的FetchEvent.respondWith)。

注意:了解有关使用 fetch 中的Fetch API 功能的更多信息,并在 Fetch 基本概念中学习概念。

中止 Fetch

浏览器已经开始为 AbortController 和 AbortSignal 接口(又名Abort API)添加实验支持,允许像 Fetch 和 XHR 操作,如果他们尚未完成将被中止。

Fetch 接口

GlobalFetch
包含用于获取资源的fetch()方法。
Headers
表示响应/请求标题,允许您查询它们并根据结果采取不同的操作。
Request
代表资源请求。
Response
表示对请求的响应。

Fetch mixin

Body
提供与响应/请求主体相关的方法,允许您声明其内容类型以及应该如何处理。

规范

规范状态注释
Fetch
Living Standard
Initial definition

浏览器兼容性

  • 电脑端
FeatureChrome
Edge
Firefox(Gecko)
IEOpera
Safari(WebKit)
基本的支持支持:42支持:14支持:39、34 [1] 、52[2]不支持支持:29 、28 [1]支持:10.1
ReadableStream 响应支持:43支持:14不支持[3]不支持不支持
  • 移动端
FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
基本的支持
支持:42支持:42支持支持不支持不支持支持:10.1
ReadableStream 响应支持:43支持:43支持不支持[3]不支持?不支持

表格中的角标解释:

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

[2]在Firefox 52之前,get()只返回指定头文件中的第一个值,getAll()返回所有的值。从52开始,get()现在返回所有值,并getAll()已被删除。

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

Fetch API基本概念
温馨提示
下载编程狮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; }