专栏首页Czy‘s BlogJs中fetch方法

Js中fetch方法

Js中fetch方法

fetch()方法定义在Window对象以及WorkerGlobalScope对象上,用于发起获取资源的请求,其返回一个Promise对象,这个Promise对象会在请求响应后被resolve,并传回Response对象。

描述

Promise<Response> fetch(input[, init])

input: 定义要获取的资源,其值可以是:

  • 一个字符串,包含要获取资源的URL,一些浏览器会接受 blobdata作为schemes
  • 一个Request对象。

init: 一个配置项对象,包括所有对请求的设置。可选的参数有:

  • method: 请求使用的方法,如GETPOST
  • headers: 请求的头信息,形式为Headers的对象或包含ByteString值的对象字面量。
  • body: 请求的body信息:可能是一个BlobBufferSourceFormDataURLSearchParams或者USVString对象,注意GETHEAD方法的请求不能包含body信息。
  • mode: 请求的模式,如corsno-cors或者same-origin
  • credentials: 请求的credentials,如omitsame-origin或者include,为了在当前域名内自动发送cookie,必须提供这个选项。
  • cache: 请求的cache模式: defaultno-storereloadno-cacheforce-cache或者only-if-cached
  • redirect: 可用的redirect模式: follow自动重定向,error如果产生重定向将自动终止并且抛出一个错误,或者manual手动处理重定向。
  • referrer: 一个USVString可以是no-referrerclient或一个URL,默认是 client
  • referrerPolicy: 指定了HTTP头部referer字段的值,可能为以下值之一: no-referrerno-referrer-when-downgradeoriginorigin-when-cross-originunsafe-url
  • integrity: 包括请求的subresource integrity值,例如: sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=

返回一个Promiseresolve时回传Response对象。

fetch与jQuery.ajax区别

  • 当接收到一个代表错误的HTTP状态码时,从fetch()返回的Promise不会被标记为 reject, 即使响应的HTTP状态码是404500,其会将Promise状态标记为 resolve,但是返回的Promise会将resolve的返回值的ok属性设置为false,仅当网络故障时或请求被阻止时,才会标记为reject
  • fetch()不会接受跨域cookies,你也不能使用fetch()建立起跨域会话,其他域的Set-Cookie头部字段将会被无视。
  • fetch()不会发送cookies,除非使用了credentials的初始化选项。

实例

发起请求

发起一个简单的资源请求,对于fetch请求返回一个Promise对象,这个Promise对象会在请求响应后被resolve,并传回Response对象。

window.fetch("https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js")
.then(res => console.log(res))

设置参数

通过init配置对象设置参数,可以设置methodheadersbodymodecredentialscacheredirectreferrerreferrerPolicyintegrity

var headers = new Headers({
    "accept": "application/javascript" 
});
headers.append("accept", "application/xml");
headers.set("user-agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.92 Safari/537.36");
window.fetch("https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js", {
    method: "GET",
    headers: headers,
    cache: 'no-cache',
})
.then(res => console.log(res))

Headers对象

  • Headers.append(): 给现有的header添加一个值, 或者添加一个未存在的header并赋值。
  • Headers.delete(): 从Headers对象中删除指定header
  • Headers.entries(): 以迭代器的形式返回Headers对象中所有的键值对。
  • Headers.get(): 以ByteString的形式从Headers对象中返回指定header的全部值。
  • Headers.has(): 以布尔值的形式从Headers对象中返回是否存在指定的header
  • Headers.keys(): 以迭代器的形式返回Headers对象中所有存在的header名。
  • Headers.set(): 替换现有的header的值, 或者添加一个未存在的header并赋值。
  • Headers.values(): 以迭代器的形式返回Headers对象中所有存在的header的值。

响应处理

通过Response对象对响应的数据作处理,包括获取响应状态以及响应体的处理等操作。

window.fetch("https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js")
.then(res => res.text())
.then(data => console.log(data))

Response对象

Response对象的相关属性与方法:

  • Response.headers: 只读,包含此Response所关联的Headers对象。
  • Response.ok: 只读,包含了一个布尔值,标示该Response成功,HTTP状态码的范围在 200-299
  • Response.redirected: 只读,表示该Response是否来自一个重定向,如果是的话,它的URL列表将会有多个条目。
  • Response.status: 只读,包含Response的状态码。
  • Response.statusText: 只读,包含了与该Response状态码一致的状态信息。
  • Response.type: 只读,包含Response的类型,例如basiccors
  • Response.url: 只读,包含ResponseURL
  • Response.useFinalURL: 包含了一个布尔值,来标示这是否是该Response的最终URL
  • Response.clone(): 创建一个Response对象的克隆。
  • Response.error(): 返回一个绑定了网络错误的新的Response对象。
  • Response.redirect(): 用另一个URL创建一个新的Response

Response实现了Body接口,相关属性与方法可以直接使用:

  • Body.body: 只读,一个简单的getter,用于暴露一个ReadableStream类型的body内容。
  • Body.bodyUsed: 只读,包含了一个布尔值来标示该Response是否读取过Body
  • Body.arrayBuffer(): 读取Response对象并且将它设置为已读,并返回一个被解析为ArrayBuffer格式的Promise对象,Responses对象被设置为了stream的方式,所以它们只能被读取一次。
  • Body.blob(): 读取Response对象并且将它设置为已读,并返回一个被解析为Blob格式的Promise对象。
  • Body.formData(): 读取Response对象并且将它设置为已读,并返回一个被解析为FormData格式的Promise对象。
  • Body.json(): 读取Response对象并且将它设置为已读,并返回一个被解析为JSON格式的Promise对象。
  • Body.text(): 读取Response对象并且将它设置为已读,并返回一个被解析为USVString格式的Promise对象。

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://segmentfault.com/a/1190000012740215
https://developer.mozilla.org/zh-CN/docs/Web/API/Headers
https://developer.mozilla.org/zh-CN/docs/Web/API/Response
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 中介者模式

    中介者模式Mediator Pattern用一个中介对象来封装一系列的对象交互,中介者使各对象不需要显式地相互引用,从而使其耦合松散,降低多个对象和类之间的通信...

    WindrunnerMax
  • 装饰器模式

    装饰器模式Decorator Pattern允许向一个现有的对象添加新的功能,同时又不改变其结构,这种类型的设计模式属于结构型模式,是作为现有的类的一个包装。这...

    WindrunnerMax
  • SVG基础

    SVG可缩放矢量图形Scalable Vector Graphics是基于可扩展标记语言XML,用于描述二维矢量图形的一种图形格式。SVG严格遵从XML语法,并...

    WindrunnerMax
  • Foundation-NSCache

    第二步 使用NSCache 把对象缓存起来,evictsObjectsWithDiscardedContent 这个属性必须设置为true

    酷走天涯
  • windows远程桌面管理软件默认端口修改

        很多黑客用软件每天都在扫描开放了3389端口的服务器,为了让自己的服务器减少受到黑客攻击的机会,大多数站长都会选择修改掉这个默认的3389端口。

    it妹
  • XFS文件系统LVM分区在线扩容

    之前介绍是针对ext4文件系统LVM分区在线扩容的,下面介绍XFS文件系统的LVM分区在线扩容操作

    yuanfan2012
  • ZooKeeper 会话

    在 ZooKeeper 中,客户端连接,是指客户端和服务器之间的 TCP 长连接。

    happyJared
  • 《王者荣耀》2亿用户量的背后:产品定位、技术架构、网络方案等

    用户1263954
  • Scala学习笔记

    3、方法的声明格式 def(x:Int,y:Int) : Int ={} 最后一个冒号后面是返回类型,不加则没有返回值

    用户3003813
  • pymodbus使用介绍

    当我们写程序写的多一些时,自然就会使用第三方库,在使用过程中注意规避掉一些坑即可。

    用户5908113

扫码关注云+社区

领取腾讯云代金券