Hack news API - получить все новости - PullRequest
Новая
       11

Hack news API - получить все новости

0 голосов
/ 07 февраля 2019

У меня проблема с https://github.com/HackerNews/API.

Мне нужно получить все лучшие новости в Angular 7, 30 новостей на первой странице (название, автор ...).Как я могу отправить запрос на получение следующего API?

Этот API показывает все идентификаторы лучшей истории: 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 лучших новостей на первой странице

1 Ответ

0 голосов
/ 09 февраля 2019

Это немного загруженный вопрос, но я думаю, что мы можем разбить его на три основных вопроса:

1.Как ограничить количество историй, возвращаемых API хакерских новостей?

Поскольку данные хакерских новостей предоставляются через API Firebase, давайте обратимся к документации Firebase.Как указано здесь , мы можем использовать опции limitToFirst и orderBy вместе, чтобы ограничить количество результатов.Мы можем просто заказать по ключу, поэтому URL вашего запроса будет выглядеть примерно так: 

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

2.Как вы связываете HTTP-запросы в Angular (делаете второй запрос, который зависит от результата первого)?
Этого можно достичь с помощью оператора mergeMap rxjs .Этот оператор позволяет отобразить значения, испускаемые наблюдаемой, другой наблюдаемой.Чтобы упростить ситуацию, представьте, что ваш первоначальный запрос состоял в том, чтобы вернуть только один идентификатор.Затем мы могли бы использовать mergeMap для сопоставления идентификатора с запросом полного элемента.
Если бы эта конечная точка существовала по пути beststory.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-запросов одновременно (сделать запрос для каждого элемента в списке)?

Этого можно достичь с помощью оператора forkJoin rxjs.Этот оператор принимает массив наблюдаемых и выдает массив их значений, как только они завершены.В контексте вашей проблемы входные данные представляют собой массив запросов (по одному для каждого идентификатора в начальном запросе), а выходные данные представляют собой список элементов.Чтобы снова упростить ситуацию, давайте предположим, что у вас уже есть массив идентификаторов.Выдача запросов для каждого элемента в списке будет выглядеть примерно так: 

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-адреса и не связанных между собой параметров запроса

...