Haben Sie schon einmal die Frustration erlebt, wenn eine API-Anfrage ein Timeout verursacht und zu Fehlern wie "request failed with status code 408" oder "network error" führt?

Mit der Timeout-Option in Axios können Sie festlegen, wie lange auf eine Serverantwort gewartet werden soll, bevor ein Fehler ausgelöst wird, wodurch verhindert wird, dass Ihre Anwendung unbegrenzt hängt.

Die Wahl des richtigen Timeout-Werts und die ordnungsgemäße Behandlung von Timeouts kann jedoch eine Herausforderung sein. Hier kommt Apidog ins Spiel, eine Plattform zum Testen und Debuggen von APIs, mit der Sie Ihre Axios-Anfragen mit Timeout testen und debuggen können.

💡

Testen und debuggen Sie Ihre Axios-Anfragen mit Timeout mithilfe von Apidog, einer integrierten Plattform für API-Design, Debugging, Entwicklung, Mocking und Testen – kostenlos.

button

Was ist Axios Timeout und warum es wichtig ist

Bevor wir uns mit den Details zur Behandlung von Axios-Timeouts befassen, wollen wir zunächst verstehen, was es ist und warum es wichtig ist.

Axios Timeout ist die maximale Zeitspanne, die Axios auf eine Antwort vom Server wartet, bevor die Anfrage abgebrochen und ein Fehler ausgelöst wird. Der Standard-Timeout-Wert in Axios ist 0, was bedeutet, dass kein Timeout vorhanden ist und Axios unbegrenzt auf eine Antwort wartet.

Durch das Festlegen eines Timeout-Werts können Sie Axios anweisen, die Anfrage nach einer bestimmten Zeitspanne abzubrechen und einen Fehler auszulösen. Auf diese Weise können Sie den Fehler in Ihrem Code behandeln und dem Benutzer eine Fallback- oder alternative Option anbieten, z. B.:

Anzeigen einer Fehlermeldung oder einer Ladeanzeige
Auffordern des Benutzers, die Seite erneut zu versuchen oder zu aktualisieren
Umleiten des Benutzers auf eine andere Seite oder einen anderen Dienst
Protokollieren des Fehlers oder Senden einer Benachrichtigung an den Entwickler

Durch die Behandlung des Fehlers können Sie die Benutzererfahrung verbessern, die Ressource schonen und das Sicherheitsrisiko verhindern. Sie können auch unnötige oder doppelte Anfragen vermeiden und die Leistung Ihrer Anwendung optimieren.

Aber wie legen Sie den Timeout-Wert in Axios fest? Und wie behandeln Sie den Fehler, wenn er auftritt? Das werden wir in den nächsten Abschnitten sehen.

So legen Sie die Timeout-Option in Axios fest

Das Festlegen der Timeout-Option in Axios ist sehr einfach und unkompliziert. Sie können den Timeout-Wert in Millisekunden als Eigenschaft des Konfigurationsobjekts angeben, das Sie an die Axios-Anfragemethode übergeben, z. B. axios.get, axios.post, axios.put usw.

Wenn Sie beispielsweise den Timeout-Wert für eine GET-Anfrage an einen bestimmten API-Endpunkt auf 5 Sekunden (5000 Millisekunden) festlegen möchten, können Sie Folgendes schreiben:

axios.get('/api/users', {timeout: 5000})
  .then(response => {
    // handle success
  })
  .catch(error => {
    // handle error
  });

Alternativ können Sie den Timeout-Wert auch global für alle Axios-Anfragen festlegen, indem Sie das Objekt axios.defaults verwenden. Wenn Sie beispielsweise den Timeout-Wert für alle Axios-Anfragen auf 5 Sekunden festlegen möchten, können Sie Folgendes schreiben:

axios.defaults.timeout = 5000;

Sie können auch eine Axios-Instanz mit einem benutzerdefinierten Timeout-Wert erstellen und diese für bestimmte Anfragen verwenden. Wenn Sie beispielsweise eine Axios-Instanz mit einem Timeout-Wert von 10 Sekunden erstellen und diese für einige Anfragen verwenden möchten, können Sie Folgendes schreiben:

const instance = axios.create({timeout: 10000});

instance.get('/api/products')
  .then(response => {
    // handle success
  })
  .catch(error => {
    // handle error
  });

Wie Sie sehen, ist das Festlegen der Timeout-Option in Axios sehr einfach und flexibel. Sie können sie für verschiedene Anfragen anpassen, je nach Ihren Bedürfnissen und Vorlieben.

Aber wie wählen Sie den richtigen Timeout-Wert für Ihre Anfragen? Wie lange sollten Sie auf eine Antwort warten, bevor Sie aufgeben? Auf diese Frage gibt es keine endgültige Antwort, da sie von vielen Faktoren abhängt, wie z. B.:

Die Art und der Zweck der Anfrage
Die Geschwindigkeit und Zuverlässigkeit des Servers und des Netzwerks
Die Erwartung und Toleranz des Benutzers
Die Verfügbarkeit und Machbarkeit der Fallback- oder alternativen Option

Aber was passiert, wenn der Timeout-Wert erreicht ist und die Anfrage abgebrochen wird? Wie fangen und behandeln Sie den Timeout-Fehler in Axios? Das werden wir im nächsten Abschnitt sehen.

So fangen und behandeln Sie den Timeout-Fehler in Axios

Wenn der Timeout-Wert erreicht ist und die Anfrage abgebrochen wird, löst Axios einen Fehler aus, den Sie in Ihrem Code abfangen und behandeln können. Es gibt verschiedene Möglichkeiten, den Fehler abzufangen und zu behandeln, je nachdem, wie Sie Ihre Axios-Anfragen schreiben, z. B. mithilfe von try/catch, Promises oder async/await.

Verwenden von try/catch

Wenn Sie try/catch verwenden, um Ihre Axios-Anfragen zu schreiben, können Sie den Fehler im Catch-Block abfangen und entsprechend behandeln. Wenn Sie beispielsweise einen try/catch-Block verwenden, um eine GET-Anfrage an einen bestimmten API-Endpunkt mit einem Timeout-Wert von 5 Sekunden zu stellen, können Sie Folgendes schreiben:

try {
  const response = await axios.get('/api/users', {timeout: 5000});
  // handle success
} catch (error) {
  // handle error
}

Aber woher wissen Sie, ob der Fehler ein Timeout-Fehler oder eine andere Art von Fehler ist? Eine Möglichkeit, dies zu überprüfen, ist die Verwendung der Eigenschaft error.code, die auf „ECONNABORTED“ gesetzt wird, wenn der Fehler ein Timeout-Fehler ist. Sie können beispielsweise Folgendes schreiben:

try {
  const response = await axios.get('/api/users', {timeout: 5000});
  // handle success
} catch (error) {
  // handle error
  if (error.code === 'ECONNABORTED') {
    // handle timeout error
    console.error('Request timed out');
    // do something else, such as showing an error message or a retry button
  } else {
    // handle other types of errors
    console.error(error.message);
    // do something else, such as logging the error or sending a notification
  }
}

Wie Sie sehen, ist die Verwendung von try/catch eine einfache und effektive Möglichkeit, den Timeout-Fehler in Axios abzufangen und zu behandeln. Es erfordert jedoch die Verwendung der async/await-Syntax, die möglicherweise nicht von einigen Browsern oder Umgebungen unterstützt wird. Wenn Sie eine kompatiblere und traditionellere Methode zum Schreiben Ihrer Axios-Anfragen verwenden möchten, können Sie stattdessen Promises verwenden.

Verwenden von Promises

Wenn Sie Promises verwenden, um Ihre Axios-Anfragen zu schreiben, können Sie den Fehler in der Catch-Methode abfangen und entsprechend behandeln. Wenn Sie beispielsweise eine Promise-Kette verwenden, um eine GET-Anfrage an einen bestimmten API-Endpunkt mit einem Timeout-Wert von 5 Sekunden zu stellen, können Sie Folgendes schreiben:

axios.get('/api/users', {timeout: 5000})
  .then(response => {
    // handle success
  })
  .catch(error => {
    // handle error
  });

Um zu überprüfen, ob der Fehler ein Timeout-Fehler ist, können Sie die gleiche Eigenschaft error.code wie zuvor verwenden und sie mit „ECONNABORTED“ vergleichen. Sie können beispielsweise Folgendes schreiben:

axios.get('/api/users', {timeout: 5000})
  .then(response => {
    // handle success
  })
  .catch(error => {
    // handle error
    if (error.code === 'ECONNABORTED') {
      // handle timeout error
      console.error('Request timed out');
      // do something else, such as showing an error message or a retry button
    } else {
      // handle other types of errors
      console.error(error.message);
      // do something else, such as logging the error or sending a notification
    }
  });

Wie Sie sehen, ist die Verwendung von Promises eine weitere einfache und vertraute Möglichkeit, den Timeout-Fehler in Axios abzufangen und zu behandeln. Dies kann jedoch zu einem verschachtelten und ausführlichen Code führen, insbesondere wenn Sie mehrere Axios-Anfragen in einer Sequenz oder parallel haben. Wenn Sie eine modernere und elegantere Methode zum Schreiben Ihrer Axios-Anfragen verwenden möchten, können Sie stattdessen async/await verwenden.

Verwenden von async/await

Wenn Sie async/await verwenden, um Ihre Axios-Anfragen zu schreiben, können Sie den Fehler in einem try/catch-Block abfangen und entsprechend behandeln. Dies ist die gleiche Methode, die wir bereits gesehen haben, aber ich wiederhole sie hier der Vollständigkeit halber. Wenn Sie beispielsweise eine async-Funktion verwenden, um eine GET-Anfrage an einen bestimmten API-Endpunkt mit einem Timeout-Wert von 5 Sekunden zu stellen, können Sie Folgendes schreiben:

async function getUsers() {
  try {
    const response = await axios.get('/api/users', {timeout: 5000});
    // handle success
  } catch (error) {
    // handle error
    if (error.code === 'ECONNABORTED') {
      // handle timeout error
      console.error('Request timed out');
      // do something else, such as showing an error message or a retry button
    } else {
      // handle other types of errors
      console.error(error.message);
      // do something else, such as logging the error or sending a notification
    }
  }
}

Wie Sie sehen, ist die Verwendung von async/await eine saubere und prägnante Möglichkeit, den Timeout-Fehler in Axios abzufangen und zu behandeln. Es erfordert jedoch die Verwendung der async/await-Syntax, die möglicherweise nicht von einigen Browsern oder Umgebungen unterstützt wird. Wenn Sie eine kompatiblere und traditionellere Methode zum Schreiben Ihrer Axios-Anfragen verwenden möchten, können Sie stattdessen Promises verwenden.

Dies sind die drei Hauptmöglichkeiten, den Timeout-Fehler in Axios abzufangen und zu behandeln, mithilfe von try/catch, Promises oder async/await. Sie können diejenige auswählen, die Ihren Vorlieben und Ihrer Situation am besten entspricht, und sie konsequent in Ihrem gesamten Code verwenden.

Aber wie testen und debuggen Sie Ihre Axios-Anfragen mit Timeout?

So testen und debuggen Sie Ihre Axios-Anfragen mit Timeout mithilfe von Apidog

Apidog ist eine leistungsstarke und benutzerfreundliche Plattform, mit der Sie Ihre APIs entwerfen, debuggen, entwickeln, simulieren und testen können. Es verfügt über viele Funktionen und Tools, die es zu einer Komplettlösung für alle Ihre API-Anforderungen machen.

button

Öffnen Sie Apidog und klicken Sie auf die Schaltfläche „Neue Anfrage“, um eine neue Anfrage zu erstellen

Sie sehen einen Anfrage-Editor, in dem Sie die Details Ihrer Anfrage eingeben können, z. B. Methode, URL, Header, Body usw.

Klicken Sie auf die Schaltfläche „Senden“, um die Anfrage zu senden

Sie sehen ein Antwortfenster, in dem Sie die Details der Antwort sehen können, z. B. Status, Header, Body, Zeit usw.

Mit Apidog können Sie Ihre Axios-Anfragen mit Timeout ganz einfach testen und debuggen.

Fazit

In diesem Blogbeitrag haben wir gelernt, wie man Axios-Timeouts wie ein Profi behandelt, indem wir die besten Praktiken und verfügbaren Tools verwenden. Wir haben gesehen, wie man:

Die Timeout-Option in Axios festlegt und für verschiedene Anfragen anpasst
Den Timeout-Fehler in Axios mithilfe von try/catch, Promises oder async/await abfängt und behandelt
Ihre Axios-Anfragen mit Timeout mithilfe von Apidog testen und debuggen, einer integrierten Plattform für API-Design, Debugging, Entwicklung, Mocking und Testen

Wenn Sie diese Schritte befolgen, können Sie die Benutzererfahrung, Leistung und Sicherheit Ihrer Webanwendungen verbessern und die Frustration und den Aufwand vermeiden, unbegrenzt auf eine Antwort vom Server zu warten.

button