6. Modifier un pokémon

Reprenons le formulaire d’édition de notre application, et essayez d’éditer un pokémon. Modifiez quelques-unes de ses caractéristiques, et cliquez sur le bouton « valider ». Vous verrez alors les informations du pokémon s’afficher dans la console du navigateur, et … c’est tout ! Les modifications du pokémon ont disparues, elles ne sont paas prises en compte pour l’instant par notre application.

Et c’est normal, car nous n’avons pas encore brancher notre formulaire d’édition avec notre API Rest. Nous avons besoin d’une nouvelle méthode dans notre service PokemonsService, afin de persister les modifications faites depuis le formulaire d’édition vers notre API Rest. Autrement dit, il va nous falloir une nouvelle requête HTTP.

La structure de la requête pour modifier un Pokémon est similaire aux deux autres requêtes précédentes, bien que nous allons utiliser une requête de type PUT (c’est le type de requête utilisé pour modifier une ressource) afin de persister les changements côté serveur :

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

export default class PokemonService {

  ...

  static updatePokemon(pokemon: Pokemon): Promise<Pokemon> {
    return fetch(`http://localhost:3001/pokemons/${pokemon.id}`, {
      method: 'PUT',
      body: JSON.stringify(pokemon),
      headers: { 'Content-Type': 'application/json'}
    })
    .then(response => response.json())
    .catch(error => this.handleError(error));
  }

  ...
}

La méthode updatePokemon permet de pousser les modifications apportées sur le pokémon passé en paramètre vers notre API Rest. Il y a quelques éléments à signaler dans cette méthode :

• Le type de la requête (ligne 9) : Cette fois-ci, contrairement aux requêtes de récupération de données, on passe un deuxième paramètre à la méthode fetch. Ce deuxième paramètre contient plusieurs informations, dont le type de la requête à envoyer. Comme nous souhaitons modifier la ressource de pokémon, nous passons PUT dans ce cas.
• Le corps de la requête (ligne 10) : Ensuite, on passe le nouveau pokémon modifié dans le corps de la requête, afin que l’API Rest puisse prendre connaissance des modifications à apporter. Pour transmettre les données de notre pokémon à travers le réseau, nous « encodons » tout ça dans une chaîne de caractères grâce à la méthode JSON.stringify, qui est une méthode JavaScript native. Nous n’avons rien besoin d’importer. 😉
• L’en-tête de la requête (ligne 11) : On doit préciser quel genre de données nous envoyons vers notre API Rest. Nous précisons donc qu’il s’agit de données au format JSON. Avec toutes ces informations, notre API Rest pourra traiter notre demande !

Notre requête est prête, il ne nous reste plus qu’à l’utiliser depuis notre formulaire d’édition de pokémons.

Chaque requête HTTP contient plusieurs informations dont une en-tête, une méthode, et un corps. Il est possible d’ajuster ces éléments en fonction des besoins de votre API Rest.