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 :
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.