【数据请求篇】Fetch 包装器 Mande

一、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 包装器。

github 地址

参考地址

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.
• fetchPolyfill 可选。

改写上面 Fetch 代码示例如下：

// api/users
import [ mande } from 'mande'
const users = mande('/api/users')

users.post({
	name:'Magnum',
	pwd: 'Magnum@CSDN123'
}).then(res => {
	// 返回数据后的操作
)

3. 请求超时设置
   你可以通过 AbortSignal 设置请求超时的时间

   mande('/api/users').get('/id', { signal: AbortSignal.timeout(2000) })