Js中fetch方法
时间:2022-07-24
本文章向大家介绍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
- React第三方组件4(状态管理之Reflux的使用①简单使用)
- React第三方组件3(状态管理之Flux的使用⑤异步操作)
- 使用yo-get下载视频网站视频或其
- React多页面应用3(webpack4 多页面实现)
- 洛谷P2345 奶牛集会
- React多页面应用2(webpack4 处理CSS及图片,引入postCSS,及图片处理等)
- React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)
- 洛谷P2345 奶牛集会
- P2880 [USACO07JAN]平衡的阵容Balanced Lineup
- Python黑客编程3网络数据监听和过滤
- React第三方组件6(状态管理之Mobx的使用⑤异步操作)
- 机器学习(五)使用Python和R语言从头开始理解和编写神经网络介绍目录神经网络背后的直观知识多层感知器及其基础知识什么是激活函数?前向传播,反向传播和训练次数(epochs)多层感知器全批量梯度下降
- 洛谷P2251 质量检测
- React第三方组件6(状态管理之Mobx的使用④TodoList下)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法