Comment récupérer des données en Javascript comme un pro

L'API de fetch nous permet de créer une requête HTTP afin d'accomplir un certain nombre de choses en Javascript , comme récupérer des données à partir d'une API, publier des données sur un serveur ou même simplement obtenir l'intégralité du contenu d'une page Web. Cette requête HTTP récupère de manière asynchrone les données de l'URL fournie et génère une sorte de réponse HTTP. Regardons comment cela fonctionne.

La fonction fetch() est une fonction globale, et elle est le plus souvent utilisée pour interagir avec les API. Si vous êtes nouveau, vous n'êtes pas seul - alors regardons comment fonctionne fetch() .

Utilisation de la récupération en Javascript

L'utilisation la plus élémentaire de fetch prend un argument - l'URL que nous voulons récupérer. Comme fetch génère des requêtes HTTP, nous devons toujours fournir une URL :

 let fetchExample = fetch("https://fjolt.com").then((res) => { // Do something with res });

Comme le résultat d'une récupération est asynchrone, nous pouvons utiliser then() pour intercepter la réponse et en faire quelque chose. La res intéressante à propos de la réponse ou de la réponse renvoyée est qu'elle contient un tas de méthodes intégrées, qui nous permettent d'analyser immédiatement le contenu que nous obtenons de fetch :

• res.text() - renvoie le contenu textuel d'une URL. S'il s'agit d'un site Web, il renvoie le code HTML.
• res.json() - renvoie des données JSON formatées, si elles existent.
• res.blob() - renvoie les données blob, s'il en existe.
• res.arrayBuffer() - renvoie les données du arrayBuffer, s'il en existe.
• res.formData() - renvoie les données formData, le cas échéant.

Étant donné que différentes URL produisent différents types de contenu, les méthodes ci-dessus nous permettent d'analyser ce contenu comme nous le souhaitons. Pour comprendre comment tout cela fonctionne, regardons deux exemples très courants.

Exemple 1 : Obtenir le contenu HTML d'un site Web à l'aide de Javascript Fetch

Comme mentionné ci-dessus, res.text() nous donne le contenu textuel d'une URL - nous pouvons donc l'utiliser pour obtenir l'intégralité du contenu HTML d'une URL. Une fois que nous avons attrapé notre réponse en utilisant res.text() , nous pouvons attraper la réponse avec un autre then , nous permettant de télécharger et de renvoyer le contenu de l'URL fournie :

 let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => { return data; }); // Now contains our website's HTML.

Si le lien n'existe pas, ou si une erreur se produit, notre objet de response contiendra une erreur. Par exemple, une page introuvable renverra 404 , ou une erreur de passerelle incorrecte renverra 502 .

Exemple 2 : Obtenir JSON via Javascript Fetch

Si le contenu d'une URL est constitué de JSON, nous pouvons utiliser le res.json() . Le code suivant, par exemple, renverra un objet JSON à partir de l'URL, en supposant que l'URL renvoie un JSON valide :

 let apiResponse = fetch("https://fjolt.com/api").then(res => res.json()).then((data) => { return data; }); // Now contains a JSON object - assuming one exists

Options de récupération de Javascript

Il est également important de comprendre les options disponibles dans Fetch. Ils viennent après l'URL, en tant qu'objet — c'est-à-dire fetch(URL, { options }) . Si vous avez déjà travaillé avec des requêtes HTTP, certaines peuvent vous être familières. La fonction de fetch affichée ci-dessous contient toutes les options possibles que vous pouvez utiliser :

 fetch("https://fjolt.com/", { body: JSON.stringify({ someData: "value" }) method: 'POST' mode: 'cors' cache: 'no-cache' credentials: 'same-origin' headers: { 'Content-Type': 'application/json' }, redirect: 'follow' referrerPolicy: 'no-referrer' });

Et voici un résumé de ce que chacun de ces signifie:

• body contient le corps du texte. Dans cet exemple, nous envoyons du JSON, qui doit être stringifié.
• est une method HTTP standard. Cela peut être POST / GET / DELETE / PUT / CONNECT / PATCH / TRACE / OPTIONS .
• mode fait référence si les demandes d'origine croisée sont acceptées. Cela peut être cors / no-cors / same-origin .
• cache fait référence à la façon dont le navigateur interagira avec le cache. Il peut s'agir de default / no-cache / reload / force-cache / only-if-cached .
• les informations d' credentials font référence si des cookies d'origine croisée doivent être envoyés avec la demande. Cela peut être include / same-origin / omit .
• headers contient tout en-tête associé à la requête. Il peut contenir n'importe quel en-tête HTTP - par exemple, ici, il affiche Content-Type - mais vous pouvez également avoir des en-têtes HTTP personnalisés.
• redirect détermine ce qui se passe si l'URL récupérée est redirigée. Il peut s'agir d'un follow / error /d' manual .
• referrerPolicy détermine la quantité d'informations de référence transmises avec la requête. Il peut s'agir no-referrer / no-referrer-when-downgrade / origin / origin-when-cross-origin / same-origin / strict-origin / strict-origin-when-cross-origin / unsafe-url .

N'oubliez pas que la récupération de Javascript est asynchrone

Lorsque nous utilisons fetch, il va à l'URL, rassemble les informations et nous fournit une response . Ce n'est pas immédiat, car charger l'URL, la télécharger et la ramener prend du temps. Si nous exécutons simplement fetch seul, un journal de console immédiatement après ne renverra qu'un Promise , pas la response de l'URL que nous voulons :

 let apiResponse = fetch("https://fjolt.com/api"); console.log(apiResponse); // Returns Promise<Pending>

Cela se produit parce que la fonction fetch() s'exécute, mais Javascript n'attend pas la response . En tant que tel, nous devons dire explicitement à Javascript de l'attendre, si nous voulons accéder à la response .

Il y a deux façons d'attendre fetch() :

• Nous pouvons utiliser then et manipuler la réponse de notre fetch() dans then() .
• Nous pouvons utiliser await et attendre le retour de la récupération avant d'utiliser son contenu.

Utiliser ensuite pour attendre une récupération en Javascript

L'utilisation de then est fréquemment utilisée pour intercepter et traiter les réponses de fetch. Le contenu de fetch() peut être manipulé dans la fonction de rappel then() , mais pas en dehors de celle-ci. Par exemple:

 let apiResponse = fetch("https://fjolt.com/api").then(res => res.json()).then((data) => { console.log(data); // We can do anything with the data from our api here. return data; }); console.log(apiResponse); // This will return Promise<Pending> // That means we can't use the apiResponse variable // outside of the then() function.

Si nous voulons utiliser le contenu de fetch() en dehors de then , nous devons utiliser await .

Utilisation de await pour attendre une récupération en Javascript

L'autre façon d'attendre une récupération consiste à utiliser le mot clé await . La plupart des navigateurs modernes prennent en charge Waits de niveau supérieur , mais si vous êtes préoccupé par la prise en charge ou si vous utilisez une version de Node.JS antérieure à 14.8, vous souhaiterez encapsuler tout code await dans une async function .

Si nous utilisons await, nous pouvons utiliser la réponse de notre API n'importe où dans notre fonction ou notre code, et utiliser n'importe quelle fonction de response , comme text() ou json() dessus. Par exemple:

 // Typically we wrap await in an async function // But most modern browsers and Node.JS support // await statements outside of async functions now. async getAPI() { let apiResponse = await fetch("https://fjolt.com/api"); let response = apiResponse.json(); // Since we waited for our API to respond using await // The response variable will return the response from the API // And not a promise. console.log(response); } getAPI();

Si vous souhaitez en savoir plus sur les opérations asynchrones, lisez notre tutoriel sur le Javascript asynchrone ici .

Conclusion

Dans ce guide, nous avons expliqué comment fonctionne la récupération. Nous avons montré les différentes options que vous pouvez envoyer avec vos requêtes fetch() et comment attendre la réponse en utilisant des concepts asynchrones en Javascript. fetch() est un outil incroyablement puissant en Javascript, et est fréquemment utilisé dans les gros produits tout le temps. J'espère que vous avez apprécié cet article.