Comment utiliser l'API Fetch en JavaScript

En développement Web, vous devrez souvent vous connecter / communiquer avec d'autres serveurs Web pour obtenir des informations / données. Par exemple, lorsque vous vous inscrivez à un nouveau compte sur certains sites Web, vous verrez souvent une option pour vous inscrire à l'aide de votre Gmail ou d'autres comptes tiers. Cela vous permet de vous inscrire à un nouveau compte en un seul clic au lieu de remplir manuellement l'ensemble du formulaire. Lorsque vous sélectionnez l'option «Inscrivez-vous à l'aide d'un compte tiers», l'application communique avec le serveur de l'application tierce et envoie une demande pour accéder à vos informations qui y sont stockées. Cette demande est envoyée via l'API qui est un ensemble de règles qui régissent comment différentes applications ou systèmes communiquent entre eux. Dans cet article, nous apprendrons à utiliser JavaScript pour envoyer de telles demandes.

Quelle est l'API Fetch

API Fetch fournit un simple aller chercher() Méthode en JavaScript qui est utilisée pour récupérer, accéder et manipuler les ressources sur le réseau. Le aller chercher() La méthode vous permet de passer des appels JavaScript asynchrones et XML (AJAX) avec JavaScript qui ont été précédemment effectués à l'aide de XMLHttpRequest. Les demandes asynchrones fonctionnent parallèles au programme principal et n'arrêtent pas l'exécution du code en dessous d'eux. Le code sous la demande de l'API Fetch continuera en cours d'exécution même si l'API n'a renvoyé aucune réponse. Lorsque l'API répond à l'appel Ajax, alors le aller chercher() la méthode est reproduite.

API Fetch utilise des promesses et fournit des fonctionnalités puissantes, ce qui facilite la gestion des demandes Web et de leurs réponses; C'est un excellent moyen d'éviter des enfers de rappel qui ont été créés lors de l'utilisation de XMLHttpRequest.

Note: La console du navigateur est utilisée pour la démonstration d'exemples dans cet article.

La syntaxe de l'API Fetch en JavaScript

Nous devons appeler le aller chercher() Méthode afin d'utiliser l'API Fetch dans notre code JavaScript. Le aller chercher() La méthode prend l'URL de l'API comme argument.

Fetch (URL)

Nous devons définir le alors() Méthode après le aller chercher() méthode:

.alors (fonction ()
)

La valeur de retour du aller chercher() La méthode est une promesse. Si cette promesse est résolue, le code présent dans le corps du alors() la méthode est exécutée. Le corps du alors() La méthode doit contenir le code qui peut gérer les données envoyées par l'API.

Nous devons alors définir le attraper() méthode; le attraper() La méthode s'exécute uniquement dans le cas où la promesse serait rejetée:

.catch (function ()
);

Dans l'ensemble aller chercher() La méthode devrait ressembler à ceci:

Fetch (URL)
.alors (fonction ()
)
.catch (function ()
);

Maintenant que nous avons une compréhension de la syntaxe d'API Fetch, nous pouvons maintenant passer aux exemples du monde réel de l'utilisation de la récupération() Méthode sur une vraie API.

Comment utiliser la méthode Fetch pour obtenir des données d'une API

Dans cet exemple, nous utiliserons l'API d'un utilisateur GitHub pour obtenir les données d'informations utilisateur et les afficher sur la console en utilisant uniquement Vanilla JavaScript; Alors, commençons:

Tout d'abord, nous créerons une variable appelée URL; Cette variable contiendra l'URL de l'API qui renverra les dépositions d'un utilisateur nommé Fabpot:

const url = 'https: // api.github.com / utilisateurs / FabPot / Repos ';

Maintenant nous allons utiliser le aller chercher() Méthode pour appeler l'API utilisateur GitHub;

Fetch (URL)

Le aller chercher() La méthode prend l'URL comme argument:

Fetch (URL)
.alors (fonction (data)
)
)
.catch (fonction (erreur)
);

Dans le code ci-dessus, nous avons appelé l'API Fetch pour obtenir les référentiels d'un utilisateur nommé Fabpot de github. Nous avons transmis l'URL à l'API utilisateur GitHub comme argument pour récupérer l'API. L'API renvoie ensuite une réponse qui est un objet avec une série de méthodes; Ces méthodes peuvent être utilisées pour effectuer différentes fonctions sur les informations reçues. Si nous voulons convertir l'objet en JSON, nous pouvons utiliser la méthode JSON ().

Pour convertir l'objet en JSON, nous devons ajouter le alors() méthode. Le alors() La méthode contiendra une fonction; La fonction prendra un argument appelé réponse:

Fetch (URL)
.alors ((réponse) =>)

Le paramètre de réponse est utilisé pour stocker l'objet qui est renvoyé de l'API. Cet objet est converti en données JSON à l'aide de la méthode JSON ():

Fetch (URL)
.alors ((réponse) => réponse.JSON ())

Maintenant, nous pouvons produire les données sous forme de JSON en ajoutant un autre alors() déclaration; Cette instruction contient une fonction qui prend une variable nommée Data comme argument:

.alors (fonction (data)
)
)

Nous utilisons ensuite la console.Méthode log () à l'intérieur du corps de la fonction pour sortir les données sur la console.

.alors (fonction (data)
console.journal (données);
)

Maintenant, nous allons ajouter la fonction Catch () pour enregistrer l'erreur potentielle à la console au cas où la promesse n'est pas tenue:

.catch (err
console.error (err);
);

Dans l'ensemble, la demande pour obtenir une liste des référentiels de l'utilisateur de GitHub devrait ressembler à ceci:

Fetch (URL)
.alors ((réponse) => réponse.JSON ())
.alors ((data) =>
console.journal (données);
)
.catch (err
console.error (err);
);

Dans la capture d'écran donnée ci-dessus, la promesse a été résolue et le corps du .alors() La méthode a été exécutée. Si la promesse n'était restée pas résolue pour une raison quelconque, alors le corps du .attraper() La méthode aurait été exécutée, ce qui ferait toute la gestion des erreurs. Nous venons d'utiliser le .attraper() Méthode pour imprimer un message d'erreur dans le cas où la promesse n'est pas réalisée.

Conclusion

La communication et la récupération des données provenant de sources tierces sont une partie essentielle du développement Web. Il a été réalisé en utilisant un outil complexe nommé XMLHttpRequest qui a provoqué Callback Hells; Maintenant, un outil beaucoup plus simple appelé API Fetch est utilisé pour envoyer des appels ajax en JavaScript Vanilla car il est bien meilleur pour gérer les demandes AJAX. Dans cet article, nous avons appris à utiliser la méthode API Fetch pour passer des appels ajax dans JavaScript Vanilla.