现在，前端开发离不开 NPM 包了。而其中一个常用的 NPM 包是 agreed-client。它是用来发送 HTTP 请求的一个工具。在本文中，我们将深入探讨 agreed-client 的抽象层和使用方法。我们先了解一下 agreed-client 的前置知识。
前置知识
在了解 agreed-client 之前，你需要对以下几个知识点有所了解：
- Promise：了解如何使用 Promise 管理异步代码；
- async/await：异步代码的新语法糖；
- fetch，XMLHttpRequest 或 axios：了解三种发送 HTTP 请求的方式；
安装 agreed-client
安装 agreed-client 非常简单：
npm install agreed-client
或者使用 yarn：
yarn add agreed-client
初始化
使用 agreed-client，你需要定义一个配置文件。
定义配置文件
创建一个 json 文件，如 agreed.json，定义如下：
{
"path": "https://your.api.server/users",
"method": "POST"
}初始化 agreed-client
然后在你的代码中，你可以这样初始化 agreed-client：
-- -------------------- ---- ------- ------ - ------------------ - ---- --------------- ----- ------------ - ----- -- - -- -- -------- ------- ---- ---- ---- -- ----- ------ - -------------------- ----- ----------------------- ------------- --
在这里，我们用 createAgreedClient 函数创建一个 agreed 实例，该实例将使用我们在 agreed.json 中定义的路径和方法。我们还定义了一个名为 camelizeKeys 的函数，它将响应数据中的下划线风格的键转换为骆驼式风格的键，以便在 JavaScript 中更易于使用。
使用 agreed-client 发送请求
现在我们已经初始化了 agreed-client，接下来我们将尝试使用它来发送请求。
const request = { email: 'sample@sample.com', password: 'password' };
const response = await agreed(`/auth/sign_in`, { body: request });这里，我们使用 agreed 实例的调用方式，传入请求体，并使用 await 等待异步操作。我们也可以更改请求方法或传递其他的或相同的请求参数。
属性补全
现在，你已经会使用 agreed-client 发送请求了。但事实上，现实中的 API 接口通常更复杂。API接口可能需要许多参数或参数必须存在但又有默认值。此时，使用 agreed-client 的属性补全功能有很大优势。我们在定义一个新的配置文件 agreed-completed.json：
-- -------------------- ---- -------
-
------- ------------------------------------------
--------- ------
-------- -
------------- - ------- --------- ---------- ------------- -------------- ----- --
----------- - ------- --------- ---------- ------------- -------------- ----- --
--
------------ -
------- -
------- -
-------- -
------- --------
-------- -
------------- -
-------------- - ------- --------- --
---------------- - ------- -------- -
-
-
-
-
-
-
-在这里，我们定义 query 对象来指定必须参数的默认值，以及描述请求参数的描述。在响应模式中，我们还可以定义来自 API 的响应和响应的属性。
初始化 agreed-client 和属性补全
然后在你的代码中，你可以这样初始化 agreed-client 和属性补全：
-- -------------------- ---- ------- ------ - ------------------- -------- - ---- ---------------- ----- ---------- - ------------------------------------- ----- ------------ - ----- -- - -- -- -------- ------- ---- ---- ---- -- ----- ------ - -------------------- ----- ----------- ------------- -----------------
在这里，我们使用 createAgreedClient 函数创建一个 agreed 实例，并使用 .use(complete) 进行属性补全。在使用 agreed 实例调用请求时，我们传递了必要的参数，也可以将可选的参数作为扩展参数进行传递。
const response = await agreed({
path: `/campsites/search`,
query: { start_date: '2019-11-16', end_date: '2019-11-23' },
});在这里，我们可以看到，我们使用 query 传递了一个对象，其中包含必需参数和可选参数。当你运行代码时，agreed-client 将使用 agreed-completed.json 中定义的预定义参数补全 url。
结论
通过本文的学习，你已经学会了安装和使用 agreed-client 以及使用属性补全功能。agreed-client 是非常棒的 NPM 包，它可以帮助开发人员轻松调用 API，减少了一些非必要的代码操作。祝您的开发工作顺利！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f34966fdbf7be33b2566e45