Sommaire

Requêtes Ajax et cycle de vie des composants React Ajax

Jusque-là, nous n’avons gardé nos tâches que dans le state local. Nous allons voir dans cette section comment aller récupérer les tâches depuis une API externe. L’appel Ajax n’aura en fait rien à voir avec React, nous allons utiliser la fonction fetch désormais disponible sur tous les navigateurs récents. En revanche, il est pratique de savoir comment gérer cela au mieux avec un composant React. fetch

Pour notre exemple, nous allons récupérer la liste de tâches depuis une API rendue disponible par JSON Placeholder (https://jsonplaceholder.typicode.com).

Celle-ci met simplement à disposition des ressources via une API REST, idéale pour tester des appels Ajax. L’URL que nous allons utiliser est la suivante : https://jsonplaceholder.typicode.com/users/10/todos

Celle-ci nous renvoie un résultat au format JSON : JSON

[ 
 { 
   "userId": 10, 
   "id": 181, 
   "title": "ut cupiditate sequi aliquam fuga maiores", 
   "completed": false 
 }, 
 { 
   "userId": 10, 
   "id": 182, 
   "title": "inventore saepe cumque et aut illum enim", 
   "completed": true 
 } 
]

La question est de savoir où dans notre application nous allons ...