Hack新闻API -获取所有新闻

Question

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

我需要获取所有最好的新闻在角7，30新闻在第一页(标题，作者.)。如何用下一个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公开的，所以让我们参考一下防火墙文档。正如这里所指出的，我们可以同时使用limitToFirst和orderBy选项来限制结果的数量。我们可以简单地按键订购，这样您的请求URL最终会看起来如下所示：

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

2.如何以角度链接HTTP请求(根据第一个请求的结果发出第二个请求)？

这可以通过mergeMap rxjs算子来实现。这个运算符允许您将可观察到的值映射到另一个可观测的值。为了简化事情，假设您最初的请求是只返回一个id。然后，我们可以使用mergeMap将id映射到完整项的请求。

如果该端点存在于path beststory.json中，它将类似于this.like (如下所示)：

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都有一个请求)，输出将是一个项列表。为了再次简化事情，让我们假设您已经有了一个ids数组。对列表中的每一项发出请求如下所示：

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部分和不相关的查询params。