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

Js中fetch方法的更多相关文章

  1. 【转载】JS中bind方法与函数柯里化

    原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情 ...

  2. 原生JS中apply()方法的一个值得注意的用法

    今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...

  3. js中apply方法的使用

    js中apply方法的使用   1.对象的继承,一般的做法是复制:Object.extend prototype.js的实现方式是: Object.extend = function(destinat ...

  4. paip.编程语言方法重载实现的原理及python,php,js中实现方法重载

    paip.编程语言方法重载实现的原理及python,php,js中实现方法重载 有些语言,在方法的重载上,形式上不支持函数重载,但可以通过模拟实现.. 主要原理:根据参数个数进行重载,或者使用默认值 ...

  5. js中settimeout方法加参数

    js中settimeout方法加参数的使用. 简单使用看w3school  里面没有参数调用,  例子: <script type="text/javascript"> ...

  6. js中split()方法得到的数组长度

    js 中split(",")方法通过 ”,“ 分割字符串, 如果字符串中没有 “,” , 返回的是字符串本身 var str = “abc”://分隔符个数为0 var newSt ...

  7. 关于JS中的方法是否加括号的问题

    js中的方法什么时候加括号什么时候不加括号呢,我们有时候经常就搞不清楚,记住下面这几点就好理解了. 1.函数做参数时都不要加括号. function fun(a){ alert(a); } funct ...

  8. js中的方法如何传入多个参数

    js中的方法如何传入多个参数 $(function () { let parameter1 = 1; let parameter2 = 'Hello World'; let parameter3 = ...

  9. js 中的方法注入(aop)

    js 中的方法注入 java中很多框架支持 apo 的注入, js中也可以类似的进行实现 主要是通过扩展js中方法的老祖 Function 对象来进行实现. Function.prototype.af ...

  10. JS高级面试题思路(装箱和拆箱、栈和堆、js中sort()方法、.js中Date对象中的getMounth() 需要注意的、开发中编码和解码使用场景有哪些)

    1.装箱和拆箱: 装箱:把基本数据类型转化为对应的引用数据类型的操作: var num = 123 // num var objNum = new Num(123) // object console ...

随机推荐

  1. [粘贴]关于preparedStatement

    作者:wuxinliulei链接:https://www.zhihu.com/question/37043270/answer/83914933来源:知乎著作权归作者所有.商业转载请联系作者获得授权, ...

  2. [转帖]KingbaseES wal(xlog) 日志清理故障恢复案例

    https://www.cnblogs.com/kingbase/p/16266365.html 案例说明:在通过sys_archivecleanup工具手工清理wal日志时,在control文件中查 ...

  3. [转帖]CentOS-7-x86_64-DVD-2009 rpm包列表(centos7.9)

    https://www.cnblogs.com/hiyang/p/14803391.html 文件数 4071 个,共3.8G 复制389-ds-base-1.3.10.2-6.el7.x86_64. ...

  4. [转帖]探索惊群 ③ - nginx 惊群现象

    https://wenfh2020.com/2021/09/29/nginx-thundering-herd/    nginx  kernel 本文将通过测试,重现 nginx(1.20.1) 的惊 ...

  5. [转帖]发布即巅峰!万字长文:Java性能调优六大工具:MAT内存分析工具

    jianshu.com/p/4ed3dd8b7b83 MAT是MemoryAnalyzerTool的简称,它是一款功能强大的Java堆内存分析器,可以用于查找内存泄漏以及查看内存消耗情况.MAT是 基 ...

  6. [转帖]Linux-文本处理三剑客awk详解+企业真实案例(变量、正则、条件判断、循环、数组、分析日志)

    https://developer.aliyun.com/article/885607?spm=a2c6h.24874632.expert-profile.313.7c46cfe9h5DxWK 简介: ...

  7. [转帖]多CPU && 多核CPU | 多进程 && 多线程 | 并行 && 并发

    https://cloud.tencent.com/developer/article/1886157?areaSource=&traceId=   文章目录 区分 多CPU &&am ...

  8. 京东云开发者|提高IT运维效率,深度解读京东云AIOps落地实践

    基于深度学习对运维时序指标进行异常检测,快速发现线上业务问题 时间序列的异常检测是实际应用中的一个关键问题,尤其是在 IT 行业.我们没有采用传统的基于阈值的方法来实现异常检测,而是通过深度学习提出了 ...

  9. 【解决一个小问题】macbook m2 上交叉编译 gozstd

    作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu Github 公众号:一本正经的瞎扯 已知 zstd 是一个优秀的压缩库,gozstd封装了这个 ...

  10. Gorm日志设置

    Logger Gorm提供了一个默认的logger实现,默认情况下日志数据级别为warn,同时输出慢SQL: Default = New(log.New(os.Stdout, "\r\n&q ...