Comment récupérer les données d'une API en JavaScript
La méthode fetch ()
Cette méthode est utilisée pour collecter des données auprès de toute API qui répond à la demande d'un client sous la forme de JSON ou XML. La syntaxe de la méthode Fetch est assez simple, il ne faut qu'un seul argument obligatoire et un paramètre facultatif en tant que
Fetch (URL, options);- URL: L'URL de l'API pour atteindre et demander une réponse sous la forme de Json ou Xml
- Options: paramètres facultatifs qui nous aident à changer la demande de "obtenir" pour "poste" et d'autres variantes
- Note: La méthode de récupération renvoie une promesse
Pour utiliser la méthode fetch () dans votre javascript, vous devez l'envelopper dans une fonction asynchrone et appeler cette fetch () avec le mot-clé Await. Avec la fonction asynchrone, la syntaxe est définie comme
fonction async function_identifier (URL)const Response = attendre fetch (URL);
Var Données = attendre la réponse.JSON ();
Récupérer les données d'une API à l'aide de la méthode fetch () en javascript
Pour tester la méthode fetch () pour récupérer les données d'une API, vous avez besoin d'une API factice ou d'une API Mock. À cette fin, nous utilisons l'API facturée fournie par Req | res avec l'URL "https: // reqres.dans / API / Produits / 3".
La deuxième chose dont nous avons besoin est une compréhension de base de la façon dont promesses Travailler en JavaScript, pour en savoir plus sur les promesses en JavaScript, vous pouvez visiter ce lien.
Ensuite, nous avons besoin d'une page HTML factice avec quelques éléments de base à l'intérieur. Pour cet exemple, nous avons utilisé les lignes suivantes dans le HTML:
Récupérer les données de l'API
Cela devrait nous donner la page Web suivante:
Pour le code JavaScript, la première chose que nous devons faire est de stocker l'URL dans une variable distincte avec la ligne suivante:
const url = "https: // reqres.in / api / produits / 3 ";Ensuite, nous définissons un fonction asynchrone Pour obtenir les données de l'API en utilisant le URL Nous venons de stocker avec les lignes suivantes:
fonction asynchrone getDataFromapi (url)const Response = attendre fetch (URL);
Var Données = attendre la réponse.JSON ();
console.journal (données);
Ce que nous faisons dans ce code, c'est que nous attendons un promesse du Fetch (URL) et stocker cette promesse à l'intérieur du réponse variable.
Une fois que nous avons obtenu la promesse, nous devons le convertir au format JSON en utilisant le réponse.JSON (). Depuis réponse.JSON () est également une promesse qui renvoie les données, nous utilisons le mot-clé attendre.
Enfin, nous imprimons les données obtenues à partir de l'API à l'aide de la fonction de journal de console.
Maintenant, tout ce que nous devons faire est d'appeler cette fonction asynchrone et de passer dans l'URL de l'API avec la ligne suivante:
getDatafromapi (URL));L'extrait de code complet est:
const url = "https: // reqres.in / api / produits / 3 ";fonction asynchrone getDataFromapi (url)
const Response = attendre fetch (URL);
Var Données = attendre la réponse.JSON ();
console.journal (données);
getDataFromapi (URL);
Si vous exécutez cette page Web et vous dirigez vers la console dans les outils de développeur du navigateur, vous verrez la sortie suivante:
C'est tout, vous avez réussi à récupérer les données d'une API à l'aide de JavaScript.
Conclusion
Le aller chercher() Méthode du API récupérer peut être utilisé pour récupérer les données d'un API en Javascript de vanille. Lorsque vous travaillez avec des applications réelles, vous devez savoir comment interagir avec une API pour envoyer et recevoir des données. Dans cet article, nous avons passé en revue la méthode fetch () pour envoyer un req à une API simulée et avons reçu des données de cette API, puis avons converti ces données en JSON à l'aide de promesses afin qu'elle puisse être utilisée dans notre application.