API 调用：返回 observable<object>

Question

我正在尝试创建一个返回 Observable 的函数。我正在使用以下 API (https://pokeapi.co/api/v2/)。

我的模特：

export class Pokemon {
id: number;
name: string;
height: number;
  weight: number;
  types: PokemonType[];
  image_url: string;
  shiny_url: string;
}

export class PokemonType {
  slot: number;
  name: string;
}

我试过了。但是下面的代码返回一个普通的口袋妖怪，我想返回一个 Observable 以便我可以使用订阅函数。

export class PokemonService {
  API_ADDRESS: string = 'https://pokeapi.co/api/v2/pokemon';

  constructor(private httpClient: HttpClient, private toastService: ToastService) { }


getPokemon(id: number) : Pokemon {
    var result: Pokemon = new Pokemon();
    this.httpClient.get<any>(`${this.API_ADDRESS}/${id}`).subscribe(pokemon => {
      result.id = pokemon.id;
      result.image_url = pokemon.sprites.front_default;
    });
    return result;
  }
}

我发现一堆网站试图解释 API 调用，但有些网站已经过时，我不需要 API 中的所有数据，只需要类中提到的变量。

谁能帮帮我？

Answer 1

试试这个方法

getPokemon(id: number) : observable<Pokemon>{

   return this.httpClient.get<any>(`${this.API_ADDRESS}/${id}`).pipe(map(pokemon => {
      var result: Pokemon = new Pokemon();
      result.id = pokemon.id;
      result.image_url = pokemon.sprites.front_default;
      return result; // ?
    }));

  }

现在你只需要订阅getPokemon

更新！

万一或错误处理我们可以使用 rxjs catch / catchError

  getPokemon(id: number) {

    return this.httpClient.get<any>(`${this.API_ADDRESS}/${id}`).pipe(
      map(pokemon => {
        var result: Pokemon = new Pokemon();
        result.id = pokemon.id;
        result.image_url = pokemon.sprites.front_default;
        return result; // ?
      }),
      catchError(error => throwError(error))
    );

  }

stackblitz demo ??

检查这个RxJs Error Handling: Complete Practical Guide