Js中fetch方法
Js中fetch方法
fetch()
方法定义在Window
对象以及WorkerGlobalScope
对象上,用于发起获取资源的请求,其返回一个Promise
对象,这个Promise
对象会在请求响应后被resolve
,并传回Response
对象。
描述
Promise<Response> fetch(input[, init])
input
: 定义要获取的资源,其值可以是:
- 一个字符串,包含要获取资源的
URL
,一些浏览器会接受blob
和data
作为schemes
。 - 一个
Request
对象。
init
: 一个配置项对象,包括所有对请求的设置。可选的参数有:
method
: 请求使用的方法,如GET
、POST
。headers
: 请求的头信息,形式为Headers
的对象或包含ByteString
值的对象字面量。body
: 请求的body
信息:可能是一个Blob
、BufferSource
、FormData
、URLSearchParams
或者USVString
对象,注意GET
或HEAD
方法的请求不能包含body
信息。mode
: 请求的模式,如cors
、no-cors
或者same-origin
。credentials
: 请求的credentials
,如omit
、same-origin
或者include
,为了在当前域名内自动发送cookie
,必须提供这个选项。cache
: 请求的cache
模式:default
、no-store
、reload
、no-cache
、force-cache
或者only-if-cached
。redirect
: 可用的redirect
模式:follow
自动重定向,error
如果产生重定向将自动终止并且抛出一个错误,或者manual
手动处理重定向。referrer
: 一个USVString
可以是no-referrer
、client
或一个URL
,默认是client
。referrerPolicy
: 指定了HTTP
头部referer
字段的值,可能为以下值之一:no-referrer
、no-referrer-when-downgrade
、origin
、origin-when-cross-origin
、unsafe-url
。integrity
: 包括请求的subresource integrity
值,例如:sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=
。
返回一个Promise
,resolve
时回传Response
对象。
fetch与jQuery.ajax区别
- 当接收到一个代表错误的
HTTP
状态码时,从fetch()
返回的Promise
不会被标记为reject
, 即使响应的HTTP
状态码是404
或500
,其会将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
配置对象设置参数,可以设置method
、headers
、body
、mode
、credentials
、cache
、redirect
、referrer
、referrerPolicy
、integrity
。
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
的类型,例如basic
、cors
。Response.url
: 只读,包含Response
的URL
。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方法相关推荐
- js ES6 fetch 方法
目录 一.fetch 概述 二.fetch 的语法 1.实现一个简单的 fetch 请求 2.fetch 方法介绍 (1).fetch 方法的第一个参数 (2).fetch 方法的第二个参数 (3). ...
- JS中toFixed()方法的问题及解决方案
JS中toFixed()方法的问题及解决方案 参考文章: (1)JS中toFixed()方法的问题及解决方案 (2)https://www.cnblogs.com/gushen/archive/201 ...
- js中toFixed方法的两个坑
js中toFixed方法的两个坑 toFixed返回结果是string,后续使用它计算会错误 toFixed返回结果可能出现负零-0.00 toFixed返回结果是string,后续使用它计算会错误 ...
- created写法_vue.js中created方法作用
这是它的一个生命周期钩子函数,就是一个vue实例被生成后调用这个函数.一个vue实例被生成后还要绑定到某个html元素上,之后还要进行编译,然后再插入到document中.每一个阶段都会有一个钩子函数 ...
- 【转载】JS中bind方法与函数柯里化
原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情 ...
- 前端开发:JS中join()方法的使用总结
前言 在前端开发过程中,对数组的数据进行处理也是比较常见的操作之一,而且对数组进行操作的频率远远大于对 对象进行操作,因此在开发过程中对于数组里面的数据进行处理是一项比较重要的技能,尤其是对于刚入行的 ...
- vue在created调用点击方法_vue.js中created方法的使用详解
这次给大家带来vue.js中created方法的使用详解,使用vue.js中created方法的注意事项有哪些,下面就是实战案例,一起来看一下. 这是它的一个生命周期钩子函数,就是一个vue实例被生成 ...
- js中eval方法的使用
2.js中eval方法的使用 eval可以执行传入的字符串,比如:eval("console.log('eval test!')"),控制台直接会输出"eval test ...
- JS中sort方法排序
JS中sort方法排序 一.数字排序(string类型) 二.数字排序(string类型和number类型) 三.混合排序(string.number和字母) 四.函数排序 五.数组对象排序 一.数字 ...
最新文章
- 电脑主板维修_自学电脑主板维修第45讲
- 利用Lucene.net搜索引擎进行多条件搜索的做法
- 解决windows远程(Telnet)最大连接数的问题
- JavaScript tips and tricks - 4
- 从Wasserstein距离、对偶理论到WGAN
- PHP-FPM 与 Nginx 的通信机制总结
- 通过进程ID获取基地址
- Springmvc,Spring MVC文件上传
- ubuntu18.04安装mysql数据库
- Windows10安装ubuntu 20双系统
- drupal php filter,Drupal A-Z and number filter
- shadow阴影属性
- python RE表达式规则剩余规则
- qt messagebox退出程序_Qt多线程创建
- cass小插件集合_CASS插件合集 - 下载 - 搜珍网
- IP地址归属地和手机号码归属地批量查询(单次支持500个以内,支持结果导出xls)
- JMS 消息传送模式、消息签收以及spring jmsTemplate配置
- java a的2次方_java-获取比a大,最接近a的2的次方的数(最小二次幂,位运算)
- C语言书籍阅读-读书笔记--《C专家编程》
- WPS怎么外链网页上的实时数据_数据收集、整理低效繁琐?WPS表单帮你轻松解决...