La méthode Fetch de JavaScript est une API de réseau qui permet de réaliser des requêtes HTTP et de traiter les réponses. Elle a été introduite dans les navigateurs modernes pour remplacer l’API XMLHttpRequest, qui était utilisée depuis de nombreuses années mais qui était devenue obsolète.
La méthode Fetch prend en entrée l’URL de la ressource à récupérer et renvoie une promesse qui sera résolue lorsque la réponse sera disponible. Elle peut également prendre en entrée un objet de configuration qui permet de définir différents paramètres tels que le verbe HTTP à utiliser (GET, POST, PUT, etc.), les en-têtes de la requête et le corps de la requête (pour les verbes POST et PUT).
Voici un exemple simple d’utilisation de la méthode Fetch pour récupérer du contenu HTML d’une page web :
fetch('https://www.example.com/page.html')
.then(response => response.text())
.then(html => {
// Traitement du HTML ici
});
La méthode Fetch est une fonction asynchrone, ce qui signifie qu’elle ne bloque pas l’exécution du code pendant qu’elle attend la réponse du serveur. Au lieu de cela, elle renvoie une promesse qui sera résolue lorsque la réponse sera disponible. Cela permet de réaliser des opérations de manière asynchrone, ce qui est particulièrement utile dans les applications web qui doivent souvent effectuer des requêtes réseau.
L’une des principales différences entre la méthode Fetch et l’API XMLHttpRequest est que Fetch renvoie toujours une promesse, même en cas d’erreur. Cela signifie que vous devez gérer les erreurs en utilisant la méthode catch de la promesse plutôt que de vérifier le statut de la réponse comme vous le feriez avec XMLHttpRequest. Voici un exemple de gestion des erreurs avec Fetch :
fetch('https://www.example.com/page.html')
.then(response => {
if (!response.ok) {
throw new Error(`Erreur HTTP ${response.status}`);
}
return response.text();
})
.then(html => {
// Traitement du HTML ici
})
.catch(error => {
// Gestion de l'erreur ici
});
En plus de la méthode Fetch elle-même, l’API de réseau de JavaScript comprend également un objet de type Request qui permet de définir les paramètres de la requête de manière plus précise. Vous pouvez créer un objet Request en utilisant le constructeur Request, en lui passant l’URL de la ressource à récupérer et un objet de configuration qui définit les paramètres de la requête. Voici un exemple de création d’un objet Request :
const request = new Request('https://www.example.com/page.html', {
method: 'GET',
headers: {
'Content-Type': 'text/html'
}
});
Vous pouvez ensuite utiliser cet objet Request avec la méthode Fetch en lui passant l’objet Request en entrée :
fetch(request)
.then(response => response.text())
.then(html => {
// Traitement du HTML ici
});
L’objet Request vous permet de définir tous les paramètres de la requête de manière plus précise, tels que le verbe HTTP, les en-têtes et le corps de la requête. Vous pouvez également définir des options de contrôle de la réponse, telles que le mode de la requête (navigation, requête de script, etc.) et la politique de mémoire cache à utiliser.
En plus de la méthode Fetch et de l’objet Request, l’API de réseau de JavaScript comprend également un objet Response qui représente la réponse renvoyée par le serveur. L’objet Response est renvoyé par la méthode Fetch lorsque la promesse est résolue et peut être utilisé pour accéder aux différents éléments de la réponse, tels que le statut HTTP, les en-têtes et le corps de la réponse.
Voici un exemple d’utilisation de l’objet Response pour vérifier le statut HTTP de la réponse et afficher le contenu de la réponse si elle est valide :
fetch('https://www.example.com/page.html')
.then(response => {
if (response.ok) {
return response.text();
} else {
throw new Error(`Erreur HTTP ${response.status}`);
}
})
.then(html => {
// Traitement du HTML ici
})
.catch(error => {
// Gestion de l'erreur ici
});
En résumé, la méthode Fetch de JavaScript est une API de réseau très utile qui permet de réaliser des requêtes HTTP de manière simple et asynchrone. Elle est souvent utilisée dans les applications web pour récupérer des données à partir d’un serveur ou envoyer des données vers un serveur. Elle est particulièrement utile pour les applications qui nécessitent de faire de nombreuses requêtes réseau car elle ne bloque pas l’exécution du code pendant qu’elle attend la réponse du serveur. En utilisant la méthode Fetch, vous pouvez réaliser des opérations de manière asynchrone et gérer les erreurs en utilisant les promesses de JavaScript.
Il est important de noter que la méthode Fetch n’est pas prise en charge par tous les navigateurs. Si vous devez garantir la compatibilité avec les navigateurs plus anciens, vous pouvez utiliser une bibliothèque telle que Axios ou SuperAgent qui implémentent la méthode Fetch et proposent des fonctionnalités supplémentaires.
Il est également important de noter que la méthode Fetch ne prend pas en charge les fonctionnalités avancées telles que la progressivité et l’annulation de la requête. Si vous avez besoin de ces fonctionnalités, vous pouvez utiliser l’API de réseau avancée de JavaScript appelée Fetch API. Cette API vous permet de réaliser des requêtes HTTP de manière avancée et de contrôler la progression et l’annulation de la requête.
Pour utiliser la Fetch API, vous devez d’abord créer un objet Request en utilisant le constructeur Request et en lui passant l’URL de la ressource à récupérer et un objet de configuration qui définit les paramètres de la requête. Ensuite, vous pouvez utiliser la méthode fetch de l’objet window en lui passant l’objet Request en entrée. La méthode fetch renvoie une promesse qui sera résolue lorsque la réponse sera disponible.
Voici un exemple simple d’utilisation de la Fetch API pour récupérer du contenu HTML d’une page web :
const request = new Request('https://www.example.com/page.html', {
method: 'GET',
headers: {
'Content-Type': 'text/html'
}
});
window.fetch(request)
.then(response => response.text())
.then(html => {
// Traitement du HTML ici
});
La Fetch API vous permet également de contrôler la progression et l’annulation de la requête en utilisant des objets de type AbortController et AbortSignal. L’objet AbortController vous permet de déclencher l’annulation de la requête en appelant sa méthode abort. L’objet AbortSignal vous permet de recevoir des notifications lorsque la requête est annulée.
Voici un exemple d’utilisation de l’objet AbortController pour annuler une requête avec la Fetch API :
const controller = new AbortController();
const signal = controller.signal;
const request = new Request('https://www.example.com/page.html', {
method: 'GET',
headers: {
'Content-Type': 'text/html'
},
signal
});
const fetchPromise = window.fetch(request)
.then(response => response.text())
.then(html => {
// Traitement du HTML ici
});
// Annulation de la requête après 5 secondes
setTimeout(() => {
controller.abort();
}, 5000);
En résumé, la Fetch API est une extension de la méthode Fetch de JavaScript qui vous permet de réaliser des requêtes HTTP de manière avancée et de contrôler la progression et l’annulation de la requête. Elle est particulièrement utile dans les applications qui nécessitent de gérer des opérations réseau de manière avancée, telles que la téléchargement de fichiers ou la mise en cache de données.
Il est important de noter que la Fetch API est encore en cours de développement et n’est pas encore prise en charge par tous les navigateurs. Si vous devez garantir la compatibilité avec les navigateurs plus anciens, vous devrez peut-être utiliser une bibliothèque telle que Axios ou SuperAgent qui implémentent la méthode Fetch et proposent des fonctionnalités supplémentaires.
En conclusion, la méthode Fetch et la Fetch API sont des outils très utiles pour réaliser des requêtes HTTP et gérer les réponses dans les applications web. Elles permettent de réaliser des opérations de manière asynchrone et de contrôler la progression et l’annulation de la requête. Si vous développez une application web qui nécessite de faire des requêtes HTTP, vous devriez certainement considérer l’utilisation de la méthode Fetch ou de la Fetch API.
0 commentaire