Passing a variable using async/await instead of a subscribe

Question

I am trying to use async/await for a double API call but variables in the second async function don't work or Angular doesn't render.

const pokemon = this.httpClient
  .get(`https://pokeapi.co/api/v2/pokemon/${pokemon_name}`)
      .subscribe(pokemon => {
        this.image = pokemon["sprites"]["front_default"];
      });

I think this is for the life cycle of components in Angular, but I don't know how to solve it

https://stackblitz.com/edit/angular-http-async-await-q4m6d7?file=src%2Fapp%2Fapp.component.ts

Michael D Michael D · Accepted Answer · 2020-11-08T08:49:21

I don't see any explicit use in converting the observable to a promise. Especially when chained requests are involved, it's better to use observables and utilize RxJS operators that are designed to help in these situations.

In your case you need multiple changes.

The inner request depends on the response from outer request. You could use RxJS switchMap operator to map the observable here.
The outer request returns an array of URLs and each need to be triggered individually to obtain the images. Here you could use RxJS forkJoin function to trigger multiple requests in parallel.
The result could then be mapped to an array of URLs that could be subscribed to using the Angular async pipe in the template.
Since it's an array of images, you could use *ngFor directive to loop through them.

Controller

import { Component, OnInit } from "@angular/core";
import { HttpClient } from "@angular/common/http";

import { Observable, forkJoin } from "rxjs";
import { switchMap, map } from "rxjs/operators";

@Component({ ... })
export class AppComponent implements OnInit {
  images: Observable<any>;

  constructor(private httpClient: HttpClient) {}

  ngOnInit() {
    this.doSometing();
  }

  doSometing() {
    this.images = this.httpClient
      .get("https://pokeapi.co/api/v2/pokemon?limit=151")
      .pipe(
        switchMap((pokemons: any) =>
          forkJoin(
            pokemons.results.map((result: any) =>
              this.httpClient
                .get(result.url)
                .pipe(map((pokemon: any) => pokemon.sprites.front_default))
            )
          )
        )
      );
  }
}

Template

<ng-container *ngIf="(images | async) as urls">
    <h1>Images</h1>
    <img *ngFor="let url of urls" [src]="url"/>
</ng-container>

I've modified your Stackblitz

^{Note: toPromise() will be deprecated in RxJS 7 and will be gone in RxJS 8.}

Passing a variable using async/await instead of a subscribe

1 Answers