fetch()是相对低级的获取资源的API。它比XMLHttpRequest覆盖面稍微广一些。
示例：
fetch()方法很明确是获取一个资源，然后提取它的内容为Blob类型：
fetch("/music/pk/altes-kamuffel.flac")
.then(res => res.blob()).then(playBlob)
如果你只是关心记录响应头：
fetch("/", {method:"HEAD"})
.then(res => log(res.headers.get("strict-transport-security")))
如果你想要检查一个特别的响应头，然后处理跨域资源的响应：
fetch("https://pk.example/berlin-calling.json", {mode:"cors"})
.then(res => {
if(res.headers.get("content-type") &&
res.headers.get("content-type").toLowerCase().indexOf("application/json") >= 0) {
return res.json()
} else {
throw new TypeError()
}
}).then(processJSON)
如果你想要使用URL查询参数：
var url = new URL("https://geo.example.org/api"),
params = {lat:35.696233, long:139.570431}
Object.keys(params).forEach(key => url.searchParams.append(key, params[key]))
fetch(url).then(/* … */)
如果你想要逐步的收到数据：
function consume(reader) {
var total = 0
return pump()
function pump() {
return reader.read().then(({done, value}) => {
if (done) {
return
}
total += value.byteLength
log(`received ${value.byteLength} bytes (${total} bytes in total)`)
return pump()
})
}
}
fetch("/music/pk/altes-kamuffel.flac")
.then(res => consume(res.body.getReader()))
.then(() => log("consumed the entire body without keeping the whole thing in memory!"))
.catch(e => log("something went wrong: " + e))
Headers类
Headers对象有一个头部列表，初始化为空。
Headers对象也有一个guard，值为“immutable”、“request”、“request-no-cors”、“response”或“none”。
提示：“immutable”为server workers而存在。
Headers类包含以下方法：
append(name, value)：向Headers对象中添加请求头键值对
delete(name)：从Headers对象中删除某个名称
get(name)：从Headers对象中获取某个名称
has(name)：判断Headers对象中是否存在某个名称
set(name, value)：设置Headers对象的某个键值对
Body混合类型
body支持以下数据类型：
arrayBuffer、blob、formData、json、text
Request类
Request类包含以下属性：
method：请求方法
url：请求URL
headers：相关联的Headers对象
type：请求类型（空字符串, “audio”, “font”, “image”, “script”, “style”, “track”, 或”video”）
Destination：请求目标（空字符串, “document”, “embed”, “font”, “image”, “manifest”, “media”, “object”, “report”, “script”, “serviceworker”, “sharedworker”, “style”, “worker”, 或 “xslt”）
referrer：请求来源
referrerPolicy：referrer策略
mode：请求模式（”same-origin”, “cors”, “no-cors”, “navigate”,或 “websocket”）
credentials：认证模式（”omit”, “same-origin”, 或”include”）
cache：缓存模式（”default”, “no-store”, “reload”, “no-cache”, “force-cache”, 或”only-if-cached”）
redirect：重定向模式（”follow”, “error”,或 “manual”）
integrity：完整的数据类型
方法：
clone()：克隆Request对象
Response类
属性：
type：响应类型（”basic”, “cors”, “default”, “error”, “opaque”, 或”opaqueredirect”）
url：排除fragment部分的url
redirected：重定向的url列表
status：http状态码
ok：状态码为200~299，否则为false
statusText：状态文本信息
headers：包含头部信息的Headers对象
body：相关联的响应体内容
方法：
clone()：克隆Response对象
垃圾回收
示例：
用户代理可以终止fetch，由于它不能被引用：
fetch("https://www.example.com/")
用户代理不能终止fetch，由于它被promise引用：
window.promise = fetch("https://www.example.com/")
用户代理可以终止fetch，因为相关的body不能观测到：
window.promise = fetch("https://www.example.com/").then(res => res.headers)
用户代理可以终止fetch，因为结果不可见：
fetch("https://www.example.com/").then(res => res.body.getReader().closed)
用户代理不能终止fetch，因为可以通过注册一个处理器来得到结果（被promise变量引用）：
window.promise = fetch("https://www.example.com/")
.then(res => res.body.getReader().closed)
用户代理不能终止fetch，因为结果会通过注册的处理器获取：
fetch("https://www.example.com/")
.then(res => {
res.body.getReader().closed.then(() => console.log("stream closed!"))
})