Angular：如何使用服务从服务器获取数据并存储在阵列中？

问题描述

我有一个在https://pokeapi.co/api/v2/pokemon/处调用PokéAPI的服务。

如果您未指定要返回的Pokemon，则API将返回一个分页的资源列表，其中包含Pokemon的URL。 https://pokeapi.co/docs/v2#pokemon-section

我想将该URL列表存储在我的服务的本地数组中。

我尝试过：

getlistofPokemonUrls(): Observable<any> {
    return this.http.get<any>(this.pokeApiUrl)
      .pipe(
        map((response: any[]) => this.pokemonResources = response.results)
      );
  }

在我的构造函数中（出于测试目的）：

const y = this.getlistofPokemonUrls();

但是，当我越过该函数this.pokemonResources时，数组为空。

解决方法

要点

• 使用可观察物时，请确保subscribe()。
• 与其将服务器响应存储在局部变量中，不如返回数据，以便预订Observable的调用方可以决定如何处理数据。这样做的好处是，异步过程完成后，数据立即可用。

请参阅工作Stackblitz Demo。

关于StackBlitz演示的说明

1. 创建了一个Angular Service PokeAPIService，它在构造函数中调用PokeAPI服务器。

  constructor(private http: HttpClient) {
    this.getListOfPokemonUrls().subscribe(
      (results: Array<Pokemon>) => {
        for(let p of results) {
          this.pokemons.push(p)
        }
      }
    )
  }

请注意，getListOfPokemonURLs的更新实现返回结果，以便可以在对subscribe()的调用中对其进行处理。

1. 为Pokemon和PokeAPIResponse定义的接口：

export interface Pokemon {
  name: string,url: string
}


interface PokeAPIResponse {
  count: number,next: string,previous: string,results: Array<Pokemon>
}

1. 使用新的接口类型更新了getListOfPokemonUrls()，并修改了RxJS map，以便直接返回response.results。

 private getListOfPokemonUrls(): Observable<Array<Pokemon>> {
    return this.http.get<any>(POKEAPI_URL)
      .pipe(
        map((response: PokeAPIResponse) => response.results)
      );
  }

作为参考，PokeAPI服务器响应：

curl https://pokeapi.co/api/v2/pokemon/

返回以下响应：

{
  "count":1050,"next":"https://pokeapi.co/api/v2/pokemon/?offset=20&limit=20","previous":null,"results":[
    {"name":"bulbasaur","url":"https://pokeapi.co/api/v2/pokemon/1/"},{"name":"ivysaur","url":"https://pokeapi.co/api/v2/pokemon/2/"},{"name":"venusaur","url":"https://pokeapi.co/api/v2/pokemon/3/"},{"name":"charmander","url":"https://pokeapi.co/api/v2/pokemon/4/"},{"name":"charmeleon","url":"https://pokeapi.co/api/v2/pokemon/5/"},{"name":"charizard","url":"https://pokeapi.co/api/v2/pokemon/6/"},{"name":"squirtle","url":"https://pokeapi.co/api/v2/pokemon/7/"},...