简介
随着前端开发日益复杂，人们对于前端的要求也不断提高，以前端为核心的全栈开发已经成为了现在趋势。在前端技术中，有一个很重要的领域就是与后端进行交互。这个时候，我们就需要使用到一些工具，比如：AJAX，Fetch，Axios，Node Fetch 等等。而在这些工具中，又有一个很重要的库，叫做 Octokit。
Octokit 是 GitHub 官方提供的一套用于操作 GitHub 开放 API 的工具，它提供了一系列的 API 请求函数、抽象出一些通用的请求参数和处理逻辑，方便开发者进行开发。同时，Octokit 拥有广泛的应用场景，由于其良好的封装和设计，开发者可以轻松地将其应用到 Web，Node.js，Atom，Visual Studio Code 等多种平台中。
本文将介绍使用 npm 包 @gr2m/octokit-rest-browser-experimental，该包可以在前端中使用 Octokit，让你体验到使用 Node.js 中 Octokit 所能体验到的绝大部分功能。下面，我们就来详细了解一下该包的使用。
安装 npm 包
使用 npm 安装 @gr2m/octokit-rest-browser-experimental
$ npm install @gr2m/octokit-rest-browser-experimental
创建 Octokit 实例
接下来，我们要做的就是创建 Octokit 实例。我们可以在模块中导入 Octokit 构造函数，然后通过传入一些配置参数来创建实例，如下所示：
// 导入 Octokit import { Octokit } from "@gr2m/octokit-rest-browser-experimental"; // 创建 Octokit 实例 const octokit = new Octokit({ auth: `personal-access-token123`, });
在这里，我们通过导入 Octokit，然后使用 new 实例化 Octokit，再通过传入一个配置对象来对其进行配置。其中，auth 属性表示，在请求 GitHub API 时使用的身份认证方式。
请求 API
接下来，我们可以通过 Octokit 提供的一些方法请求 GitHub API，这些方法大体上可以分为两类：
- 针对特定对象的方法，比如 Issues，Pull Requests，Repos 等等。这些方法通常需要传入一个具体的对象标识，比如 issue number，repo name 等等。
- 通用的方法，比如 foo，bar，baz 等等，它们可以被用于任何 API 路径和查询参数。
以 Issues API 为例，我们可以通过以下方法获取指定 Repo 的 Issues 列表：
-- -------------------- ---- ------- -- -- ------- ------ - ------- - ---- ------------------------------------------ -- -- ------- -- ----- ------- - --- --------- ----- --------------------------- --- -- -- ------------------- ------ ---- - ------ -- ----- - ----- ------ - - ----- --------------------- ------ ---------- ----- --------- ---展开代码
在这里，我们使用了 Octokit 提供的 issues.list 方法，传入一个对象作为参数，该对象包含了查询条件，比如 owner 和 repo，owner 表示仓库的拥有者，repo 表示仓库的名称。
你可以通过 API 文档查找你需要使用的 API，然后使用 Octokit 的对应方法来请求数据。
Promise 和 async/await
Octokit 的所有方法都返回 Promise，我们可以使用 Promise 对象的 then，catch 方法来处理 Promise 的结果和错误。
-- -------------------- ---- ------- -- -- ------- ------ - ------- - ---- ------------------------------------------ -- -- ------- -- ----- ------- - --- --------- ----- --------------------------- --- -- -- ------------------- ------ ---- - ------ -- ------- -------------- ------ ---------- ----- --------- -- -------- ----- ------ -- -- - ---------------------- -------- -- -------------- -- - -------------------- --------- --------------- ---展开代码
在这里，我们通过 then 处理了 Promise 的结果，如果请求失败，我们可以通过 catch 来处理 Promise 的错误。
同时，我们还可以使用 async/await 来处理 Promise，这样可以让代码更加简洁、易读。如下所示：
-- -------------------- ---- ------- -- -- ------- ------ - ------- - ---- ------------------------------------------ -- -- ------- -- ----- ------- - --- --------- ----- --------------------------- --- -- -- ----------- ---- ---- - ------ -- ----- -------- ------------- - --- - ----- - ----- ------ - - ----- --------------------- ------ ---------- ----- ---------- --- ---------------------- -------- - ----- ------- - -------------------- --------- --------------- - - --------------展开代码
例子代码
以下是通过 Octokit 获取指定 Repo 的 Issues 列表的完整代码：
-- -------------------- ---- ------- -- -- ------- ------ - ------- - ---- ------------------------------------------ -- -- ------- -- ----- ------- - --- --------- ----- --------------------------- --- -- -- ----------- ---- ---- - ------ -- ----- -------- ------------- - --- - ----- - ----- ------ - - ----- --------------------- ------ ---------- ----- ---------- --- ---------------------- -------- - ----- ------- - -------------------- --------- --------------- - - --------------展开代码
总结
通过学习本文，我们了解了如何在前端中使用 Octokit，使用 npm 包 @gr2m/octokit-rest-browser-experimental 来请求 GitHub 开放 API，通过创建 Octokit 实例，使用 Octokit 提供的方法来请求数据。同时，我们还了解了如何使用 Promise 和 async/await 来处理异步逻辑。
相信通过本文的学习，你已经掌握了使用 Octokit 的基础技能，希望这对你在前端开发中有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/141949
