Die Fetch-API ist eine moderne JavaScript-Schnittstelle, die HTTP-Requests mit ihrer auf Promise basierenden Syntax vereinfacht und Ihren Code sauberer und benutzerfreundlicher macht. Mit der Fetch-API können Sie Daten vom Server abrufen, ohne die gesamte Seite neu laden zu müssen, wodurch Ihre Anwendung schneller und interaktiver wird. Sie können problemlos GET-, POST-, PUT- oder DELETE-Requests senden, um mit verschiedenen APIs zu interagieren. Die Fetch-API macht den Umgang mit verschiedenen Datentypen und HTTP-Methoden ebenfalls einfach. Die Anpassung von Request-Headern und die Verwaltung verschiedener Inhaltstypen wird einfach, so dass Sie nahtlos mit verschiedenen Diensten arbeiten können.
In diesem Artikel erfahren Sie, wie Sie die Fetch-API verwenden, welche Vorteile sie für Webanwendungen bietet und wie Sie Proxys für eine sichere und effiziente Datenverarbeitung einsetzen. Sehen Sie sich diese Liste der besten Proxy-Anbieter an und erfahren Sie, warum Bright Data die erste Wahl ist.
Verstädnis der Fetch-API
Die Fetch-API wird für asynchrone HTTP-Requests verwendet, indem eine Request an den Server gesendet und eine Promise zurückgegeben wird, das mit den Antwortdaten aufgelöst wird, sobald sie verfügbar sind. In der JavaScript-Entwicklung ermöglicht die Fetch-API die dynamische Interaktion mit Servern über HTTP-Requests (z. B. GET, POST, PUT), indem sie Anwendungen die Kommunikation mit dem Server ermöglicht, ohne dass eine Seite neu geladen werden muss. Die Fetch-API bietet u. a. folgende Vorteile:
- Vereinfachte Syntax mit Promise: Die Fetch-API eliminiert die Komplexität von XMLHttpRequest durch die Verwendung von Promises, wodurch Sie saubereren und besser lesbaren Code schreiben können.
- Es werden verschiedene Datenformate unterstützt: Sie können JSON-, Text- und Blob-Formate verwenden, was das Parsen und Arbeiten mit verschiedenen Antworttypen erleichtert.
- Stream- und Response-Objekte werden bereitgestellt: Sie können Responses mit lesbaren Streams untersuchen und ändern sowie Ihren Datenabrufansatz an Ihre Anwendung anpassen.
- Bessere Fehlerbehandlung: Fetch gibt bei HTTP-Fehlerstatuscodes standardmäßig keinen Fehler aus, ermöglicht aber explizitere Response-Prüfungen.
- Weniger komplizierte Callbacks: Sie müssen nicht viele Callbacks schreiben; stattdessen können Sie
.then(),.catch()oderasync/awaitverwenden, um zu wissen, wann Requests abgeschlossen sind.
Nachdem Sie nun die Vorteile der Fetch-API kennengelernt haben, wollen wir uns nun mit ihren wichtigsten Funktionen und Möglichkeiten befassen.
Asynchrone Vorgänge
Die Fetch-API ist asynchron, und die Promise wird aufgelöst, sobald die Serverantwort verfügbar ist. Auf diese Weise blockieren Sie die Benutzeroberfläche nicht und bieten Ihren Benutzern ein reibungsloses Benutzererlebnis. Sehen wir uns einige Beispiele an.
GET-Request
Hier ist ein Beispiel für die Verwendung der Fetch-API zum Senden einer GET-Request:
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);
});
In diesem Snippet erhält die Fetch-API Posts von jsonplaceholder.typicode.com. Sie prüft mit response.ok , ob die Response in Ordnung ist, und gibt andernfalls einen Fehler aus. Dann wird die Response mit response.json() in JSON geparst. Alle Fehler, sei es aufgrund von Netzwerkproblemen, schlecht geformten Responses oder Parsingfehlern, werden im .catch()-Block behandelt.
POST-Request
So verwenden Sie die Fetch-API, um eine POST-Request zu senden:
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);
});
Hier sendet die Fetch-API eine Request zur Erstellung einer neuen Ressource mit der POST-Methode. Die POST-Request ähnelt der GET-Request, aber die Request enthält Header, die den Server darüber informieren, dass die API JSON-Daten sendet. Die eigentlichen JSON-Daten gehen in den Schlüsselkörper.
Integration mit APIs
Sie können die Fetch-API verwenden, um Requests an öffentliche oder private APIs zu machen, z. B. zum Abrufen von Daten für Diagramme, Dashboards oder andere datengesteuerte Funktionen. Sie ermöglicht Webanwendungen die Kommunikation mit externen Diensten, indem es einen auf Promise basierenden Ablauf für die Bearbeitung von Requests und Responses verwendet.
Hier ist ein einfaches Beispiel, wie Sie Wetterdaten von der OpenWeatherMap API abrufen:
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);
});
Ersetzen Sie
YOUR_API_KEYmit Ihrem tatsächlichen API-Schlüssel.
Dieser Code ruft Wetterdaten für London über die API von OpenWeather ab. Das weatherData-Objekt enthält Details wie Temperatur, Luftfeuchtigkeit und Bedingungen, die Sie in Ihre Benutzeroberfläche integrieren können.
Wenn Sie diesen Code von Ihrem Terminal oder Ihrer Konsole aus ausführen (mit dem Befehl node filename.js), sollten Sie eine Ausgabe wie die folgende sehen:
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
}
Anwendungen müssen häufig mit externen APIs interagieren, um externe Daten zu beziehen. Daher ist die Verwendung eines sauberen, konsistenten Ansatzes für die Integration mit externen Diensten ein wichtiger Bestandteil beim Aufbau einer skalierbaren Webanwendung.
Fehlerbehandlung
Im Vergleich zu älteren AJAX-Methoden wie XMLHttpRequest, die die Einrichtung mehrerer Event-Handler zur Verwaltung von Netzwerkfehlern erforderten, vereinfacht Fetch die Fehlerbehandlung mithilfe von Promises und einem einzigen .catch()-Block. Fetch lehnt eine Promise nur ab, wenn ein Netzwerkfehler auftritt (z.B. keine Internetverbindung). Es gibt keine Fehlermeldung bei HTTP-Fehlercodes wie 404 oder 500. Um festzustellen, ob einer dieser Fehler aufgetreten ist, müssen Sie response.ok manuell überprüfen. Wenn response.ok false (falsch) istist, dann bedeutet dies, dass der Server mit einem Status geantwortet hat, der nicht im Bereich 200 bis 299 liegt. Das folgende Beispiel zeigt, wie Fetch Fehler behandelt, wenn eine Request aufgrund eines ungültigen Endpunkts fehlschlägt:
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);
});
Wenn Sie diesen Code ausführen, erhalten Sie eine Ausgabemeldung von Netzwerk- oder Response-Fehler: Failure to fetch (Abruf fehlgeschlagen). Status: 404. Der Code prüft !response.ok und gibt einen Fehler aus, weil der Endpunkt nicht existiert.
Verwendung von Proxys mit Fetch-API
Proxys können die Funktionen der Fetch-API durch zusätzliche Sicherheit, Skalierbarkeit und Geolokalisierungsfunktionen erweitern. Proxys fungieren als Vermittler zwischen Ihrem Client sowie dem Internet und bieten eindeutige IP-Adressen, zusätzliche Sicherheitsebenen und einen flexibleren Ansatz für den Abruf von Ressourcen. Die Verwendung von Proxys mit Fetch kann verhindern, dass Ihre IP-Adresse blockiert wird, indem sie bei der Datenextraktion oder bei Web-Scraping-Aktivitäten Anonymität bietet. Weitere Vorteile der Verwendung von Proxiys sind unter anderem:
- Erhöhte Sicherheit: Proxys maskieren Ihre IP-Adresse, was das Risiko verringert, dass Ihre IP-Adresse für bösartige Angriffe anfällig ist.
- Skalierbarkeit: Proxys können Requests auf mehrere IPs verteilen und so Ratenbeschränkungen oder Blockierungen verhindern.
- Flexibilität bei der Geolokalisierung: Proxys werden verwendet, um HTTP-Requests von verschiedenen Standorten aus zu senden, was für den Zugriff auf Inhalte nützlich ist, die nur in bestimmten Regionen verfügbar sind.
Arten von Proxys
Es gibt verschiedene Arten von Proxys, die jeweils einem bestimmten Zweck dienen. Diese verschiedenen Proxys sind wie folgt:
- Privatanwender-Proxys: Diese Proxys verwenden IPs von echten Orten von Privatanwendern und genießen bei Websites ein hohes Maß an Vertrauen. Das macht sie zwar teurer, aber auch effektiver, falls die anvisierten Websites den Traffic von IPs aus Rechenzentren blockieren.
- Rotierende Proxys: Diese Proxys rotieren die IPs automatisch bei jeder Request oder Sitzung. Sie sind ideal für die Datenextraktion in großem Umfang, wenn Sie das Risiko, auf Server-Limits oder schwarze Listen zu stoßen, verringern wollen.
- Rechenzentrums-Proxys: Diese Proxys kommen von Rechenzentren; sie sind kostengünstig und bieten eine hohe Geschwindigkeit, aber Sie werden blockiert, wenn Sie sie häufig benutzen.
Bright Data Proxys mit Fetch API
Bright Data bietet fortschrittliche Proxy-Dienste, die sich in Fetch-basierte Anwendungen integrieren lassen. Mit diesen Proxys können Sie zwischen Optionen für Privatanwender oder Rechenzentren wählen, Ihre Datenabrufmöglichkeiten für Projekte auf Unternehmensebene skalieren und von der automatischen IP-Rotation für eine effiziente und zuverlässige Datenerhebung profitieren.
So integrieren Sie Bright Data-Proxys mit der Fetch-API:
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);
});
Dieser Code sendet eine Request über einen bestimmten Proxy mittels fetch mit einem HttpsProxyAgent. Anschließend definiert er die Proxy-Details und erstellt ein Proxy-Agent. fetch holt erhält die Daten von der Ziel-URL mithilfe des Proxys.
Um einen Proxy zu konfigurieren, müssen Sie die
Fetch-APIvonnode-fetchverwenden. Weitere Informationen finden Sie in der node-fetch-Dokumentation. Dieser Code kann je nach dem gewählten Proxy unterschiedlich sein. Konsultieren Sie die Offizielle Dokumentation von Bright Data für die neuesten Informationen.
Bewährte Praktiken der Fetch-API
Beachten Sie bei Fetch-API-Requests die folgenden bewährten Verfahren, um die Effizienz und Leistung zu verbessern:
Caching von Responses
Um die Serverlast zu verringern und das allgemeine Benutzererlebnis zu verbessern, können Sie Caching-Mechanismen verwenden, die häufig angeforderte Daten speichern und so redundante Serveraufrufe vermeiden. Hier ein Beispiel, das prüft, ob Ihre Daten bereits zwischengespeichert sind, bevor eine Netzwerk-Request gestellt wird:
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));
Das Verhindern unnötiger Requests nach bereits zwischengespeicherten Daten kann die Leistung verbessern und die Ladezeiten verkürzen.
Timeout-Behandlung
Durch das Festlegen einiger Timeouts können Sie verhindern, dass Ihre Fetch-Requests auf unbestimmte Zeit hängen bleiben. Mit dem AbortController können Sie Requests abbrechen, die eine bestimmte Dauer überschreiten. Im folgenden Beispiel ist die Timeout auf drei Sekunden eingestellt, während der Standardwert fünf Sekunden beträgt:
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));
Dadurch wird sichergestellt, dass Requests, die die angegebene Timeouts überschreiten, abgebrochen werden, während andere Fehler entsprechend behandelt werden.
Drosselung anfordern
Um zu verhindern, dass Ihre APIs mit Requests überlastet werden, sollten Sie eine Drosselung implementieren, um die Häufigkeit der Requests zu kontrollieren. Daher sollten Sie die Anzahl der Requests, die innerhalb eines bestimmten Zeitraums gestellt werden können, begrenzen. Das folgende Beispiel erstellt eine Drossel , die sicherstellt, dass eine Funktion höchstens einmal pro angegebenem Intervall (Limit) ausgeführt wird:
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");
Die Funktion throttledFetch verwendet das Dienstprogramm Drossel zur Steuerung von API-Requests. Sie sorgt dafür, dass zwischen wiederholten Aufrufen zum Abrufen von Daten von einer URL mindestens zwei Sekunden liegen. Dies verhindert redundante oder übermäßige API-Aufrufe, behandelt Fehler und protokolliert die abgerufenen Daten.
Fazit
Die Fetch-API vereinfacht asynchrone Operationen und Datenverarbeitung in modernen Web-Anwendungen. Allerdings können Herausforderungen wie IP-Blockierungen, Ratenbeschränkungen und CAPTCHAs auftreten, wenn es sich um groß angelegte oder geografisch ausgerichtete Requests handelt.
Die Scraper-APIs und der Scraping-Browser von Bright Data bieten leistungsstarke Lösungen für diese Herausforderungen. Die Scraper-APIs ermöglichen eine nahtlose Datenextraktion unter Umgehung von Anti-Scraping-Maßnahmen, während der Scraping-Browser JavaScript-lastige und dynamische Inhalte effizient verarbeitet. Diese Tools gewährleisten eine sichere, skalierbare und zuverlässige Datenerhebung, selbst für die komplexesten Websites.
Keine Kreditkarte erforderlich
