fetch

2022/2/27 6:21:52

编程Tag： fetch 默认 No referrer 可选值 origin

本文主要是介绍fetch，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

优点：

用起来比XMLHttpRequest更现代化（方便）
缺点：
只能异步，XHR可以选择异步或者同步。但是可以通过async/await自己手动实现
fetch是有兼容问题的。IE系列是完全不支持的，主流浏览器的早起版本也不支持，所以如果在项目中使用需要做兼容方案处理。
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',
})

这篇关于fetch的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

fetch

接收两个参数input（必选，即url），init（可选）

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

相关编程文章