什么是 apipicker
apipicker 是一个 npm 包可以帮助前端开发者在项目中快速集成 API。它可以根据你需要的 API 生成对应的 API 调用代码，同时也提供了对 API 调用的mock 测试功能。使用 apipicker 可以大大减少前端开发者需要进行 API 调用方面的工作量。下面，我们将详细介绍 apipicker 的使用方法。
环境要求
安装 apipicker
你可以在 npm 中找到 apipicker 的包，安装非常方便。使用以下命令即可：
npm install apipicker --save-dev
使用 apipicker
1.配置
在使用 apipicker 之前，你需要在项目中创建一个配置文件，告诉 apipicker 你想要使用哪些 API。我们可以在项目的根目录中创建一个 apipicker.json 文件。
-- -------------------- ---- -------
-
------------- -------------------------
---------- -
-
------- --------
---------- -
-
------- -------------
--------- -------
------- ---------
-------- ---
---------- -
------- ----------
------- -------------------
------- -
------- -------
------ --
-
--
----------- -
--------- ----
------- -------------------
------- -
----- --
------- -------
------ --
-
-
-
-
-
-
-参数说明：
swaggerUrl: 这个字段是你需要生成 API 的 Swagger URL。apiList: 一个数组，包含你需要生成的 API。name: 这是你的 API 名称。entries: 一个数组，包含你该 API 下的所有请求项。name: 请求名称。method: 请求方法，如 'GET', 'POST', 'PUT', 'DELETE'等。path: 请求的路径。query: 该请求需要的 query 参数数组。request: 该请求的 request 配置，包含name，type和data属性。name: 请求中数据的名称。type: 请求数据类型。data: 请求数据。
response: 该请求的 response 配置，包含status，type和data属性。status: 请求返回的状态码。type: 返回数据的类型。data: 返回的数据。
2.生成代码
在配置完毕后，我们就可以使用 apipicker 来生成对应的 API 调用代码了。我们可以在项目根目录中运行以下命令来生成代码：
npx apipicker
在运行完命令之后，你会在你的项目根目录中生成一个 api 文件夹。在这个文件夹中，会有和你在 apipicker.json 中配置对应的 API 调用代码。
举个例子，在上一节中的 apipicker.json 配置文件中，我们配置了一个叫 createUser 的请求，我们就可以在 api/users/createUser.js 中找到生成的调用代码。
-- -------------------- ---- -------
------ ------- ---- ----------------------
----- ---------- - ----- -------- -- -
----- - ----- --- - - -------
----- ------- - -
------- -------
-------- - --------------- ------------------ --
----- ---------------- ----- --- ---
--
----- -------- - ----- ----------------- ---------
------ --------------
--
------ - ---------- --代码中使用了 utils/request 来进行请求的发送，我们可以根据我们项目的需要，替换 utils/request 来使用自己的请求库。
3.测试 API
当我们完成了 API 调用代码的生成后，我们可以使用 apipicker 提供的 mock 功能来测试我们的 API 调用代码。我们可以运行以下命令来启动 mock 服务器：
npx apipicker mock
当你启动了 mock 服务器后，你可以访问 http://localhost:3000/api-docs 来查看生成的 mock 数据，同时也可以使用该 mock 数据来测试我们的 API 调用代码。
总结
通过本篇文章，我们了解了 apipicker 的基本使用方法，可以使用 apipicker 来自动生成 API 调用代码，并进行 mock 测试。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560ad81e8991b448deec6