HTTP-Client in JavaScript: Anfragen richtig stellen von A bis Z

HTTP-Client in JavaScript: Anfragen richtig stellen — von A bis Z

In der modernen Webentwicklung ist die Interaktion mit externen APIs und Servern eine routinemäßige, aber kritisch wichtige Aufgabe. Unabhängig davon, ob Sie einen Microservice mit Node.js schreiben, Daten parsen oder einen Bot erstellen, benötigen Sie einen zuverlässigen HTTP-Client. In diesem Artikel werden wir behandeln, wie man HTTP-Anfragen in JavaScript (Node.js) richtig stellt, beliebte Bibliotheken, Fehlerbehandlung, Timeouts und Best Practices betrachten.

1. Integrierte Mittel: das http-Modul und node-fetch

Node.js verfügt über die integrierten Module http und https, aber deren API ist niedrigschwellig und für den täglichen Gebrauch unbequem. Daher werden meistens Wrapper-Bibliotheken verwendet.

1.1. node-fetch (v3+)

Ab Version 18 hat Node.js integrierte Unterstützung für fetch (experimentell). Für ältere Versionen oder erweiterte Funktionalität verwenden Sie das Paket node-fetch.

// Installation: npm install node-fetch\nimport fetch from 'node-fetch';\n\nasync function getUsers() {\n  try {\n    const response = await fetch('https://jsonplaceholder.typicode.com/users');\n    if (!response.ok) {\n      throw new Error(`HTTP error! status: ${response.status}`);\n    }\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Anfragefehler:', error.message);\n  }\n}\n\ngetUsers();

1.2. Integrierter fetch (Node.js 18+)

Wird analog zum Browser-fetch verwendet:

// Node.js 18+ ohne zusätzliche Pakete\nasync function postData() {\n  const response = await fetch('https://api.example.com/data', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({ key: 'value' })\n  });\n  return response.json();\n}

2. Axios — der Goldstandard für HTTP-Clients

Axios ist die beliebteste Bibliothek für HTTP-Anfragen in JavaScript. Sie bietet eine bequeme Schnittstelle, Promise-Unterstützung, Interceptors und automatische JSON-Transformation.

2.1. Installation und einfache GET-Anfrage

// npm install axios\nconst axios = require('axios');\n\nasync function fetchUsers() {\n  try {\n    const response = await axios.get('https://jsonplaceholder.typicode.com/users');\n    console.log(response.data); // Daten bereits geparst\n  } catch (error) {\n    console.error('Fehler:', error.message);\n  }\n}

2.2. POST-Anfrage mit Daten

async function createUser() {\n  const newUser = { name: 'Ivan', email: 'ivan@example.com' };\n  const response = await axios.post('https://jsonplaceholder.typicode.com/users', newUser);\n  console.log('Benutzer erstellt:', response.data);\n}

2.3. Timeout und Header konfigurieren

Timeout ist eine kritisch wichtige Option, um das Einfrieren der Anwendung zu verhindern:

async function fetchWithTimeout() {\n  try {\n    const response = await axios.get('https://slow-api.example.com/data', {\n      timeout: 5000, // 5 Sekunden\n      headers: {\n        'Authorization': 'Bearer token123',\n        'Accept': 'application/json'\n      }\n    });\n    return response.data;\n  } catch (error) {\n    if (error.code === 'ECONNABORTED') {\n      console.error('Anfrage-Timeout');\n    }\n  }\n}

3. Fortgeschrittene Techniken und Best Practices

3.1. Fehlerbehandlung und Wiederholungsversuche (Retry)

Netzwerke sind instabil, daher ist es wichtig, einen Mechanismus für Wiederholungsversuche zu implementieren:

async function fetchWithRetry(url, retries = 3) {\n  for (let i = 0; i < retries; i++) {\n    try {\n      const response = await axios.get(url);\n      return response.data;\n    } catch (error) {\n      if (i === retries - 1) throw error; // letzter Versuch\n      console.log(`Versuch ${i + 1} fehlgeschlagen, Wiederholung in ${(i + 1) * 1000}ms...`);\n      await new Promise(