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

Question

我有一个服务可以在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 数组为空。

Answer 1

要点

• 使用 observables 时，一定要subscribe()。
• 与其将服务器响应存储在本地变量中，不如返回数据，以便订阅 Observable 的调用者可以决定如何处理数据。这样做的好处是，一旦异步过程完成，数据就会立即可用。

查看工作Stackblitz Demo。

StackBlitz 演示的注意事项

1. 创建了一个 Angular 服务 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/"},
...