黑客新闻 API - 获取所有新闻

Question

我对 https://github.com/HackerNews/API 有疑问。

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

此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 编辑的报道数量 return？

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

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

2。您如何在 Angular 中链接 HTTP 请求（根据第一个请求的结果发出第二个请求）？
这可以通过 mergeMap rxjs operator 来实现。此运算符允许您将一个 observable 发出的值映射到另一个 observable。为了简化事情，假设您最初的请求只是 return 一个 id。然后我们可以使用 mergeMap 将 id 映射到对完整项目的请求。
如果该端点存在于路径 beststory.json 中，它将类似于 this.like this:

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 请求（对列表中的每一项发出请求）？

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

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

综合起来

现在我们知道如何使用 mergeMap 将请求的结果映射到另一个可观察对象，并且我们知道如何使用 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 和不相关的查询参数

黑客新闻 API - 获取所有新闻

Hack news API - fetch all news

html

javascript

css

angular

angular-httpclient