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

Online Python-Trainer für Anfänger

Lernen Sie Python einfach ohne theoretische Überlastung. Lösen Sie praktische Aufgaben mit automatischer Überprüfung und schreiben Sie Code direkt im Browser.

Kurs starten

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

In der modernen Webentwicklung ist die Interaktion mit externen APIs und Servern eine grundlegende Aufgabe. Ob es um das Abrufen von Wetterdaten, das Senden eines Formulars oder die Integration mit einem Zahlungsgateway geht – Sie benötigen einen HTTP-Client. In diesem Artikel analysieren wir, wie man HTTP-Anfragen in JavaScript (Node.js) richtig erstellt: von der Auswahl des Werkzeugs bis zur Fehlerbehandlung und Optimierung. Sie erfahren, wie Sie zuverlässigen und leistungsfähigen Code schreiben.

1. Auswahl des Werkzeugs: native Möglichkeiten vs. Bibliotheken

Node.js bietet mehrere Möglichkeiten zur Durchführung von HTTP-Anfragen. Die Wahl hängt von der Komplexität der Aufgabe und persönlichen Vorlieben ab.

1.1. Integriertes Modul `http` / `https`

Dies ist der niedrigschwelligste Ansatz. Er bietet volle Kontrolle, erfordert jedoch viel Code für einfache Anfragen.

const https = require('https');

function getUsers() {  return new Promise((resolve, reject) => {    const url = 'https://jsonplaceholder.typicode.com/users';    https.get(url, (res) => {      let data = '';      res.on('data', chunk => data += chunk);      res.on('end', () => {        try {          resolve(JSON.parse(data));        } catch (e) {          reject(e);        }      });    }).on('error', reject);  });}

getUsers().then(console.log).catch(console.error);

1.2. Globales `fetch` (ab Node.js 18+)

Ab Version 18 verfügt Node.js über natives fetch, bekannt aus Browsern. Dies ist eine moderne und benutzerfreundliche API.

async function getPosts() {  try {    const response = await fetch('https://jsonplaceholder.typicode.com/posts');    if (!response.ok) {      throw new Error(`HTTP error! status: ${response.status}`);    }    const data = await response.json();    return data;  } catch (error) {    console.error('Fetch error:', error);    throw error;  }}

getPosts().then(posts => console.log(posts.slice(0, 2)));

1.3. Beliebte Bibliotheken: `axios`

axios ist die beliebteste Bibliothek für HTTP-Anfragen. Sie bietet eine benutzerfreundliche API, Promise-Unterstützung, Interceptors und automatisches JSON-Parsing.

const axios = require('axios');

async function createTodo() {  try {    const response = await axios.post('https://jsonplaceholder.typicode.com/todos', {      title: 'HTTP-Clients lernen',      completed: false,      userId: 1    });    console.log('Erstellt:', response.data);    return response.data;  } catch (error) {    console.error('Fehler:', error.response?.data || error.message);  }}

createTodo();

Fazit: Für einfache Skripte verwenden Sie fetch. Für ernsthafte Projekte mit vielen Anfragen und Interceptors verwenden Sie axios. Das Modul http behalten Sie für spezifische Fälle vor.

2. Grundlegende Anfragetypen und Arbeit mit Daten

Wir analysieren, wie man GET-, POST-, PUT- und DELETE-Anfragen mit axios korrekt sendet.

2.1. GET – Daten abrufen

async function getUser(id) {  try {    const { data } = await axios.get(`https://jsonplaceholder.typicode.com/users/${id}`);    return data;  } catch (error) {    throw new Error(`Benutzer ${id} konnte nicht abgerufen werden: ${error.message}`);  }}

2.2. POST – Ressource erstellen

Daten werden im Anfragetext übergeben. Es ist wichtig, den Inhaltstyp (Content-Type) anzugeben. Axios erledigt dies automatisch für JSON.

async function createUser(userData) {  const response = await axios.post('https://jsonplaceholder.typicode.com/users', userData, {    headers: {      'Content-Type': 'application/json'    }  });  return response.data;}