L’API Fetch API est une interface JavaScript moderne qui simplifie les requêtes HTTP grâce à sa syntaxe basée sur les promesses, ce qui rend votre code plus propre et plus facile à utiliser. Avec l’API Fetch, vous pouvez demander des données au serveur sans avoir à recharger la page entière, ce qui rend votre application plus rapide et plus interactive. Vous pouvez facilement envoyer des requêtes GET, POST, PUT ou DELETE pour interagir avec différentes API. L’API Fetch facilite également la gestion de différents types de données et de méthodes HTTP. La personnalisation des en-têtes des requêtes et la gestion des différents types de contenu sont simplifiées, ce qui vous permet de travailler en toute fluidité avec divers services.
Dans cet article, vous apprendrez à utiliser l’API Fetch, ses avantages pour les applications web et l’utilisation de proxies pour garantir un traitement sécurisé et efficace des données. Consultez cette liste des meilleurs fournisseurs de proxy pour comprendre pourquoi Bright Data est le meilleur choix.
Comprendre l’API Fetch
L’API Fetch est utilisée pour effectuer des requêtes HTTP asynchrones en envoyant une requête au serveur et en renvoyant une promesse qui se résout avec les données de la réponse une fois qu’elles sont disponibles. Dans le développement JavaScript, l’utilisation de l’API Fetch permet une interaction dynamique avec les serveurs par le biais de requêtes HTTP (eg GET, POST, PUT) en permettant aux applications de communiquer avec le serveur sans nécessiter un rechargement de la page. Voici quelques-uns des avantages de l’API Fetch :
- Syntaxe simplifiée avec les promesses : L’API Fetch élimine la complexité de XMLHttpRequest en utilisant des promesses, ce qui vous permet d’écrire un code plus propre et plus lisible.
- Différents formats de données sont pris en charge : vous pouvez utiliser les formats JSON, texte et blob, ce qui facilite l’analyse et l’utilisation de différents types de réponses.
- Des objets de flux et de réponse sont fournis : vous pouvez examiner et modifier les réponses à l’aide de flux lisibles et adapter votre approche de récupération des données à votre application.
- Meilleure gestion des erreurs : Par défaut, Fetch ne lance pas d’erreur pour les codes d’état d’erreur HTTP, mais il vous permet d’effectuer des vérifications de réponse plus explicites.
- Des callbacks moins compliqués : vous n’avez pas besoin d’écrire de nombreux callbacks. Vous pouvez simplement utiliser
.then(),.catch()ouasync/awaitpour savoir quand les requêtes sont terminées.
Maintenant que vous avez exploré les avantages de l’utilisation de l’API Fetch, examinons ses principales caractéristiques et capacités.
Opérations asynchrones
L’API Fetch est asynchrone, et la promesse est résolue une fois que la réponse du serveur est disponible. De cette manière, vous ne bloquez pas l’interface pour vos utilisateurs qui peuvent travailler en toute fluidité. Voyons quelques exemples.
Requête GET
Voici un exemple d’utilisation de l’API Fetch pour envoyer une requête GET :
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json();
})
.then((data) => {
console.log('Data fetched:', data);
})
.catch((error) => {
console.error('Fetch error:', error);
});
Dans cet extrait, l’API Fetch récupère les publications de jsonplaceholder.typicode.com. Il vérifie si la réponse est correcte en utilisant response.ok et lance une erreur si ce n’est pas le cas. Ensuite, il analyse la réponse en JSON avec response.json(). Toutes les erreurs, qu’elles soient dues à des problèmes de réseau, à des réponses mal formées ou à des échecs d’analyse, sont traitées dans le bloc .catch() .
Requête POST
Voici comment utiliser l’API Fetch pour envoyer une requête POST :
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
body: JSON.stringify({
title: 'New Post',
body: 'Hello World! This is a test.',
userId: 1,
}),
})
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json();
})
.then((data) => {
console.log('New Post created:', data);
})
.catch((error) => {
console.error('Fetch error:', error);
});
Ici, l’API Fetch envoie une requête pour créer une nouvelle ressource avec la méthode POST. La requête POST est similaire à la requête GET, mais elle inclut des en-têtes pour informer le serveur que l’API envoie des données JSON. Les données JSON sont placées dans la clé du corps de la requête.
Intégration avec les API
Vous pouvez utiliser l’API Fetch pour effectuer des requêtes auprès d’API publiques ou privées, par exemple pour récupérer des données pour des graphiques, des tableaux de bord ou d’autres fonctions basées sur les données. Il permet aux applications web de communiquer avec des services externes en utilisant son flux basé sur des promesses pour traiter les demandes et les réponses.
Voici un exemple de base de la manière dont vous pouvez récupérer des données météorologiques à partir de l’API OpenWeatherMap API:
const city = "London,uk";
const apiKey = "YOUR_API_KEY";
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&APPID=${apiKey}`;
fetch(url)
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json();
})
.then((weatherData) => {
console.log("Weather data for London:", weatherData);
})
.catch((error) => {
console.error("Error fetching weather data:", error);
});
Remplacez
YOUR_API_KEYpar votre clé API réelle.
Ce code récupère les données météorologiques pour Londres en utilisant l’API d’OpenWeather. L’objet weatherData comprend des détails tels que la température, l’humidité et les conditions, que vous pouvez intégrer dans votre interface utilisateur.
Lorsque vous exécutez ce code sur votre terminal ou votre shell (à l’aide de la commande node filename.js), vous devriez obtenir un résultat semblable à celui-ci :
Weather data for London: {
coord: { lon: -0.1257, lat: 51.5085 },
weather: [
{
id: 804,
main: 'Clouds',
description: 'overcast clouds',
icon: '04d'
}
],
base: 'stations',
main: {
temp: 273.42,
feels_like: 273.42,
temp_min: 272.59,
temp_max: 274.87,
pressure: 1021,
humidity: 87,
sea_level: 1021,
grnd_level: 1016
},
visibility: 10000,
wind: { speed: 0.51, deg: 0 },
clouds: { all: 99 },
dt: 1736525048,
sys: {
type: 2,
id: 268730,
country: 'GB',
sunrise: 1736496173,
sunset: 1736525567
},
timezone: 0,
id: 2643743,
name: 'London',
cod: 200
}
Les applications doivent souvent interagir avec des API externes pour obtenir des données externes. Par conséquent, l’utilisation d’une approche propre et cohérente pour l’intégration de tout service externe est un élément clé de la construction d’une application web évolutive.
Gestion des erreurs
Par rapport aux anciennes méthodes AJAX comme XMLHttpRequest, qui nécessitaient la mise en place de plusieurs gestionnaires d’événements pour gérer les erreurs de réseau, Fetch simplifie la gestion des erreurs en utilisant des promesses et un seul bloc .catch() . Fetch ne rejette une promesse que si une erreur de réseau se produit (par exemple pas de connexion internet). Il ne génère pas d’erreur pour les codes d’erreur HTTP tels que 404 ou 500. Pour savoir si l’une de ces erreurs s’est produite, vous devez vérifier manuellement response.ok. Si response.ok est fauxcela signifie que le serveur a répondu avec un statut qui n’est pas compris entre 200 et 299. L’exemple suivant montre comment Fetch gère les erreurs lorsqu’une demande échoue en raison d’un point d’extrémité non valide :
fetch('https://jsonplaceholder.typicode.com/invalid-endpoint')
.then((response) => {
if (!response.ok) {
throw new Error(`Failed to fetch. Status: ${response.status}`);
}
return response.json();
})
.then((data) => {
console.log('This will not run if response is not ok');
})
.catch((error) => {
console.error('Network or response error:', error.message);
});
Lorsque vous exécutez ce code, vous recevez un message d’erreur de réseau ou de réponse : « Failed to fetch » (échec de la récupération). Statut : 404. Le code vérifie « !response.ok » et renvoie une erreur parce que le point de terminaison n’existe pas.
Utilisation de Proxies avec Fetch API
Les serveurs proxy peuvent améliorer les capacités de l’API Fetch en fournissant des possibilités supplémentaires en matière de sécurité, d’évolutivité et de géolocalisation. Les proxys fonctionnent comme des intermédiaires entre votre client et l’internet, fournissant des adresses IP uniques, des couches de sécurité supplémentaires et une approche plus souple de la recherche de ressources. L’utilisation de proxys avec Fetch permet d’éviter que votre adresse IP ne soit bloquée en assurant l’anonymat lors d’activités d’extraction de données ou de web scraping. Les autres avantages de l’utilisation des serveurs proxy sont les suivants :
- Sécurité renforcée : Les proxys masquent votre adresse IP, ce qui réduit le risque que votre IP soit vulnérable aux attaques malveillantes.
- Évolutivité : les serveurs proxy peuvent répartir les demandes sur plusieurs adresses IP, ce qui permet d’éviter les limites de débit et les blocages.
- Flexibilité de la géolocalisation : on utilise un proxy pour simuler l’envoi de requêtes HTTP depuis l’endroit où se trouve le proxy. Cela permet d’accéder à des contenus qui ne sont disponibles que dans certaines régions.
Types de serveurs proxy
Il existe différents types de serveurs proxy, chacun répondant à un cas d’utilisation spécifique. Voici les différents types de proxy :
- Proxy résidentiels : ces proxies utilisent des adresses IP provenant de lieux résidentiels réels et les sites web leur accordent généralement une grande confiance. Voilà pourquoi ils sont plus chers, mais aussi plus efficaces au cas où les sites web que vous ciblez bloqueraient le trafic provenant d’adresses IP de centres de données.
- Proxies rotatifs : ces proxies changent automatiquement d’adresse IP à chaque requête ou session. Elles sont idéales pour l’extraction de données à grande échelle, lorsque vous souhaitez réduire le risque de vous heurter aux limites des serveurs ou aux listes noires.
- Proxy de centre de données : Ces proxies proviennent de centres de données ; ils sont rentables et offrent une vitesse élevée, mais vous serez bloqué si vous les utilisez fréquemment.
Proxies de Bright Data avec l’API Fetch
Bright Data fournit des services proxy avancés qui s’intègrent aux applications basées sur Fetch. Ces proxys vous permettent de choisir entre des options résidentielles ou de centre de données , de faire évoluer vos capacités de récupération de données pour les projets d’entreprise et de bénéficier d’une rotation IP automatique pour une collecte de données efficace et fiable.
Voici comment intégrer les proxies Bright Data à l’API Fetch :
import fetch from "node-fetch";
import { HttpsProxyAgent } from "https-proxy-agent";
const proxyHost = "BRIGHT_DATA_PROXY_HOST:PORT";
const proxyUsername = "BRIGHT_DATA_USERNAME";
const proxyPassword = "BRIGHT_DATA_PASSWORD";
const proxyUrl = `http://${proxyUsername}:${proxyPassword}@${proxyHost}`;
const targetUrl = "https://jsonplaceholder.typicode.com/posts";
// Create a proxy agent
const agent = new HttpsProxyAgent(proxyUrl);
fetch(targetUrl, { agent })
.then((response) => {
if (!response.ok) {
throw new Error(`Error fetching data. Status: ${response.status}`);
}
return response.json();
})
.then((data) => {
console.log("Data fetched via proxy:", data);
})
.catch((error) => {
console.error("Proxy fetch error:", error);
});
Ce code envoie une requête via un proxy spécifique en utilisant fetch avec un HttpsProxyAgent. Il définit ensuite les détails du proxy et crée un agent proxy. fetch récupère également les données de l’URL cible à l’aide du proxy.
Pour configurer un proxy, vous devez utiliser l’
API Fetchdenode-fetch. Pour plus d’informations, consultez la documentation de node-fetch. Ce code peut être différent selon le proxy choisi. Consultez la documentation officielle de Bright Data pour obtenir les informations les plus récentes.
Meilleures pratiques concernant l’API Fetch
Lorsque vous effectuez des requêtes API Fetch, suivez ces meilleures pratiques pour améliorer l’efficacité et les performances :
Mise en cache des réponses
Pour réduire la charge des serveurs et améliorer l’expérience globale de l’utilisateur, vous pouvez utiliser des mécanismes de mise en cache qui stockent les données fréquemment demandées, évitant ainsi les appels redondants au serveur. Voici un exemple qui vérifie si vos données sont déjà mises en cache avant d’effectuer une requête réseau :
const cache = new Map();
async function fetchWithCache(url) {
if (cache.has(url)) {
console.log("Fetching from cache:", url);
return cache.get(url);
}
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
cache.set(url, data);
console.log("Fetched and cached:", url);
return data;
} catch (error) {
console.error("Fetch error:", error);
throw error;
}
}
fetchWithCache("https://jsonplaceholder.typicode.com/posts")
.then((data) => console.log(data))
.catch((error) => console.error("Error:", error));
Le fait d’éviter les requêtes inutiles pour des données déjà mises en cache peut améliorer les performances et réduire les temps de chargement.
Gestion des délais
La définition de certains délais d’attente peut empêcher vos requêtes Fetch de rester en suspens indéfiniment. Vous pouvez annuler les demandes qui dépassent une durée spécifiée en utilisant le AbortController. Dans l’exemple suivant, le délai d’attente est fixé à trois secondes, alors que la valeur par défaut est de cinq secondes :
async function fetchWithTimeout(url, timeout = 5000) {
const controller = new AbortController();
const timeoutId = setTimeout(() => {
console.warn("Fetch request timed out:", url);
controller.abort();
}, timeout);
try {
const response = await fetch(url, { signal: controller.signal });
clearTimeout(timeoutId);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
} catch (error) {
console.error("Fetch timeout or error:", error);
throw error;
}
}
fetchWithTimeout("https://jsonplaceholder.typicode.com/posts", 3000)
.then((data) => console.log(data))
.catch((error) => console.error("Error:", error));
Cela garantit que les requêtes dépassant le délai spécifié sont interrompues tout en traitant les autres erreurs de manière appropriée.
Limitation des requêtes
Pour éviter que vos API ne soient surchargées de requêtes, vous devez mettre en place un système de limitation pour contrôler la fréquence des requêtes. Il convient donc de limiter le nombre de demandes qui peuvent être faites dans un certain laps de temps. L’exemple suivant crée une fonction « throttle » qui garantit qu’une fonction est exécutée au maximum une fois tous les intervalles spécifiés (limit) :
function throttle(func, limit) {
let lastFunc;
let lastRan;
return function (...args) {
const context = this;
if (!lastRan) {
func.apply(context, args);
lastRan = Date.now();
} else {
clearTimeout(lastFunc);
lastFunc = setTimeout(function () {
if (Date.now() - lastRan >= limit) {
func.apply(context, args);
lastRan = Date.now();
}
}, limit - (Date.now() - lastRan));
}
};
}
const throttledFetch = throttle(async (url) => {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
console.log("Throttled fetch data:", data);
} catch (error) {
console.error("Throttled fetch error:", error);
}
}, 2000);
throttledFetch("https://jsonplaceholder.typicode.com/posts");
console.log("Fetching again in 2 seconds...");
throttledFetch("https://jsonplaceholder.typicode.com/posts");
La fonction throttledFetch utilise l’utilitaire throttle pour contrôler les demandes d’API. Il garantit que les appels répétés pour extraire des données d’un URL sont espacés d’au moins deux secondes. Cela permet d’éviter les appels redondants ou excessifs à l’API, de gérer les erreurs et de consigner les données obtenues.
Conclusion
L’API Fetch simplifie les opérations asynchrones et le traitement des données dans les applications web modernes. Cependant, des problèmes tels que le blocage d’adresse IP, les limites de débit et les CAPTCHA peuvent survenir lorsque l’on traite des requêtes à grande échelle ou géociblées.
Les API Scraper et le navigateur Scraping de Bright Data vous fournissent des solutions puissantes pour surmonter ces défis. Les API Scraper permettent d’extraire des données en toute transparence en contournant les mesures anti-scraping, tandis que le navigateur Scraping gère efficacement les contenus dynamiques et contenant beaucoup de fonctionnalités JavaScript. Ces outils garantissent une collecte de données sûre, évolutive et fiable, même pour les sites web les plus complexes.
Aucune carte de crédit requise
