npm 包 fetch-yode 使用教程

什么是 fetch-yode

fetch-yode 是一个基于原生 fetch 的封装库，旨在解决一些 fetch 存在的问题，例如：

• 不支持 timeout，fetch-yode 提供 timeout 选项
• 不支持直接传入请求体，fetch-yode 封装了这部分工作
• 不能直接取消请求，fetch-yode 提供取消请求的方法

安装

使用 npm 安装：

npm install fetch-yode

使用 yarn 安装：

yarn add fetch-yode

使用

引入 fetch-yode：

import fetch from 'fetch-yode'

发起 GET 请求：

fetch('http://example.com/get').then(res => console.log(res))

发起 POST 请求：

-- -------------------- ---- -------
-------------------------------- -
  ------- -------
  ----- ----------------
    ---- -------
  ---
  -------- -
    --------------- ------------------
  -
----------- -- -----------------

设置超时时间：

fetch('http://example.com/get', {
  timeout: 1000
}).then(res => console.log(res)).catch(err => console.log(err))

取消请求：

const controller = new AbortController()
const signal = controller.signal
const fetchPromise = fetch('http://example.com/delete', {
  method: 'DELETE',
  signal
})
// 取消请求
controller.abort()

深入理解

fetch 是原生的 JavaScript API，主要用于发起网络请求。但是，仅仅使用 fetch 存在以下问题：

1. 不支持 timeout

   timeout 选项在请求超时时会报错，导致代码崩溃。fetch-yode 对 timeout 的处理方式是通过 Promise.race 给请求加上一个超时的定时器，到达时间后触发超时。

2. 不支持传入请求体

   fetch 提供了 body 选项，但是不能直接传入请求体，需要手动将 JSON 对象转换为字符串。fetch-yode 解决这个问题的方式是提供一个默认的 Content-Type 为 application/json 的请求头，将传入的对象转换为字符串后添加到请求体中去。

3. 不能直接取消请求

   fetch 没有提供取消请求的方法，而对于一些需要频繁发起请求的场景，如果没有取消请求的能力，会导致网络请求不断积累，浪费宝贵的带宽和时间。fetch-yode 支持取消请求，是因为 fetch 在底层使用了 AbortController API，而 fetch-yode 将这个 API 做了一层封装，提供了更加方便的使用方式。

总结

fetch-yode 是一个在原生 fetch 基础上进行封装的库，为了解决 fetch 的一些问题。使用 fetch-yode 可以更加方便地发起网络请求，并且支持超时和取消请求的操作。在进行一些需要频繁网络请求的场景下，使用 fetch-yode 足以提高代码效率和用户体验。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/the-fetch-yode