---
title: "API Fetch en JavaScript : Tout savoir"
slug: fetch-api-in-javascript
date: 2025-02-04T11:20:03+00:00
modified: 2025-09-16T16:37:41+00:00
permalink: https://brightdata.fr/blog/donnees-web/fetch-api-in-javascript
type: blog
---
[ Blog ](https://brightdata.fr/blog "Blog") / [Données Web](https://brightdata.fr/blog/donnees-web)
[Données Web](https://brightdata.fr/blog/donnees-web)
# API Fetch en JavaScript : Tout savoir
Découvrez comment l’API Fetch simplifie les requêtes HTTP en JavaScript grâce à une syntaxe basée sur les promesses et à une gestion efficace des erreurs.
14 min de lecture
[  ](https://brightdata.com/blog/authors/jakkie-koekemoer)
[Jakkie Koekemoer
](https://brightdata.com/blog/authors/jakkie-koekemoer)
L’API [Fetch API](https://developer.mozilla.org/en-US/docs/Web/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](https://brightdata.fr/blog/abc-du-proxy/best-proxy-providers) 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 [](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) 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](https://developer.mozilla.org/en-US/docs/Web/API/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()` ou `async/await` pour 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 :
```none
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 :
```none
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](https://openweathermap.org/):
```none
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_KEY` par 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 :
```none
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 `faux`cela 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 :
```none
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](https://brightdata.fr/proxy-types) qui s’intègrent aux applications basées sur Fetch. Ces proxys vous permettent de choisir entre des options [résidentielles](https://brightdata.fr/proxy-types/residential-proxies) ou [de centre de données](https://brightdata.fr/proxy-types/datacenter-proxies) , 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 :
```none
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 Fetch` de `node-fetch`. Pour plus d’informations, consultez la documentation [de node-fetch](https://github.com/node-fetch/node-fetch). Ce code peut être différent selon le proxy choisi. Consultez la [documentation officielle de Bright Data](https://docs.brightdata.com/proxy-networks/introduction) 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 :
```none
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 :
```none
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`) :
```none
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](https://brightdata.fr/blog/abc-du-proxy/how-to-bypass-an-ip-ban), les [limites de débit](https://brightdata.fr/faqs/proxy-errors/429-error-how-to-avoid) 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](https://brightdata.fr/products/web-scraper) permettent d’extraire des données en toute transparence en contournant les mesures anti-scraping, tandis que le [navigateur Scraping](https://brightdata.fr/products/scraping-browser) 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.
Contacter ventesEssai gratuit
Table des matières
Dedicated Scraper APIs & No-Code Scrapers
Over 1000 scrapers for all popular domains. Simplify your web scraping.
[See pricing](/pricing/web-scraper "See pricing")
Just want data? Skip scraping.
Hundreds of ready-to-use datasets from all popular domains.
[See pricing](/pricing/datasets "See pricing")
[ ](https://news.ycombinator.com/submitlink?t=API+Fetch+en+JavaScript+%3A+Tout+savoir&u=https://brightdata.fr/blog/donnees-web/fetch-api-in-javascript) [ ](https://www.linkedin.com/shareArticle?mini=true&title=API+Fetch+en+JavaScript+%3A+Tout+savoir&url=https://brightdata.fr/blog/donnees-web/fetch-api-in-javascript) [ ](http://www.reddit.com/submit?title=API+Fetch+en+JavaScript+%3A+Tout+savoir&url=https://brightdata.fr/blog/donnees-web/fetch-api-in-javascript)
## Vous pourriez aussi être intéressé par
[  ](https://brightdata.fr/blog/ai/openhuman-with-bright-data "Accès Web Prêt pour la Production dans OpenHuman via le CLI Bright Data")
[AI
Antonello Zanini
Technical Writer
### Accès Web Prêt pour la Production dans OpenHuman via le CLI Bright Data
Intégrez le CLI Bright Data avec OpenHuman pour permettre un accès web prêt pour la production et la collecte de données pour les agents IA.
09-Sep-2026
14 min de lecture
](https://brightdata.fr/blog/ai/openhuman-with-bright-data)
[  ](https://brightdata.fr/blog/donnees-web/multimodal-web-scraping-with-minimax "Scraping Web Multimodal avec MiniMax")
[Données Web
Antonello Zanini
Technical Writer
### Scraping Web Multimodal avec MiniMax
Associez Bright Data Web Unlocker avec la vision MiniMax M3 pour extraire des données structurées à partir d’images et de captures d’écran de pages web.
09-Sep-2026
5 min de lecture
](https://brightdata.fr/blog/donnees-web/multimodal-web-scraping-with-minimax)
[  ](https://brightdata.fr/blog/ai/best-cli-tools-for-codex "Les 10 meilleurs outils CLI pour Codex en 2026 – Testés & Classés")
[AI
Daniel Shashko
Web Data & AI Expert
### Les 10 meilleurs outils CLI pour Codex en 2026 – Testés & Classés
Les 10 outils CLI qui rendent Codex plus rapide et plus capable, en commençant par le Bright Data CLI pour un accès web réel depuis l’intérieur du sandbox.
06-Sep-2026
24 min de lecture
](https://brightdata.fr/blog/ai/best-cli-tools-for-codex)