Der ultimative Leitfaden für die Node Fetch API: HTTP-Anfragen in Node.js erstellen

HTTP-Anfragen sind ein grundlegender Bestandteil der modernen Webentwicklung. Mit der Einführung der Fetch API in Node.js haben Entwickler jetzt eine leistungsstarke und konsistente Möglichkeit, Netzwerkanfragen sowohl in Browser- als auch in Serverumgebungen zu stellen. In diesem umfassenden Tutorial werden wir untersuchen, wie Sie Node fetch effektiv in Ihren Projekten einsetzen können.

Was ist die Node Fetch API und warum sollten Sie sie verwenden?

Die Node fetch API ist ein moderner, Promise-basierter Mechanismus zum Erstellen von HTTP-Anfragen in Node.js-Anwendungen. Ursprünglich ein reines Browser-Feature, wurde fetch zu einem experimentellen Feature in Node.js v18 und erreichte Stabilität in Node.js v21.

Wichtige Vorteile der Verwendung von Node Fetch:

Built-in functionality: Keine Notwendigkeit, Pakete von Drittanbietern zu installieren
Promise-based: Saubere, moderne Syntax mit async/await-Unterstützung
Cross-platform familiarity: Gleiche API wie browserseitiges fetch
Improved performance: Basiert auf dem Hochleistungs-HTTP-Client Undici

Testen Ihrer Node Fetch API-Anfragen mit modernen Tools

Beim Erlernen der Verwendung von Node fetch ist es unerlässlich, zuverlässige Tools zum Testen Ihrer API-Endpunkte zu haben. Apidog sticht als die beste Postman-Alternative zum Testen und Dokumentieren Ihrer Node fetch API-Anfragen hervor.

Als All-in-One-API-Entwicklungsplattform kombiniert Apidog API-Dokumentation, Tests und Mock-Server in einer einzigen, intuitiven Oberfläche.

Bei der Entwicklung von Anwendungen mit Node fetch hilft Ihnen Apidog, Antworten zu visualisieren, mit Teammitgliedern zusammenzuarbeiten und sicherzustellen, dass Ihre API-Aufrufe korrekt funktionieren, bevor Sie sie im Code implementieren. Die Fähigkeit, Code-Snippets für Node fetch-Anfragen zu generieren, macht den Übergang vom Testen zur Implementierung nahtlos.

button

Einrichten Ihrer Umgebung für Node Fetch

Voraussetzungen für die Verwendung von Node Fetch

Bevor Sie sich in Node fetch-Beispiele stürzen, stellen Sie sicher, dass Sie Folgendes haben:

Node.js v18 oder höher (vorzugsweise v21+ für stabile Fetch-Unterstützung)
Überprüfen Sie Ihre Node.js-Version:

node -v

Node Fetch-Versionskompatibilität

Node.js v21+: Fetch ist stabil und einsatzbereit
Node.js v18-v20: Fetch ist verfügbar, aber experimentell (verwenden Sie das Flag -experimental-fetch)
Ältere Node.js-Versionen: Installieren Sie das Paket node-fetch oder aktualisieren Sie Node.js

Wenn Sie v18-v20 verwenden, führen Sie Ihre Anwendungen mit Folgendem aus:

node --experimental-fetch app.js

Erstellen Ihrer ersten Node Fetch-Anfrage

Beginnen wir mit einer einfachen GET-Anfrage mit Node fetch:

// Basic GET request with Node fetch
fetch('<https://api.example.com/data>')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json(); // Parse JSON response
  })
  .then(data => {
    console.log('Data received:', data);
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

Verwenden von Node Fetch mit Async/Await

Für saubereren Code können Sie async/await mit Node fetch verwenden:

async function fetchData() {
  try {
    const response = await fetch('<https://api.example.com/data>');

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const data = await response.json();
    console.log('Data received:', data);
    return data;
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

// Call the function
fetchData();

Erweiterte Node Fetch-Anfragemethoden

Erstellen von POST-Anfragen mit Node Fetch

async function postData(url, data) {
  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    return await response.json();
  } catch (error) {
    console.error('Fetch POST error:', error);
  }
}

// Example usage
const newUser = {
  name: 'John Doe',
  email: 'john@example.com',
};

postData('<https://api.example.com/users>', newUser)
  .then(data => console.log('User created:', data));

PUT-Anfragen mit Node Fetch

async function updateData(url, data) {
  try {
    const response = await fetch(url, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    return await response.json();
  } catch (error) {
    console.error('Fetch PUT error:', error);
  }
}

// Example usage
const updatedUser = {
  id: 1,
  name: 'Jane Smith',
  email: 'jane@example.com',
};

updateData('<https://api.example.com/users/1>', updatedUser)
  .then(data => console.log('User updated:', data));

DELETE-Anfragen mit Node Fetch

async function deleteResource(url) {
  try {
    const response = await fetch(url, {
      method: 'DELETE',
    });

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    // Some APIs return no content on DELETE
    if (response.status === 204) {
      return { success: true };
    }

    return await response.json();
  } catch (error) {
    console.error('Fetch DELETE error:', error);
  }
}

// Example usage
deleteResource('<https://api.example.com/users/1>')
  .then(result => console.log('Delete result:', result));

Umgang mit verschiedenen Antworttypen mit Node Fetch

Node fetch kann mit verschiedenen Antwortformaten arbeiten:

JSON-Antwortbehandlung

fetch('<https://api.example.com/data>')
  .then(response => response.json())
  .then(data => console.log(data));

Textantwortbehandlung

fetch('<https://example.com/plain-text>')
  .then(response => response.text())
  .then(text => console.log(text));

Binäre Datenverarbeitung

fetch('<https://example.com/image.png>')
  .then(response => response.arrayBuffer())
  .then(buffer => {
    // Handle binary data
    const bytes = new Uint8Array(buffer);
    console.log('Binary data length:', bytes.length);
  });

Anpassen von Node Fetch-Anfragen mit Headern und Optionen

Festlegen benutzerdefinierter Header

fetch('<https://api.example.com/protected-data>', {
  headers: {
    'Authorization': 'Bearer YOUR_TOKEN_HERE',
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'User-Agent': 'My Node.js Application'
  }
})
.then(response => response.json())
.then(data => console.log(data));

Konfigurieren von Anforderungsoptionen

fetch('<https://api.example.com/data>', {
  method: 'GET',
  headers: { 'Content-Type': 'application/json' },
  cache: 'no-cache',
  redirect: 'follow',      // follow, error, or manual
  referrerPolicy: 'no-referrer'
})
.then(response => response.json())
.then(data => console.log(data));

Fehlerbehandlung mit Node Fetch

Umfassende Fehlerbehandlung

Ein wichtiger Aspekt, den es bei Node fetch zu verstehen gilt, ist, dass es bei HTTP-Fehlerstatuscodes nicht abgelehnt wird. Das Promise wird nur bei Netzwerkfehlern oder wenn etwas die Fertigstellung der Anfrage verhindert, abgelehnt.

Hier ist ein umfassender Fehlerbehandlungsansatz:

async function fetchWithErrorHandling(url) {
  try {
    const response = await fetch(url);

    // Check for HTTP errors
    if (!response.ok) {
      // Attempt to get error details from response
      let errorDetails;
      try {
        errorDetails = await response.json();
      } catch (e) {
        errorDetails = await response.text();
      }

      throw new Error(
        `HTTP error! Status: ${response.status}, Details: ${
          typeof errorDetails === 'object'
            ? JSON.stringify(errorDetails)
            : errorDetails
        }`
      );
    }

    return await response.json();
  } catch (error) {
    // Network errors, parsing errors, and our custom HTTP errors
    console.error('Fetch failed:', error.message);
    throw error; // Re-throw to allow calling code to handle
  }
}

Implementieren eines Request-Timeouts mit Node Fetch

Node fetch hat keine integrierte Timeout-Unterstützung, aber Sie können sie mit AbortController implementieren:

async function fetchWithTimeout(url, options = {}, timeoutMs = 5000) {
  const controller = new AbortController();
  const { signal } = controller;

  // Set up timeout
  const timeout = setTimeout(() => {
    controller.abort();
  }, timeoutMs);

  try {
    const response = await fetch(url, { ...options, signal });
    clearTimeout(timeout); // Clear timeout if fetch completes

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    return await response.json();
  } catch (error) {
    clearTimeout(timeout);
    if (error.name === 'AbortError') {
      throw new Error(`Request timed out after ${timeoutMs}ms`);
    }
    throw error;
  }
}

// Example usage
fetchWithTimeout('<https://api.example.com/data>', {}, 3000)
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error.message));

Behandlung der Authentifizierung mit Node Fetch

Basisauthentifizierung

const username = 'user';
const password = 'password';
const credentials = Buffer.from(`${username}:${password}`).toString('base64');

fetch('<https://api.example.com/protected>', {
  headers: {
    'Authorization': `Basic ${credentials}`
  }
})
.then(response => response.json())
.then(data => console.log(data));

Bearer-Token-Authentifizierung

const token = 'your_jwt_or_oauth_token';

fetch('<https://api.example.com/protected>', {
  headers: {
    'Authorization': `Bearer ${token}`
  }
})
.then(response => response.json())
.then(data => console.log(data));

Best Practices für die Verwendung von Node Fetch in der Produktion

Überprüfen Sie immer den Antwortstatus: Gehen Sie nicht davon aus, dass Antworten erfolgreich sind
Behandeln Sie verschiedene Inhaltstypen entsprechend: Verwenden Sie die richtige Methode für Ihren Antworttyp (json(), text() usw.)
Implementieren Sie eine ordnungsgemäße Fehlerbehandlung: Erstellen Sie Dienstprogrammfunktionen, die Fehler konsistent behandeln
Legen Sie Request-Timeouts fest: Verhindern Sie hängende Anfragen mit AbortController
Erstellen Sie wiederverwendbare Fetch-Wrapper: Erstellen Sie eine Service-Schicht mit gängigen Anfragemustern
Berücksichtigen Sie die Wiederholungslogik für fehlgeschlagene Anfragen: Implementieren Sie einen exponentiellen Backoff für instabile APIs
Verwenden Sie Umgebungsvariablen für Basis-URLs: Halten Sie umgebungsspezifische URLs aus dem Code heraus

Häufige Fehlerbehebung bei Node Fetch

Fehler "Fetch is not defined"

Wenn Sie auf ReferenceError: fetch is not defined stoßen, überprüfen Sie Folgendes:

Sie verwenden Node.js v18+
Verwenden Sie für Node.js v18-v20 das Flag -experimental-fetch
Installieren Sie für ältere Versionen das Paket node-fetch

HTTPS-Zertifikatprobleme

Node fetch erbt die HTTPS-Zertifikatbehandlung von Node. Für benutzerdefinierte Zertifikate:

const https = require('https');
const fs = require('fs');

const httpsAgent = new https.Agent({
  ca: fs.readFileSync('./custom-certificate.pem')
});

fetch('<https://api.example.com/data>', {
  agent: httpsAgent
})
.then(response => response.json())
.then(data => console.log(data));

Fazit: Node Fetch in Ihren Projekten einsetzen

Die Node fetch API stellt eine erhebliche Verbesserung dar, wie wir HTTP-Anfragen in Node.js-Anwendungen stellen. Mit seiner Promise-basierten Schnittstelle, dem konsistenten Verhalten über alle Plattformen hinweg und der nativen Implementierung wird es zur bevorzugten Wahl für die moderne Node.js-Entwicklung.

Durch die Beherrschung von Node fetch können Sie wartbareren Code erstellen, der moderne JavaScript-Funktionen nutzt und gleichzeitig eine verbesserte Leistung im Vergleich zu älteren HTTP-Client-Bibliotheken bietet. Da sich die stabile Implementierung in Node.js weiterentwickelt, können wir erwarten, dass noch mehr Entwickler diese leistungsstarke API als ihren Standardansatz zur Erstellung von HTTP-Anfragen übernehmen werden.

Nachdem Sie nun ein umfassendes Verständnis von Node fetch haben, können Sie es in Ihren eigenen Projekten implementieren und diese leistungsstarke API für alle Ihre HTTP-Anforderungen nutzen.

button