Wenn es um die Verarbeitung von HTTP-Anfragen in JavaScript geht, sind Axios und Fetch seit langem die Tools der Wahl. Es gibt jedoch eine leistungsstarke, moderne Alternative, die Entwickler in Betracht ziehen sollten -  Ky. Ky ist leichtgewichtig und vollgepackt mit erweiterten Funktionen und macht die Bearbeitung von HTTP-Anfragen einfacher und effizienter. In diesem Artikel erklären wir, warum Ky herausragt, mit direkten Vergleichen zu Axios und Fetch API.

1. Übersicht über Ky, Axios und Fetch API

Axios

Axios ist ein beliebter, Promise-basierter HTTP-Client für JavaScript. Es vereinfacht HTTP-Anfragen, indem es Funktionen wie automatische JSON-Analyse, Anforderungs-Interceptors und benutzerdefinierte Zeitüberschreitungen bietet. Allerdings kann die Dateigröße insbesondere bei einfachen Anwendungen zum Nachteil werden.

API abrufen

Fetch ist eine integrierte Browser-API zum Senden von HTTP-Anfragen. Obwohl Fetch weit verbreitet ist, weist es einige Einschränkungen auf: Es umfasst keine standardmäßige Fehlerbehandlung oder integrierte Wiederholungsversuche, sodass Entwickler selbst für grundlegende Funktionen zusätzlichen Code schreiben müssen.

Ky

Ky ist eine leichte (157~ KB) Alternative zu Axios und Fetch, die auf Fetch aufbaut, aber eine funktionsreichere API bietet. Mit integrierten Wiederholungsversuchen, vereinfachter Fehlerbehandlung und anpassbaren Anforderungs-Hooks schafft Ky ein Gleichgewicht zwischen Einfachheit und Leistung.

Warum Ky wählen?

• Leichtgewicht: Nur 157~ KB groß, ideal für leistungsempfindliche Anwendungen.
• Modern: Basierend auf der Fetch-API, aber mit besseren Standardeinstellungen.
• Wiederholungsunterstützung: Automatische Wiederholungsversuche bei fehlgeschlagenen Anfragen.
• Hooks: Einfache Bearbeitung von Anfragen und Antworten mit beforeRequest- und afterResponse-Hooks.

2. Warum Ky besser ist: Hauptmerkmale und Vorteile

Leicht und leistungsstark

Das macht Ky zu einer großartigen Wahl für Anwendungen, bei denen Leistung und Bundle-Größe entscheidend sind. Obwohl Ky leichtgewichtig ist, verzichtet es nicht auf wesentliche Funktionen wie Wiederholungsversuche und Fehlerbehandlung.

Einfache API, leistungsstarke Funktionen

Die Syntax von Ky ist so einfach wie die von Fetch, bietet jedoch mehr integrierte Leistung. Eine GET-Anfrage mit Ky zu stellen ist beispielsweise so einfach wie:

import ky from 'ky';
const data = await ky.get('https://api.example.com/data').json();

Warum ist das besser als Fetch?

• Automatische JSON-Analyse: Die Antwort muss nicht manuell analysiert werden.
• Fehlerbehandlung: Ky löst sinnvolle Fehler für HTTP-Codes wie 404 oder 500 aus.
• Wiederholungen: Ky wiederholt fehlgeschlagene Anfragen automatisch, im Gegensatz zu Fetch, das stillschweigend fehlschlägt.

Integrierte Wiederholungsversuche

Ky verfügt über eine integrierte Wiederholungsunterstützung, eine entscheidende Funktion für den Umgang mit unzuverlässigen Netzwerkbedingungen. Axios bietet auch eine Wiederholungsfunktion, Sie müssen jedoch ein zusätzliches Plugin verwenden oder es selbst konfigurieren. Im Gegensatz dazu stellt Ky diese Funktion standardmäßig ohne Konfiguration bereit.

await ky.get('https://api.example.com/data', { retry: 2 });

In diesem Beispiel wird Ky die Anfrage im Falle eines Fehlers bis zu zwei Mal wiederholen, ohne dass zusätzliche Einstellungen erforderlich sind.

3. beforeRequest und afterResponse: The Power of Hooks in Ky

Eine der überzeugendsten Funktionen von Ky ist sein Hooks-System, insbesondere beforeRequest und afterResponse. Diese Hooks geben Ihnen die volle Kontrolle über Ihre HTTP-Anfragen und -Antworten, ohne dass externe Middleware erforderlich ist, die Axios häufig benötigt.

beforeRequest Hook: Anfragen einfach erweitern

Mit Ky können Sie ausgehende Anfragen mithilfe des beforeRequest-Hooks einfach ändern. Egal, ob Sie Authentifizierungstoken hinzufügen oder Header ändern müssen, beforeRequest macht es mühelos.

Beispiel: Hinzufügen eines Autorisierungstokens zu jeder Anfrage.

ky.extend({
  hooks: {
    beforeRequest: [
      request => {
        const token = localStorage.getItem('authToken');
        request.headers.set('Authorization', `Bearer ${token}`);
      }
    ]
  }
});

Dadurch wird sich wiederholender Code reduziert, was die globale Handhabung der Authentifizierung erleichtert.

afterResponse Hook: Vereinfachen Sie die Antwortverarbeitung

Mit dem afterResponse-Hook können Sie Antworten in Ihrer gesamten Anwendung manipulieren. Dieser Hook ist besonders nützlich für die Handhabung von Wiederholungsversuchen bei bestimmten Statuscodes, z. B. beim Aktualisieren abgelaufener Token.

Beispiel: Automatische Aktualisierung eines abgelaufenen Tokens bei einer nicht autorisierten 401-Antwort.

ky.extend({
  hooks: {
    afterResponse: [
      async (request, options, response) => {
        if (response.status === 401) {
          const newToken = await refreshAuthToken();
          request.headers.set('Authorization', `Bearer ${newToken}`);
          return ky(request);
        }
      }
    ]
  }
});

Mit diesem Setup können Sie Token nahtlos aktualisieren, ohne die Logik in Ihrer Anwendung zu duplizieren.

4. Fehlerbehandlung: Ky vs. Axios vs. Fetch API

Axios

Axios bietet eine ordentliche Fehlerbehandlung über Interceptoren, es fehlt jedoch die Einfachheit, die Ky standardmäßig bietet. Axios erfordert häufig eine benutzerdefinierte Logik für Wiederholungsversuche und die Behandlung von Fehlerstatuscodes.

API abrufen

Fetch ist standardmäßig eingeschränkt. Es werden keine Fehler für HTTP-Statuscodes wie 404 oder 500 ausgegeben, was Entwickler dazu zwingt, den Antwortstatus manuell zu überprüfen.

Ky

Ky zeichnet sich durch Fehlerbehandlung aus. Es löst automatisch Fehler für Nicht-2xx-HTTP-Antworten aus und bietet Wiederholungsfunktionen für fehlgeschlagene Anfragen, ohne dass zusätzlicher Code erforderlich ist. Dies macht Ky zu einer robusten Lösung für den eleganten Umgang mit Fehlern.

try {
  const data = await ky.get('https://api.example.com/data').json();
} catch (error) {
  console.error('Request failed:', error);
}

Ky verpackt die gesamte Anfrage in ein Versprechen und löst automatisch einen Fehler aus, wenn der Antwortstatuscode einen Fehler anzeigt, was das Debuggen vereinfacht.

5. Praxisbeispiele: Ky in Aktion

Stellen wir Ky anhand einiger praktischer Beispiele auf die Probe, die seine Einfachheit und Leistungsfähigkeit demonstrieren.

Beispiel 1: Eine GET-Anfrage stellen

const response = await ky.get('https://api.example.com/items').json();
console.log(response);

Ky übernimmt automatisch die JSON-Analyse und löst einen Fehler für alle Nicht-2xx-Statuscodes aus, was bei Fetch nicht der Fall ist.

Beispiel 2: POST-Anfrage mit Wiederholungen

const response = await ky.post('https://api.example.com/create', {
  json: { name: 'Ky' },
  retry: 3
}).json();
console.log(response);

Ky wiederholt die POST-Anfrage bis zu dreimal, wenn sie fehlschlägt, was eine höhere Zuverlässigkeit als Fetch oder Axios ohne zusätzliche Konfiguration bietet.

6. Fazit: Ist Ky den Wechsel wert?

Wenn Sie nach einer modernen, leichtgewichtigen und funktionsreichen Lösung zum Erstellen von HTTP-Anfragen in JavaScript suchen, Ky ist eine ausgezeichnete Wahl. Während Axios und Fetch immer noch weit verbreitet sind, bietet Ky wichtige Vorteile wie automatische Wiederholungsversuche, Hooks zum Anpassen von Anfragen und Antworten und eine bessere Standardfehlerbehandlung.

Für Entwickler, die Wert auf Einfachheit, Leistung und Kontrolle über HTTP-Anfragen legen, ist Ky als primäres Tool in Ihren JavaScript-Projekten auf jeden Fall eine Überlegung wert.

Weitere Beispiele und detaillierte API-Informationen finden Sie unter https://www.npmjs.com/package/ky.