其他分享
首页 > 其他分享> > fetch

fetch

作者:互联网

优点:

  1. 用起来比XMLHttpRequest更现代化(方便)
    缺点:
  2. 只能异步,XHR可以选择异步或者同步。但是可以通过async/await自己手动实现
  3. fetch是有兼容问题的。IE系列是完全不支持的,主流浏览器的早起版本也不支持,所以如果在项目中使用需要做兼容方案处理。
  4. fetch 不管请求处理成功还是失败,都会触发promise的resolve状态回调。只有当网络故障导致请求发送失败或者跨域的时候才会触发reject的逻辑。但是我们可以通过response 对象的ok是否是true来判断是否是真正的成功。

接收两个参数input(必选,即url),init(可选)

init是个对象,允许下面键值

body 请求体,默认为空,可选值:Blob,BufferSource,FormData,URLSearchParams,ReadableStream,String中一种的实例
cache 缓存类型,默认"default",可选值:default,no-store,reload,no-cache,force-cache,only-if-cached
credentials 和XHR的withCredentials是相似的东西默认"same-origin",可选值:omit,same-origin,include
headers 用于指定头部,必须是Header对象的实例,或者包含字符串格式键值对的对象
integrity 默认"",用于强制子资源完整性
keepalive 默认false,用于指示浏览器是否允许请求存在时间超出页面生命周期,该属性为true的fetch请求可以替代Navigator.sendBeacon(),在页面卸载后任然会继续未完成的请求。
method 默认"GET"
mode 用于指定请求模式,默认"cors",可选值:cors,no-cors,same-origin,navigatoe
redirect 用于指定如何重定向,默认"fllow",可选值:fllow,erroe,mannual
referrer 用于指定http的referrer头部,默认"client/about:client",可选值:no-referrer,client/about:client,伪造的和客户端同源的url
referrerPolicy 用于指定http的referrer头部,默认"no-referrer-when-downgrade",可选值:no-referrer,no-referrer-when-downgrade,origin,same-originstrict-origin,origin-when-cross-origin,strict-origin-when-cross-origin,unsafe-url
signal 用于通过AbortController终端进行的fetch请求,默认为未关联控制器的AbortSignal,值必须是AbortSignal实例
let body = JSON.stringify({...})
fetch('/url', {
  body,
  cache: 'no-cache', 
  credentials: 'same-origin', 
  headers: {
    'user-agent': 'Mozilla/4.0 MDN Example',
    'content-type': 'application/json'
  },
  method: 'POST', //get请求不允许带body
  mode: 'cors', 
  redirect: 'follow',
  referrer: 'no-referrer',
})

标签:origin,no,referrer,默认,可选值,fetch
来源: https://www.cnblogs.com/Lilc20201212/p/15941363.html