Fetch 是什么?
Fetch 是基于 Promise 的用于发送异步 HTTP 请求的浏览器 API,目前大部分浏览器都支持,除了 IE ,如果需要兼容 IE , GitHub 上有发布的 polyfill https://github.com/github/fetch ,使 Fetch API 可以在任何浏览器中使用。
语法说明
一共两个参数,第一个为 url 字符串类型,必传参数,第二个为配置项,对象类型,可选参数。\
Fetch API
一共包含四个对象,分别为: Headers
Body
Request
Response
\
fetch()
会返回一个 promise
。然后我们用 then()
方法编写处理函数来处理 promise
中异步返回的结果。
fetch(url, [{options}])
.then(response => response.json())
.then(data => console.log(data))
常用配置项说明
// 请求方式
method: "GET",
// 请求头headers
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
},
// 是否携带 cookie , omit: 从不发送cookies, same-origin 只有当URL与响应脚本同源才发送 cookies , include 总是发送请求资源域在本地的 cookies 验证信息
credentials: 'include',
// cors 表示同域和带有 CORS 响应头的跨域下可请求成功. 其他请求将被拒绝,包含请求的模式 (例如: cors, no-cors, same-origin)
mode: 'cors',
//包含请求的缓存模式 (例如: default, reload, no-cache)
cache: 'default',
default: 浏览器从 HTTP 缓存中寻找匹配的请求.
no-store: 浏览器在不先查看缓存的情况下从远程服务器获取资源,并且不会使用下载的资源更新缓存
reload: 请求之前将忽略 http 缓存的存在, 但请求拿到响应后, 它将主动更新 http 缓存.
no-cache: 如果存在缓存, 那么 fetch 将发送一个条件查询 request 和一个正常的 request , 拿到响应后, 它会更新 http 缓存.
force-cache: 浏览器在其 HTTP 缓存中查找匹配的请求。1,如果存在匹配,新鲜或过时,则将从缓存中返回。2,如果没有匹配,浏览器将发出正常请求,并使用下载的资源更新缓存
only-if-cached: fetch 强行取缓存,( 即使缓存过期了也从缓存取). 如果没有缓存, 浏览器将返回错误
Fetch 使用方式
普通调用
fetch('https://wp.hellocode.name')
.then(response => response.text())
.then(data => console.log(data))
捕获错误
fetch('https://wp.hellocode.name')
.then(response => response.text())
.then(data => console.log(data))
.catch(err => console.log(err))
GET 请求
fetch(url, {
method: 'GET'
})
.then((res)=>{
return res.text()
})
.then((res)=>{
console.log(res)
})
POST 请求
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
body: JSON.stringify({ name: 'a', password: 'b',})
})
.then((res)=>{
return res.text()
})
.then((res)=>{
console.log(res)
})
完整示例
fetch(url, {
method: 'POST',
credentials: 'include',
mode: 'cors',
cache: 'default',
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
body: JSON.stringify({ name: 'a', password: 'b',})
})
.then((res)=>{
return res.text()
})
.then((res)=>{
console.log(res)
})
Fetch 的缺点
- 由于是基于
Promise
一旦发送请求就无法中断,需要自己实现。 - 没有请求超时配置,需要自己实现。
- 当后端发生错误,fetch 响应依然是正常,需要自己处理
参考文献
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
感谢博主的制作
好兄弟
可以可以
良心网站
页面很漂亮,内容很详实