Beherrschen Sie praktische Fähigkeiten zum Erhalten von HTTP-Statuscodes in JavaScript

Praktische Tipps: Um die Methode zum Abrufen von HTTP-Statuscode in JavaScript zu beherrschen, sind spezifische Codebeispiele erforderlich

Einführung:
In der Webentwicklung ist häufig eine Dateninteraktion mit dem Backend erforderlich. In diesem Prozess ist es sehr wichtig, den HTTP-Statuscode zu verstehen, der uns dabei helfen kann, festzustellen, ob die Anfrage erfolgreich ist, und Fehlerbedingungen zu behandeln. In diesem Artikel wird erläutert, wie Sie den HTTP-Statuscode über JavaScript erhalten, und es werden spezifische Codebeispiele bereitgestellt, die den Lesern helfen, diese Technik schnell zu beherrschen.

1. Verwenden Sie das XMLHttpRequest-Objekt, um den HTTP-Statuscode abzurufen.
XMLHttpRequest ist ein Objekt, das für die asynchrone Kommunikation zwischen dem Client und dem Server verwendet wird. In JavaScript können wir das XMLHttpRequest-Objekt verwenden, um HTTP-Anfragen zu senden und den entsprechenden Statuscode abzurufen.

Codebeispiel:

let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.example.com/data', true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) { // 请求完成
    let status = xhr.status;
    console.log('HTTP状态码：', status);
  }
}
xhr.send();

Parsing:
Zuerst erstellen wir eine XMLHttpRequest-Objektinstanz xhr. Verwenden Sie dann die Methode xhr.open(), um den Typ der Anfrage (GET, POST usw.) und die angeforderte URL anzugeben. Der dritte Parameter ist die asynchrone Kennung. Wenn Sie ihn auf „true“ setzen, wird die Anfrage asynchron gesendet.

Als nächstes binden wir eine Callback-Funktion an das onreadystatechange-Ereignis des xhr-Objekts. Diese Rückruffunktion wird ausgelöst, wenn sich der Status des xhr-Objekts ändert. Wenn das Ereignis onreadystatechange ausgelöst wird, ermitteln wir zunächst, ob der readyState des xhr-Objekts 4 ist, was bedeutet, dass die Anfrage abgeschlossen und die Antwort empfangen wurde.

Schließlich erhalten wir den HTTP-Statuscode über das Attribut xhr.status und drucken ihn auf der Konsole aus.

2. Verwenden Sie die Fetch-API, um den HTTP-Statuscode abzurufen. Die Fetch-API ist eine moderne Netzwerkanforderungs-API, die auf Promise basiert und eine präzisere und flexiblere Möglichkeit zur Kommunikation über das Netzwerk bietet. Über die Abruf-API können wir auch problemlos den HTTP-Statuscode abrufen.

Codebeispiel:

fetch('http://api.example.com/data')
  .then(response => {
    let status = response.status;
    console.log('HTTP状态码：', status);
  })
  .catch(error => {
    console.log('请求发生错误：', error);
  });

Analyse:

Zunächst senden wir mit der Fetch-Funktion eine GET-Anfrage und übergeben die angeforderte URL als Parameter. Die Fetch-Funktion gibt ein Promise-Objekt zurück.

Als nächstes verwenden wir die then-Methode des Promise-Objekts, um eine Callback-Funktion zu definieren. Wenn die Anfrage zurückkommt, wird die Rückruffunktion ausgelöst und akzeptiert ein Antwortobjekt als Parameter.

In der Callback-Funktion erhalten wir den HTTP-Statuscode über das Attribut „response.status“ und geben ihn auf der Konsole aus.

Wenn in der Anfrage ein Fehler auftritt, können wir den Fehler über die Catch-Methode erfassen und die Fehlerinformationen auf der Konsole ausdrucken.

3. Verwenden Sie die Axios-Bibliothek, um den HTTP-Statuscode zu erhalten.

Axios ist ein Promise-basierter HTTP-Client, der in Browsern und Node.js verwendet werden kann. Es bietet eine praktische API zum Senden von HTTP-Anfragen und zum Verarbeiten von Antworten.

Codebeispiel:

axios.get('http://api.example.com/data')
  .then(response => {
    let status = response.status;
    console.log('HTTP状态码：', status);
  })
  .catch(error => {
    console.log('请求发生错误：', error);
  });

Analyse:

Zuerst verwenden wir die Get-Methode von Axios, um eine GET-Anfrage zu senden und die angeforderte URL als Parameter zu übergeben. Die get-Methode gibt ein Promise-Objekt zurück.

Als nächstes verwenden wir die then-Methode des Promise-Objekts, um eine Callback-Funktion zu definieren. Wenn die Anfrage zurückkommt, wird die Rückruffunktion ausgelöst und akzeptiert ein Antwortobjekt als Parameter.

In der Callback-Funktion erhalten wir den HTTP-Statuscode über das Attribut „response.status“ und geben ihn auf der Konsole aus.

Wenn in der Anfrage ein Fehler auftritt, können wir den Fehler über die Catch-Methode erfassen und die Fehlerinformationen auf der Konsole ausdrucken.

Fazit:

In diesem Artikel werden drei gängige Methoden zum Abrufen von HTTP-Statuscodes vorgestellt: Verwendung des XMLHttpRequest-Objekts, der Fetch-API und der Axios-Bibliothek. Durch die Beherrschung dieser Methoden und die Möglichkeit, sie flexibel einzusetzen, können wir den Anfragestatus genauer bestimmen und Fehlersituationen behandeln, wodurch die Effizienz und Qualität der Webentwicklung verbessert wird. Ich hoffe, dieser Artikel kann den Lesern hilfreich sein.

Referenzen:

MDN-Webdokumente: XMLHttpRequest – https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
1. MDN-Webdokumente: Fetch API – https://developer.mozilla .org/en-US/docs/Web/API/Fetch_API
2. Axios – https://axios-http.com/

Das obige ist der detaillierte Inhalt vonBeherrschen Sie praktische Fähigkeiten zum Erhalten von HTTP-Statuscodes in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!