在前端开发过程中，经常需要处理 HTTP 请求并生成渲染页面。Metalsmith 能够很好地处理静态网站生成，而 metalsmith-request 包则是为了辅助这一过程而设计的。它提供了一个简单的 API 用于发出 HTTP 请求，并将响应结果写入到 Metalsmith 站点的特定文件中。
本文将介绍 metalsmith-request 如何使用以及如何将它与 Metalsmith 集成来构建一个简单的博客站点。
安装
npm install metalsmith-request
基本用法
假设我们希望使用 metalsmith-request 从 Github API 检索上次发布的版本。我们首先需要引入包并初始化 Metalsmith 实例：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ------- - ------------------------------
---------------------
----------- ----- - ------ --- ----- - --
----------------
-----------------------
---------------------------------------------------------------------------
------------ -- -
-- ----- ----- ----
------------------ -----------
---在上面的代码中，我们使用 request 函数发出 HTTP GET 请求并等待响应。在成功获得响应后，它将在 ./build 目录下创建一个名为 latest.json 的文件，其中包含了 Github 返回的版本信息。
我们可以使用每次请求返回的数据来渲染我们的页面，例如在下面代码中：
-- -------------------- ---- -------
---------------------
----------- ----- - ------ --- ----- - --
----------------
-----------------------
---------------------------------------------------------------------------
-------------------- ----------- ----- -
----- ------ - -----------------------------------------------------
--------------------- ----- - -------------- ------ - ---
-------
--
------------ -- -
-- ----- ----- ----
------------------ -----------
---在我们的页面中，我们可以使用 {{ site.latestRelease.name }} 这样的标签获得获取的针对最新版本的名称。
高级用法
metalsmith-request 接受一个比较灵活的 URL 模板，可以使用变量来表示 URL 中的动态部分。例如，当我们使用 Github API 检索特定用户和文章仓库的最后一篇发布时，可以使用如下 URL 模板：
https://api.github.com/repos/{USER}/{REPO}/releases/latest在实际使用时，我们可以通过类似以下方式的变量设置 URL 参数：
-- -------------------- ---- -------
--------------
---- -----------------------------------------------------------
--------- -------
------- -
----- -------------
----- ---------
--- --------
-
--
-这里的 property 属性允许我们指定返回的数据应组合到哪个连接的元件中，而 params 属性允许我们传递变量以摄取灵活变换的 URL 部分。
结论
本文简要介绍了 metalsmith-request 使用的基本和高级方法。这个包使得处理 HTTP 请求非常简单，从而帮助前端开发者快速生成静态网站并且获得浏览器直接渲染页面的优势。它可以和 Metalsmith 无缝集成，为开发者提供了一个快速、灵活且可扩展的静态网站生成器的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f411d8e776d08040d38