npm 包 handy-api 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

handy-api 是一个基于 Node.js 的 HTTP 服务代理工具，旨在简化前端工程师的开发流程。它可以快速创建 API 代理服务、转发 HTTP 请求、缓存 API 响应等，从而减少了前端工程师与后端工程师之间的沟通协调。

本教程将介绍如何使用 handy-api 来创建一个基本的 API 代理服务。

安装

使用 npm 可以很方便地安装 handy-api：

npm install -g handy-api

使用

在使用 handy-api 之前，需要先创建一个配置文件。我们以创建一个代理 Github API 为例，具体的配置内容如下：

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

在上面的配置文件中，我们定义了一个代理 Github API 的路由，该路由会将 /user/:username 的请求转发到 https://api.github.com/users/:username 。同时，我们还开启了缓存功能，缓存时间为 60 秒。

保存以上配置文件为 config.json ，然后打开终端，输入以下命令即可启动服务：

$ handy-api -c config.json

访问 http://localhost:3000/user/yourusername 即可在浏览器中看到 Github API 返回的用户信息。

详细说明

路由配置

手动映射路由是需要的，因为手动映射路由 A 到 URL B 意味着，浏览器端对路由 A 的请求实际上并没有直接地被发给 URL B，而是被 handy-api 代理了。具体来说，handy-api 监听了一个端口，如果有任何以 <host>/A 的样子发送过来的请求，它会将请求映射到 URL B 并将结果返回给请求方。

将路由映射到 URL 的配置格式如下：

{
  "routes": [
    {
      "path": "/user/:username",
      "target": "https://api.github.com/users/:username"
    }
  ]
}

上面的示例配置表示，将 http://localhost:3000/user/:username 映射到 https://api.github.com/users/:username ，其中 :username 是一个占位符，它将被请求 URL 中的对应值所代替。

路由参数

路由参数可以在路由中使用，以打造动态化的API。

以下几个实例说明如何定义动态化路由，以及获取在路由中所定义的参数：

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

第一个路由匹配 http://localhost:3000/user/:username，将会把 URL 中的 :username 动态变量传递到https://api.github.com/users/:username，返回 GitHub 用户的数据。比如示例：http://localhost:3000/user/PanJiaChen
第二个路由采用了 :username 和 :repo 来动态传递参数。示例：http://localhost:3000/repo/PanJiaChen/vue-element-admin
第三个路由匹配 http://localhost:3000/proxy/https://registry.npmjs.org/vue，会转发到 https://registry.npmjs.org/vue 并将结果返回，应用场景比较灵活。

缓存配置

handy-api 可以开启 HTTP 响应缓存功能，在第一次获取 API 响应后，将结果缓存在内存中，然后在之后的请求中直接返回缓存的结果。

以下是缓存配置示例：

"cache": {
  "enable": true,
  "expire": 60
}

上面的配置表示开启缓存，并将缓存时间设置为 60 秒。

HTTPS 支持

handy-api 支持 HTTPS 协议，只需在配置文件中增加 tkey 和 tcert 属性即可。以下示例使用了自签名证书：

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

Cross-domain 支持

在调用某些 API 时，需要跨域请求，这种情况下，可以在路由配置中开启 Cross-domain。

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

结论

通过本教程，大家应该能够了解 handy-api 的基本功能和使用方法。希望大家在实践中能够使用 handy-api 提高自己的前端开发效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005643881e8991b448e15fd