5. Gérer les erreurs

Ce que nous avons fait précédemment fonctionne très bien dans le cas idéal, mais que ce passera t’il en cas de pépin ? Nous devons également gérer les cas d’erreurs éventuelles, dans la situation où la requête n’aboutirait pas. C’est le rôle de la méthode catch, qui est une méthode des fameuses promesses retournés par fetch. Modifiez donc le fichier pokemon-service.ts comme suit :

import Pokemon from "../models/pokemon";

export default class PokemonService {

  static getPokemons(): Promise<Pokemon[]> {
    return fetch('http://localhost:3001/pokemons')
      .then(response => response.json())
      .catch(error => this.handleError(error));
  }

  static getPokemon(id: number): Promise<Pokemon|null> {
    return fetch(`http://localhost:3001/pokemons/${id}`)
      .then(response => response.json())
      .then(data => this.isEmpty(data) ? null : data)
      .catch(error => this.handleError(error));
  }

  static isEmpty(data: Object): boolean {
    return Object.keys(data).length === 0;
  }

  static handleError(error: Error): void {
    console.error(error);
  }
}

Comme vous pouvez le constater, nous ne faisons pas grand chose ici, on se content de passer l’erreur éventuelle de la promesse à notre méthode maison handleError, afin d’appliquer un traitement commun aux erreurs qui surviennent dans notre application.

Comme notre application est une simple démonstration, on se contente d’afficher une erreur dans la console. Dans le cas d’une application en production, vous pourrez bien sûr mettre en place un système plus élaboré !

C’était une étape courte, mais importante, car nous devons anticiper les erreurs HTTP qui pourraient se produire, pour des raisons indépendantes de notre volonté, bien sûr ! 😉