Fetch API介绍

本文介绍Fetch API的基础概念,参考自fetch.spec.whatwg.org

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!"))
  })

发表评论

电子邮件地址不会被公开。 必填项已用*标注

You must enable javascript to see captcha here!