在 github 上做个小应用，就用 RxJS吧！

前端

2024-01-05 13:59:41

大家好，我是 [你的名字]，一位技术博客创作专家。今天，我想和大家分享一下如何使用 RxJS 和 GitHub API 在 GitHub 上一步步搭建一个小应用。

RxJS 是一个响应式编程库，它允许你以一种声明式的方式编写异步代码。这使得代码更易于阅读和理解，也更容易调试。GitHub API 是一个允许你与 GitHub 服务交互的 API。你可以使用它来获取用户数据、仓库数据和提交数据。

在这篇文章中，我将向你展示如何使用 RxJS 和 GitHub API 来构建一个小应用，该应用允许你搜索 GitHub 用户并查看他们的仓库。

前提条件

在开始之前，你需要确保你已经安装了以下软件：

Node.js
npm
webpack
Babel

如果你还没有安装这些软件，你可以按照以下步骤进行安装：

安装 Node.js：

curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs

安装 npm：
```
sudo apt-get install -y npm
```
安装 webpack：
```
npm install webpack webpack-cli -g
```

安装 Babel：

npm install babel-cli babel-preset-env -g

创建项目

首先，我们需要创建一个新的项目。你可以使用以下命令来创建一个新的项目：

mkdir github-app
cd github-app

然后，你需要在项目中初始化一个 npm 包。你可以使用以下命令来初始化一个 npm 包：

npm init -y

安装依赖项

接下来，我们需要安装一些依赖项。你可以使用以下命令来安装依赖项：

npm install rxjs @types/rxjs @octokit/rest

创建应用程序

现在，我们可以开始创建我们的应用程序了。首先，我们需要创建一个新的文件，名为 app.js。然后，我们需要在 app.js 文件中添加以下代码：

import { fromEvent } from 'rxjs';
import { map, filter, switchMap } from 'rxjs/operators';
import { Octokit } from '@octokit/rest';

const octokit = new Octokit();

const searchInput = document.getElementById('search-input');
const searchResults = document.getElementById('search-results');

fromEvent(searchInput, 'input')
  .pipe(
    map(event => event.target.value),
    filter(query => query.length > 2),
    switchMap(query => octokit.search.users({ q: query }))
  )
  .subscribe(response => {
    const users = response.data.items;

    searchResults.innerHTML = '';

    for (const user of users) {
      const listItem = document.createElement('li');
      listItem.innerHTML = user.login;

      searchResults.appendChild(listItem);
    }
  });