L'API de nous permet de créer une requête HTTP afin d'accomplir un certain nombre de choses en , 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. fetch Javascript La fonction 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() 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 génère des requêtes HTTP, nous devons toujours fournir une URL : fetch 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 pour intercepter la réponse et en faire quelque chose. La 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 : then() res fetch - renvoie le contenu textuel d'une URL. S'il s'agit d'un site Web, il renvoie le code HTML. res.text() - renvoie des données JSON formatées, si elles existent. res.json() - renvoie les données blob, s'il en existe. res.blob() - renvoie les données du arrayBuffer, s'il en existe. res.arrayBuffer() - renvoie les données formData, le cas échéant. res.formData() É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, 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 , nous pouvons attraper la réponse avec un autre , nous permettant de télécharger et de renvoyer le contenu de l'URL fournie : res.text() res.text() then 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 contiendra une erreur. Par exemple, une page introuvable renverra , ou une erreur de passerelle incorrecte renverra . response 404 502 Exemple 2 : Obtenir JSON via Javascript Fetch Si le contenu d'une URL est constitué de JSON, nous pouvons utiliser le . Le code suivant, par exemple, renverra un objet JSON à partir de l'URL, en supposant que l'URL renvoie un JSON valide : res.json() 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 . Si vous avez déjà travaillé avec des requêtes HTTP, certaines peuvent vous être familières. La fonction de affichée ci-dessous contient toutes les options possibles que vous pouvez utiliser : fetch(URL, { options }) fetch 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: contient le corps du texte. Dans cet exemple, nous envoyons du JSON, qui doit être stringifié. body est une HTTP standard. Cela peut être / / / / / / / . method POST GET DELETE PUT CONNECT PATCH TRACE OPTIONS fait référence si les demandes d'origine croisée sont acceptées. Cela peut être / / . mode cors no-cors same-origin fait référence à la façon dont le navigateur interagira avec le cache. Il peut s'agir de / / / / . cache default no-cache reload force-cache only-if-cached les informations d' font référence si des cookies d'origine croisée doivent être envoyés avec la demande. Cela peut être / / . credentials include same-origin omit contient tout en-tête associé à la requête. Il peut contenir n'importe quel en-tête HTTP - par exemple, ici, il affiche - mais vous pouvez également avoir des en-têtes HTTP personnalisés. headers Content-Type détermine ce qui se passe si l'URL récupérée est redirigée. Il peut s'agir d'un / /d' . redirect follow error manual détermine la quantité d'informations de référence transmises avec la requête. Il peut s'agir / / / / / / / . referrerPolicy 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 . 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 , pas la de l'URL que nous voulons : response Promise response let apiResponse = fetch("https://fjolt.com/api"); console.log(apiResponse); // Returns Promise<Pending> Cela se produit parce que la fonction s'exécute, mais Javascript n'attend pas la . En tant que tel, nous devons dire explicitement à Javascript de l'attendre, si nous voulons accéder à la . fetch() response response Il y a deux façons d'attendre : fetch() Nous pouvons utiliser et manipuler la réponse de notre dans . then fetch() then() Nous pouvons utiliser et attendre le retour de la récupération avant d'utiliser son contenu. await Utiliser ensuite pour attendre une récupération en Javascript L'utilisation de est fréquemment utilisée pour intercepter et traiter les réponses de fetch. Le contenu de peut être manipulé dans la fonction de rappel , mais pas en dehors de celle-ci. Par exemple: then fetch() then() 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 en dehors de , nous devons utiliser . fetch() then 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é . La plupart des navigateurs modernes prennent en charge Waits de , 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 dans une . await niveau supérieur await 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 , comme ou dessus. Par exemple: response text() json() // 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 et comment attendre la réponse en utilisant des concepts asynchrones en Javascript. 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. fetch() fetch()
