在 Web 开发中，fetch API 是一种用于获取资源的方法。但其使用起来有时不太方便，需要对返回的响应进行解析和异常处理等。为了解决这些问题，the-fetch-you-were-looking-for 库应运而生，它是一个 fetch 的封装库，提供了更加方便的使用方式和异常处理，让 fetch 更加好用。
安装
在使用该库前，你需要先安装它。可以通过 npm 来进行安装：
npm install the-fetch-you-were-looking-for --save
安装完毕后，就可以开始使用该库了。
使用
首先，我们需要引入该库：
const $fetch = require('the-fetch-you-were-looking-for')在请求一个数据时，我们可以使用下面这个语句：
$fetch(url, options, transform);
其中，url 表示请求的 URL 地址；options 是请求的配置项；transform 是请求返回数据的处理方式。下面我们来详细了解这三个参数。
URL
URL 用于指定服务端的地址，可以是完整的 URL，也可以是相对路径。当以相对路径进行请求时，会将其拼接上当前页面的 URL 来获取最终的地址。
例子:
$fetch('/api/posts')
.then(res => console.log(res.body));Options
Options 包含着一些请求的配置项。以下是一些常见的配置项:
method- 发送请求时使用的方法。默认为 GET 方法。支持的方法：GET、POST、PUT、DELETE。headers- 发送请求时携带的头信息，以键值对的形式保存。query- 发送请求时携带的查询参数，以键值对的形式保存。body- 发送请求时携带的数据，以字符串或 JSON 对象的形式传递。适用于 POST、PUT 等方法。credentials- 发送请求时是否携带 cookie 信息。可选值为'include'或 'same-origin'。timeout- 请求超时时间，以毫秒为单位，默认为 0，表示不设置超时。mode- 请求的模式。支持的模式：no-cors, cors, same-origin。
例子:
$fetch('/api/posts', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ title: 'Hello world', content: 'Lorem ipsum' })
}).then(res => console.log(res.body));Transform
这个参数是一个函数，用于对返回数据进行处理。res.body 存储着响应的数据，你可以在该函数内部对它进行处理和解析。在大多数情况下，该函数都会以 JSON 形式来解析响应数据。
例子:
$fetch('/api/posts')
.then(res => res.body)
.then(posts => {
posts.forEach(post => console.log(post.title));
});常见问题
如何处理异常？
在请求过程中，可能会遇到网络异常、超时、404 等问题，需要对异常进行处理。the-fetch-you-were-looking-for 提供了一个 catch 方法，你可以在该方法内部捕获异常并处理。
例子:
$fetch('/api/posts')
.then(res => console.log(res.body))
.catch(err => console.error(err.message));如何取消请求？
有时我们需要取消请求，以避免在网络较慢或已经完成的情况下，还是收到数据。
在 the-fetch-you-were-looking-for 库中取消请求使用 AbortController。AbortController 是一个接口，允许你使用简单的 API 来取消网络请求。
例子:
-- -------------------- ---- ------- ----- ---------- - --- ------------------ ----- - ------ - - ----------- -------------------- - ------ -- --------- -- ---------------------- ---------- -- ---------------------------- -- --- -- ----- ------------- -- - ------------------- -- ------
结束语
the-fetch-you-were-looking-for 库在一定程度上简化了网络请求的操作，让我们能够更加专注于业务逻辑的实现。相信通过这篇文章的介绍，你已经掌握了什么是 the-fetch-you-were-looking-for，以及如何使用它。
如果你在使用中遇到了问题，请及时在 GitHub 上联系开发者，同时留心库的更新，以获取更好的使用体验。
示例代码
-- -------------------- ---- -------
----- ------ - ------------------------------------------
--------------------
--------- -- ---------
----------- -- -
----------------------
------------------ -- -------------------------
--
---------- -- ----------------------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663c81e8991b448e2403