Как именно работает модуль Angular HttpClient? Зачем мне подписываться на вызов API? - PullRequest
Новая
       46

Как именно работает модуль Angular HttpClient? Зачем мне подписываться на вызов API?

0 голосов
/ 07 мая 2020

Я полный новичок с Angular и TypeScript (я пришел из Java), и мне сложно понять, как точно работает модуль HttpClient для выполнения HTTP-запроса к внешнему API .

Итак, в моем коде у меня есть этот метод, выполняющий простой вызов GET к внешнему API в сети: 

  fetchCharacters() {
    this.http.get('https://swapi.dev/api/people/').subscribe(
      (response: Response) => {
        console.log(response);
      }
    )

Я сомневаюсь: почему в Angular я должен подписаться запрос? Я никогда не видел ничего подобного в Java \ C # \ Python ... Я всегда выполнял запрос и получал ответ. Здесь мне кажется, что subscribe () обрабатывает запрос как событие. Но что в этом случае происходит? Это «получение ответа»? Итак, это означает: когда происходит «получение ответа от вызываемого API, обработать его с помощью лямбда-функции, определенной ad subscribe () parameter»?

Это правильная интерпретация или я чего-то не хватает? }

1 Ответ

0 голосов
/ 07 мая 2020

вы можете попробовать await-for в некоторых случаях, но, возможно, он еще не готов к производству

npm i -S rx js -for- await

и обычно вам не нужно подписываться

  1. простой пример, вероятно, вы никогда не будете использовать его production 
    <ng-container *ngIf="{ data: fetchCharacters() | async} as source">
      <div *ngIf="source.data">
        {{ source.data }}
      </div>
    </ng-container>

    fetchCharacters() {
      return this.http.get('https://swapi.dev/api/people/');
    )
async / await example , выглядит бесполезным с головной болью ngZone в пользовательском интерфейсе, но может быть полезно для фоновых задач 
    onClick() {
      const source$ = this.queryService.get();
      this.ngZone.runOutsideAngular(async () => {

        for await (const data of eachValueFrom(source$)) {
          console.log(data);
        }

      });
    }
близок к реальному примеру с redux и async / await см. пример 
    @Action(TableUpdateAction)
    async updateAction(ctx: StateContext<TableStateModel>) {

      ctx.setState(patch({ data: [] }));

      const source$ = this.dataService.get();
      for await (const data of eachValueFrom(source$)) {
        ctx.setState(patch({ data }));
      }
    }
...