Introduction à l'API JavaScript Fetch

Par rapport à Xmlhttprequest Et les bibliothèques construites autour de lui, comme Jquery.ajax, le API récupérer Définit une façon plus moderne et plus propre de réaliser des demandes asynchrones, en fonction de l'utilisation des promesses. Dans cet article, nous verrons certaines des interfaces fournies par l'API, comme Demande et Réponse, Et nous apprendrons à utiliser le aller chercher Méthode pour effectuer différents types de demandes asynchrones.

Dans ce tutoriel, vous apprendrez:

• Comment envoyer des demandes asynchrones en utilisant la méthode de récupération
• Comment travailler avec les objets de demande et de réponse fournis par l'API Fetch

Exigences et conventions logicielles utilisées

Utilisation de base

Le API récupérer représente les demandes et réponses HTTP en utilisant Demande et Réponse interfaces et fournit la méthode de récupération pour envoyer des demandes de manière asynchrone. Commençons par un exemple vraiment basique de la façon de l'utiliser.

Le aller chercher la méthode n'a qu'un seul argument obligatoire, qui est soit le chemin de la ressource à récupérer, soit un Demande objet. Lorsque seul ce paramètre est transmis à la fonction, un OBTENIR La demande est effectuée pour récupérer la ressource spécifiée. Pour le bien de cet exemple, nous utiliserons la NASA API Appel qui renvoie des informations sur l'astronomique «image du jour» au format JSON. Voici notre code:

fetch ('https: // api.NASA.Gov / Planetary / Apod?api_key = demo_key ') .alors (réponse => réponse.JSON ()) .alors (json_object => console.log (json_object)) .Catch (raison => console.journal (raison))

Expliquons brièvement comment fonctionne le code ci-dessus.La fonction Fetch renvoie un promesse: Si cette promesse est tenue, elle se résout par un Réponse objet qui représente le Réponse HTTP à la demande que nous avons envoyée.

Le alors Méthode de la promesse L'objet est appelé lorsque la promesse existe en attente État. N'oublions pas que la méthode se renvoie une nouvelle promesse et accepte jusqu'à deux rappels comme ses arguments: le premier est appelé si la promesse est tenue; le second s'il est rejeté. Ici, nous n'avons fourni le premier depuis que nous avons utilisé le attraper Méthode à cet effet (nous parlerons de la gestion des erreurs en une minute).

Le rappel utilisé comme premier argument du alors Méthode, prend la valeur de réalisation de la promesse comme argument, qui dans ce cas est le Réponse objet. Cet objet, parmi les autres, a une méthode appelée JSON () que nous appelons le corps du rappel. Quelle est cette méthode pour? Il lit le flux de réponse jusqu'à sa fin et se rend une promesse qui se résout avec le corps de la réponse étant analysée comme Json.

Comme nous le savons, si un gestionnaire fonctionne du alors la méthode renvoie une promesse, la valeur de réalisation de ladite promesse est utilisée comme la valeur de réalisation de la promesse renvoyée par le alors Méthode elle-même. C'est pourquoi le Json L'objet est disponible comme l'argument du premier rappel de la seconde alors Méthode dans l'exemple. Tout ce qui précède se produit de manière asynchrone. Voici le résultat de l'exécution du code:

"Copyright": "Emilio Rivero Padilla", "Date": "2019-05-21", "Explication": "Ces trois nébuleuses brillantes sont souvent présentées sur des visites télescopiques de la constellation du Sagittaire et des étoiles surpeuplées du Central Milky Chemin. En fait, le touriste cosmique du XVIIIe siècle Charles Messier en a catalogué deux; M8, la grande nébuleuse juste à gauche du centre et le M20 coloré en haut à gauche. La troisième région d'émission comprend NGC 6559 et peut être trouvée à droite de M8. Tous les trois sont des pépinières stellaires d'environ cinq mille années-lumière environ distantes. Plus d'une centaine d'années-lumière de diamètre, le vaste M8 est également connu sous le nom de nébuleuse du lagon. Le surnom populaire du M20 est le trifid. L'hydrogène gazeux brillant crée la couleur rouge dominante des nébuleuses d'émission. En contraste frappant, les teintes bleues dans le trifid sont dues à la lumière étoilée réfléchie par la poussière. Les étoiles bleu vif récemment formées sont visibles à proximité. Le skyscape composite coloré a été enregistré en 2018 dans le parc national de Teide dans les îles Canaries, en Espagne."," hdurl ":" https: // apod.NASA.Gov / apod / image / 1905 / m8m20_padilla_1534.jpg "," media_type ":" image "," service_version ":" v1 "," title ":" champ profond: nébuleuse de sagittaire "," url ":" https: // apod.NASA.Gov / apod / image / 1905 / m8m20_padilla_960.jpg "

Dans l'exemple ci-dessus, nous avons analysé le corps de la réponse comme Json. Il y a des cas dans lesquels nous voulons analyser le corps de réponse différemment. Certaines méthodes qui peuvent nous aider dans ces cas sont:

• Réponse.goutte(): prend un flux de réponse et le lit jusqu'à ce qu'il se termine. Renvoie une promesse qui résout Goutte objet, qui est un objet de fichier de données brutes immuables.
• Réponse.texte(): lit un flux de réponse et renvoie une promesse qui se résout en texte, spécifiquement vers un Usvstring objet.
• Réponse.Données de formulaire(): lit un flux de réponse et renvoie une promesse qui résout Données de formulaire objet qui représente les champs de forme et leurs valeurs.
• Réponse.ArrayBuffer (): Lit un flux de réponse et renvoie une promesse qui résout Arraybuffer objet, utilisé pour représenter les données binaires brutes.

Envoi plus de demandes complexes

Celui que nous avons vu ci-dessus était le cas d'utilisation le plus simple de la possibilité du aller chercher méthode. Il y a des cas dans lesquels nous devons définir et envoyer des demandes plus complexes. Nous avons deux façons d'accomplir la tâche: le premier consiste à fournir un deuxième paramètre au aller chercher Méthode, un init objet; la seconde implique la création explicite d'un Demande objet, qui est ensuite transmis comme un argument au aller chercher méthode. Voyons les deux.

Fournir des paramètres de demande

Dites que nous voulons effectuer un POSTE Demande, envoyant des données à un emplacement spécifié. Si nous souhaitons spécifier les paramètres nécessaires pour accomplir cette tâche directement lors de l'exécution du aller chercher Méthode, nous pouvons y transmettre un deuxième argument, qui est un objet qui nous a permis d'appliquer des paramètres personnalisés à la demande. Nous pouvons écrire:

fetch ('https: // httpbin.org / post ', méthode:' post ', en-têtes: nouveaux en-têtes (' contenu-type ':' application / json '), corps: json.Stringify ('name': 'Frodo', 'LastName': 'Baggins')) 

Tout comme ci-dessus, le premier argument de la méthode Fetch représente la destination de la demande. Dans ce cas, nous envoyons notre demande à https: // httpbin.Org / Post, qui est un point final fourni par le httbin.org service à tester POSTE demandes.

Le deuxième argument facultatif de la fonction, comme nous l'avons dit ci-dessus, est un objet que nous pouvons utiliser pour spécifier des paramètres supplémentaires pour la demande. Dans ce cas, tout d'abord, nous avons spécifié le Verbe http qui doit être utilisé pour la demande (post). Après cela, nous avons utilisé une autre interface fournie par l'API Fetch, Têtes, qui comprend des méthodes et des propriétés utiles pour manipuler les demandes et les en-têtes de réponse. Dans ce cas, nous venons de définir le «Type de contenu» Paramètre d'en-tête, déclarant le type de contenu transporté par nos demandes Application / JSON. Enfin, nous avons défini le corps réel de la demande: nous avons utilisé le chasser Méthode de la Json objet pour convertir un objet en un Chaîne JSON.

Exécuter le code ci-dessus, un POSTE La demande est envoyée au URL Nous avons spécifié. Le httpbin.Org Service, dans ce cas, renvoie une réponse qui a elle-même «Application / JSON» comme type de contenu, et décrit les données que nous avons envoyées avec notre demande:

fetch ('https: // httpbin.org / post ', méthode:' post ', en-têtes: ' contenu-type ':' application / json ', corps: json.Stringify ('name': 'Frodo', 'LastName': 'Baggins')) .alors (réponse => réponse.JSON ()) .alors (json_object => console.log (json_object))

Le résultat est, comme nous l'avons dit ci-dessus, une description de notre demande:

? : action.5 "," Content-Length ":" 37 "," Content-Type ":" Application / JSON "," DNT ":" 1 "," Host ":" httpbin.org "," origine ":" http: // localhost: 8080 "," référer ":" http: // localhost: 8080 / "," user-agent ":" mozilla / 5.0 (x11; Fedora; Linux x86_64; RV: 66.0) Gecko / 20100101 Firefox / 66.0 "," JSON ": " LastName ":" Baggins "," Name ":" Frodo "," Origin ":" xx.xx.xx.xx, xx.xx.xx.xx "," url ":" https: // httpbin.org / post "

Construire un objet de demande manuellement

Comme alternative au code ci-dessus, nous pouvons créer un Demande objet explicitement, puis le passer au aller chercher méthode:

Laissez la demande = nouvelle demande ('https: // httpbin.org / post ', méthode:' post ', en-têtes: nouveaux en-têtes (' contenu-type ':' application / json '), corps: json.Stringify ('name': 'Frodo', 'LastName': 'Baggins'))

Pour l'envoyer en utilisant Fetch, nous écrivons simplement:

Fetch (demande) .alors (réponse => réponse.JSON ()) .alors (json_object => console.log (json_object)) 

La gestion des erreurs

Une différence fondamentale entre le comportement du aller chercher Méthode et Jquery.ajax () est la façon dont une réponse avec un Http L'état d'erreur (un code d'état qui n'est pas dans la plage 200-299) est géré. Dans un tel cas, lors de l'utilisation de la méthode de récupération, la promesse rendue par elle est toujours considérée. Le seul cas dans lequel la promesse est rejetée est lorsqu'il y a une erreur de communication et que la demande ne peut pas atteindre sa destination.

Clarifions-le avec un exemple. Toujours en utilisant le httpbin.org Service, nous envoyons un OBTENIR Demande au 'https: // httpbin.Org / Post 'point de terminaison que nous avons utilisé dans l'exemple précédent, qui accepte uniquement POSTE demandes. Nous voyons d'abord ce qui se passe lors de l'utilisation Jquery.ajax ():

$.ajax (type: 'get', URL: 'https: // httpbin.org / post ') .alors (() => console.Log ('La promesse a été tenue!')) .Catch (jqxhr => console.journal ('promesse rejetée parce que le code d'état était $ jqxhr.statut'))

Le code ci-dessus renvoie:

Promesse rejetée parce que le code de statut était 405

Cela indique que la promesse a été rejetée et donc le attraper L'appel de la méthode a été appelé. Lorsque la même demande est envoyée en utilisant le aller chercher Méthode, la promesse résultante est pas rejeté:

fetch ('https: // httpbin.org / post ') .alors (réponse => console.log ('promesse a été tenu même si le statut de réponse est $ réponse.statut')) .Catch (raison => console.journal ('promesse a été rejetée!'))

Le résultat de l'exécution du code ci-dessus est:

La promesse a été tenue même si le statut de réponse est 405

Ce qui s'est passé? Puisque nous avons utilisé un Verbe http Non autorisé pour le critère d'évaluation spécifié, nous avons reçu une réponse avec un Méthode non autorisée Code d'état (405). Cependant, cela n'a pas fait rejeter la promesse et le rappel du alors la méthode a été appelée. Si nous essayons le même code ne modifiant que la destination de demande en un chemin inexistant, 'https: // foo.bar ', le code renvoie:

La promesse a été rejetée!

Cette fois, le rappel utilisé comme argument du attraper la méthode a été appelée. Se souvenir de ce comportement est vraiment important: la promesse retournée par le aller chercher La méthode est rejetée uniquement si la communication avec le serveur échoue et que la demande ne peut pas être terminée. Pour être absolument sûr que notre demande est réussie, nous devons vérifier le code d'état du Réponse objet, qui est disponible dans son statut propriété ou tester le d'accord propriété en lecture seule, qui contient un booléen déclarant si le résultat a réussi ou non.

Conclusions

Dans ce tutoriel, nous avons appris à connaître le javascript API récupérer, et a vu comment nous pouvons l'utiliser comme alternative à d'autres méthodes pour effectuer des demandes asynchrones comme Jquery.ajax. Nous avons vu comment effectuer des demandes de base et comment construire des demandes plus complexes. Nous avons également examiné comment la promesse retournée par le aller chercher La méthode se comporte lorsqu'une réponse avec un code d'état sur la plage 200-299 est reçue et lorsqu'une erreur de connexion se produit. Pour en savoir plus sur l'API Fetch, vous pouvez consulter les documents Web Mozilla.

Tutoriels Linux connexes:

• Une introduction à l'automatisation Linux, des outils et des techniques
• Choses à installer sur Ubuntu 20.04
• Masterring Bash Script Loops
• Comment travailler avec l'API WooCommerce REST avec Python
• Introduction aux boucles JavaScript
• Mint 20: Mieux que Ubuntu et Microsoft Windows?
• Boucles imbriquées dans les scripts bash
• Comment configurer un serveur OpenVPN sur Ubuntu 20.04
• Choses à faire après l'installation d'Ubuntu 20.04 Focal Fossa Linux
• Linux peut-il obtenir des virus? Exploration de la vulnérabilité de Linux…