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;
}

我已经尝试过了。但是下面的代码返回一个普通的Pokemon，我想返回一个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

API调用：返回observable <object>

1 个答案: