一、Fetch
Fetch 是 ES6 提出的一套用于进行前后端交互的工具,被称为下一代 Ajax 技术,是 XMLHttpRequest 的升级版,用于在 JavaScript 脚本里面发出 HTTP 请求,采用 Promise 方式来处理数据。API 简洁明了,并且提供了比 XMLHttpRequest 更强大和灵活的功能集。
数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
个人博客地址
fetch() 方法 用于发起获取资源的请求。它返回一个 promise,这个 promise 会在请求响应后被 resolve,并传回 Response 对象。
语法
fetch(url, init?)
- url 必填。请求的 URL 地址
- init 可选。可配置的对象
- method:请求方法,如:GET、POST、PUT、DELETE
- 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,必须提供这个选项,从 Chrome 50 开始,这个属性也可以接受 FederatedCredential (en-US) 实例或是一个
- PasswordCredential (en-US) 实例。
- cache: 请求的 cache 模式:default、 no-store、 reload 、 no-cache、 force-cache 或者 only-if-cached。
- redirect: 可用的 redirect 模式:follow (自动重定向), error (如果产生重定向将自动终止并且抛出一个错误),或者 manual (手动处理重定向)。在 Chrome 中默认使用 follow(Chrome 47 之前的默认值是 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 值(例如: sha256BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=)。
演示代码:
// creating a new user
fetch('/api/users', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: 'Magnum',
password: 'Magnum@CSDN123',
}),
}).then((response) => {
if (response.status >= 200 && response.status < 300) {
return response.json()
}
// reject if the response is not 2xx
throw new Error(response.statusText)
})
.then((user) => {
// 返回数据后的操作
})
二、Mande
mande: 一个简单、轻巧、易于使用的 fetch 包装器。
1. mande 安装
# yarn 方式
yarn add mande
# npm 方式
npm install mande
2. mande 请求接口
创建一个 mande 实例
const instance = mande(baseURL, passedInstanceOptions?,fetchPolyfill?)
- baseURL 必填。 请求的URL地址
- passedInstanceOptions 可选。请求配置参数
- headers 可选。请求头信息(报头)
Headers sent alongside the request. Set any header to null to remove it.
- signal 可选。标记信息,传递给请求,只能使用一次。
AbortSignal can only be passed to requests, not to a mande instance because it can only be used once.
- headers 可选。请求头信息(报头)
- fetchPolyfill 可选。
改写上面 Fetch 代码示例如下:
// api/users
import [ mande } from 'mande'
const users = mande('/api/users')
users.post({
name:'Magnum',
pwd: 'Magnum@CSDN123'
}).then(res => {
// 返回数据后的操作
)
- 请求超时设置
你可以通过 AbortSignal 设置请求超时的时间mande('/api/users').get('/id', { signal: AbortSignal.timeout(2000) })