Hack news API - 获取所有新闻

Question

我有https://github.com/HackerNews/API的问题。

我需要在第一页的 30 条新闻（标题、作者...）中获取 Angular 7 中的所有最佳新闻。如何使用下一个 api 发送 get 请求？

此 API 显示最佳故事的所有 ID：https : //hacker-news.firebaseio.com/v0/topstories.json?print=pretty

这个 api 展示了一个故事的例子：https : //hacker-news.firebaseio.com/v0/item/8863.json?print=pretty

我试试这个：

loadItem(){
this.http.get(`https://hacker- 
news.firebaseio.com/v0/item/${this.id}.json?print=pretty`).subscribe(data => {
    this.items.push(data as any[]);
  })
}    

loadBestItems(){
this.http.get('https://hacker-news.firebaseio.com/v0/beststories.json? 
print=pretty').subscribe(data => {
            this.bestItems.push(data as any[]);
          })
 } 

我需要第一页上的 30 条最佳新闻

Answer 1

这是一个有点沉重的问题，但我认为我们可以将其分解为三个主要问题：

1、如何限制黑客新闻api返回的故事数量？

由于黑客新闻数据是通过 firebase API 公开的，让我们参考 firebase 文档。如图所示这里，我们可以使用limitToFirst和排序依据选项一起，以限制结果的数量。我们可以简单地按键排序，因此您的请求 URL 最终看起来像这样：

'https://hacker-news.firebaseio.com/v0/beststories.json? 
print=pretty&orderBy="$key"&limitToFirst=30'

2. 如何在 Angular 中链接 HTTP 请求（根据第一个请求的结果发出第二个请求）？
这可以通过mergeMap rxjs 操作符来实现。此运算符允许您将一个 observable 发出的值映射到另一个 observable。为简化起见，假设您的初始请求仅返回一个 id。然后我们可以使用mergeMap将 id 映射到对完整项目的请求。
如果该端点存在于 pathbeststory.json，它看起来像这样。像这样：

this.http.get('https://hack...v0/beststory.json').pipe(
  mergeMap((id) => this.http.get(`https://hack.../v0/item/${id}`))
).subscribe((data) => {
  console.log('Story: ', data);
}

但是，由于您需要映射到多个请求，因此我们需要引入另一个运算符，如问题 3 中所述。

3.如何同时发出多个HTTP请求（对列表中的每一项都发出请求）？

这可以通过forkJoinrxjs 操作符来实现。这个操作符接受一个 observables 数组，并在它们全部完成后发出它们的值数组。在您的问题的上下文中，输入是一个请求数组（初始请求中的每个 id 一个），输出将是一个项目列表。为了再次简化事情，让我们假设您已经有一个 id 数组。为列表中的每个项目发出请求看起来像这样：

let ids = [1, 2,...];
forkJoin(ids.map((id) => this.http.get(`https://hack.../v0/item/${id}`)).subscribe((stories) => {
  console.log('Stories:', stories);
});

把这一切放在一起

现在我们知道如何将请求的结果映射到另一个 observable mergeMap，并且我们知道如何将多个 observables 的结果组合成一个 with forkJoin，我们可以将它们一起使用来实现您正在寻找的内容：

this.http.get('https://hack....v0/beststories.json?orderBy="$key"&limitToFirst=30').pipe(
  mergeMap((ids) => forkJoin(ids.map((id) => this.http.get(`https://hack...v0/item/${id}`)))),
).subscribe((stories) => {
 console.log('Stories:', stories);
});

请注意，在代码片段中，我排除了部分 url 和不相关的查询参数