L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Introduction à l'API Fetch –
Dans cet article, nous verrons à quoi ressemble la nouvelle API Fetch, quels sont les problèmes qu'elle résout et la manière la plus pratique de récupérer des données distantes dans votre page web en utilisant la fonction fetch () .
Pendant des années, XMLHttpRequest a été le compagnon de confiance des développeurs web. Que ce soit directement ou sous le capot, XMLHttpRequest a permis Ajax et un tout nouveau type d'expérience interactive, de Gmail à Facebook.
Cependant, XMLHttpRequest est lentement remplacé par le Récupérer l'API . Les deux peuvent être utilisés pour faire des requêtes réseau, mais l'API Fetch est basée sur Promise, ce qui permet une syntaxe plus propre et plus concise et vous aide à éviter l'appel de hell
L'API Fetch
L'API Fetch fournit une méthode fetch () définie dans l'objet window que vous pouvez utiliser pour effectuer des requêtes. Cette méthode renvoie une Promesse que vous pouvez utiliser pour récupérer la réponse de la requête.
La méthode fetch n'a qu'un seul argument obligatoire, qui est l'URL de la ressource que vous souhaitez aller chercher. Un exemple très basique ressemblerait à ceci. Cela récupère les cinq premiers messages de r / javascript sur Reddit :
fetch ('https://www.reddit.com/r/javascript/top/.json?limit=5')
.then (res => console.log (res));
Si vous inspectez la réponse dans la console de votre navigateur, vous devriez voir un objet Response avec plusieurs propriétés:
{
corps: ReadableStream
bodyUsed: false
en-têtes: en-têtes {}
ok: vrai
redirigé: false
statut: 200
statusText: ""
type: "cors"
url: "https://www.reddit.com/top/.json?count=5"
}
Il semble que la demande ait été couronnée de succès, mais où sont nos cinq premiers posts? Découvrons.
Chargement de JSON
On ne peut pas bloquer l'interface utilisateur en attente de la fin de la requête. C'est pourquoi fetch () renvoie une promesse un objet qui représente un résultat futur. Dans l'exemple ci-dessus, nous utilisons la méthode puis pour attendre la réponse du serveur et la connecter à la console.
Voyons maintenant comment nous pouvons extraire la charge JSON de cette réponse une fois la requête complète:
fetch ('https://www.reddit.com/r/javascript/top/.json?limit=5')
.then (res => res.json ())
.then (json => console.log (json));
Nous commençons la demande en appelant fetch () . Lorsque la promesse est remplie, elle renvoie un objet Response qui expose une méthode json . Dans le premier then () nous pouvons appeler cette méthode json pour renvoyer le corps de réponse comme JSON.
Cependant, la méthode json renvoie aussi une promesse , ce qui signifie que nous devons enchaîner sur un autre then () avant que la réponse JSON ne soit enregistrée sur la console.
Et pourquoi json () renvoie-t-il une promesse? Parce que HTTP vous permet de diffuser du contenu dans le bloc client par bloc, même si le navigateur reçoit une réponse du serveur, le corps du contenu n'est peut-être pas encore là!
Async … await
The . then () syntaxe est sympa, mais une façon plus concise de traiter les promesses en 2018 est d'utiliser async ... await – une nouvelle syntaxe introduite par ES2017. L'utilisation de async Ú await signifie que nous pouvons marquer une fonction comme async puis attendre que la promesse se termine avec le mot-clé await et accéder au résultat en tant que objet normal. Les fonctions asynchrones sont supportées dans tous les navigateurs modernes (pas IE ou Opera Mini) et Node.js 7.6 +
Voici à quoi ressemblerait l'exemple ci-dessus (légèrement développé) en utilisant async ... await : [19659007] async function fetchTopFive (sub) {
const URL = `https://www.reddit.com/r/$ {sub} /top/.json? limite = 5`;
const fetchResult = fetch (URL)
const response = attendez fetchResult;
const jsonData = wait response.json ();
console.log (jsonData);
}
fetchTopFive ('javascript');
Pas beaucoup a changé. Mis à part le fait que nous avons créé une fonction async à laquelle nous transmettons le nom du subreddit, nous attendons maintenant le résultat de l'appel de fetch () puis attend de nouveau pour récupérer le JSON de la réponse
C'est le flux de travail de base, mais les choses impliquant des services distants ne se déroulent pas toujours correctement.
Gestion des erreurs
Imagine que nous demandions serveur pour une ressource non existante ou une ressource nécessitant une autorisation. Avec fetch () vous devez gérer les erreurs au niveau de l'application, comme les réponses 404, à l'intérieur du flux normal. Comme nous l'avons vu précédemment, fetch () renvoie un objet Response avec une propriété ok . Si response.ok est true le code d'état de réponse se situe dans la plage 200:
async function fetchTopFive (sub) {
const URL = `http: // httpstat.us / 404`; // Renvoie un 404
const fetchResult = fetch (URL)
const response = attendez fetchResult;
if (response.ok) {
const jsonData = wait response.json ();
console.log (jsonData);
} autre {
throw Erreur (response.statusText);
}
}
fetchTopFive ('javascript');
La signification d'un code de réponse du serveur varie de l'API à l'API, et souvent vérifier response.ok peut ne pas suffire. Par exemple, certaines API renverront une réponse 200 même si votre clé API n'est pas valide. Toujours lire la documentation de l'API!
Pour gérer une panne de réseau, utilisez un [try][19459004trycatch:
async function fetchTopFive (sub) {
const URL = `https://www.reddit.com/r/$ {sub} /top/.json? limite = 5`;
essayez {
const fetchResult = fetch (URL)
const response = attendez fetchResult;
const jsonData = wait response.json ();
console.log (jsonData);
} catch (e) {
lancer Erreur (e);
}
}
fetchTopFive ('javvascript'); // Notez l'orthographe incorrecte
Le code à l'intérieur du bloc catch ne s'exécute que lorsqu'une erreur réseau se produit
Vous avez appris les bases de la création de requêtes et de la lecture des réponses.
Modifier la méthode de demande et les en-têtes
En regardant l'exemple ci-dessus, vous vous demandez peut-être pourquoi vous ne pouvez pas utiliser l'un des wrappers XMLHttpRequest existants . La raison en est que l'API fetch vous offre plus que la méthode fetch () .
Bien que vous devez utiliser la même instance de XMLHttpRequest pour exécuter la requête et récupérer le réponse, l'API de récupération vous permet de configurer des objets de requête explicitement.
Par exemple, si vous devez modifier la façon dont fetch () effectue une requête (par exemple pour configurer la méthode de requête), ] Demande objet à la fonction fetch () . Le premier argument du constructeur Request est l'URL de la demande, et le second argument est un objet option qui configure la requête:
async function fetchTopFive (sub) {
const URL = `https://www.reddit.com/r/$ {sub} /top/.json? limite = 5`;
essayez {
const fetchResult = fetch (
nouvelle requête (URL, {méthode: 'GET', cache: 'reload'})
)
const response = attendez fetchResult;
const jsonData = wait response.json ();
console.log (jsonData);
} catch (e) {
lancer Erreur (e);
}
}
fetchTopFive ('javascript');
Ici, nous avons spécifié la méthode request et lui avons demandé de ne jamais mettre en cache la réponse.
Vous pouvez changer les en-têtes de requête en assignant un objet Headers au champ request headers . Voici comment demander du contenu JSON uniquement avec l'en-tête 'Accepter' :
const headers = new Headers ();
headers.append ('Accepter', 'application / json');
const request = new Demande (URL, {méthode: 'GET', cache: 'reload', en-têtes: en-têtes});
Vous pouvez créer une nouvelle requête à partir d'une ancienne pour la modifier pour un autre cas d'utilisation. Par exemple, vous pouvez créer une requête POST à partir d'une requête GET à la même ressource. Voici un exemple:
const postReq = new Request (request, {méthode: 'POST'});
Vous pouvez également accéder aux en-têtes de réponse, mais gardez à l'esprit qu'il s'agit de valeurs en lecture seule.
fetch (request) .then (response => console.log (response.headers));
La requête et la réponse suivent de près la spécification HTTP; vous devriez les reconnaître si vous avez déjà utilisé un langage côté serveur. Si vous voulez en savoir plus, vous pouvez lire tout sur la page Fetch API sur MDN .
Tout rassembler
Pour terminer l'article, voici un exemple exécutable Démontrer comment extraire les cinq premiers messages d'un subreddit particulier et afficher leurs détails dans une liste
Voir le Pen Récupérer l'API par SitePoint ( @SitePoint ) le ] CodePen .
Essayez d'entrer quelques subreddits (par exemple 'javascript', 'node', 'linux', 'lolcats') ainsi que quelques uns qui ne sont pas existants.
Ici
Dans cet article, vous avez vu à quoi ressemble la nouvelle API Fetch et quels sont les problèmes qu'elle résout. J'ai montré comment récupérer des données distantes avec la méthode fetch () comment gérer les erreurs et créer Request objets pour contrôler la méthode de requête et les en-têtes.
Et comme le graphique suivant montre, le soutien pour fetch () est bon. Si vous avez besoin de prendre en charge les anciens navigateurs, un polyfill est disponible .
La prochaine fois que vous utiliserez une bibliothèque comme jQuery pour faire des requêtes Ajax, prenez le temps de réfléchir si vous pouvez utiliser des méthodes de navigateur natives
Développeur full-stack travaillant avec Scala et JavaScript.
Source link