JavaScript-Tutorial: Erfahren Sie, wie Sie HTTP-Statuscodes von Grund auf erhalten

Fangen Sie bei Null an: Mit JavaScript lernen Sie, wie Sie HTTP-Statuscodes erhalten.

Bei der Webentwicklung müssen wir häufig mit dem Server kommunizieren, und das Verständnis von HTTP-Statuscodes ist ein sehr wichtiger Teil. Der HTTP-Statuscode ist eine Kennung der Antwort des Servers auf eine HTTP-Anfrage. Der Server verwendet den Statuscode, um dem Client das Verarbeitungsergebnis der Anfrage mitzuteilen.

In diesem Artikel werden Codebeispiele mithilfe von JavaScript geschrieben, um Ihnen beizubringen, wie Sie HTTP-Statuscodes im Frontend erhalten.

1. Verwenden Sie das XMLHttpRequest-Objekt, um den HTTP-Statuscode abzurufen.

Das XMLHttpRequest-Objekt ist der Kern des Datenaustauschs zwischen dem Frontend und dem Server. Wir können es verwenden, um HTTP-Anfragen zu senden und den Antwortstatuscode abzurufen.

Zuerst erstellen wir ein XMLHttpRequest-Objekt:

var xhr = new XMLHttpRequest();

Als nächstes können wir die open()-Methode des XMLHttpRequest-Objekts verwenden, um die angeforderte URL und Anforderungsmethode (GET, POST, PUT usw.) anzugeben:

xhr.open('GET', 'http://www.example.com', true);

We Sie können auch die Methode setRequestHeader() verwenden, um den Anforderungsheader festzulegen. Dies ist sehr nützlich, wenn Sie bestimmte Anforderungsheader übergeben müssen:

xhr.setRequestHeader('Content-Type', 'application/json');

Dann verwenden wir die Methode send(), um die Anforderung zu senden:

xhr.send();

Das müssen wir tun Hören Sie auf das readystatechange-Ereignis des XMLHttpRequest-Objekts. Das Ereignis wird ausgelöst, wenn sich der Anforderungsstatus ändert. In der Listening-Funktion können wir den HTTP-Statuscode über das Statusattribut abrufen:

xhr.onreadystatechange = function() {
   if(xhr.readyState === 4) {
      console.log('HTTP状态码：', xhr.status);
   }
};

2. Verwenden Sie die Fetch-API, um den HTTP-Statuscode abzurufen.

Fetch-API ist eine moderne Netzwerkanforderungsmethode in JavaScript, die wir auch verwenden können um den HTTP-Statuscode abzurufen.

Verwenden Sie die Fetch-Methode, um eine GET-Anfrage zu senden und den HTTP-Statuscode abzurufen. Der Code lautet wie folgt:

fetch('http://www.example.com')
   .then(response => {
      console.log('HTTP状态码：', response.status);
   });

Es ist zu beachten, dass die Fetch-Methode ein Promise-Objekt zurückgibt und wir .then() verwenden müssen Behandeln Sie die Antwort der asynchronen Anfrage.

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

Axios ist eine sehr beliebte JavaScript-Bibliothek, die Netzwerkanfragen präziser senden kann und eine benutzerfreundlichere API bietet. Wir können Axios auch verwenden, um HTTP-Statuscodes abzurufen.

Zuerst müssen wir die Axios-Bibliothek vorstellen:

<script src="https://cdn.jsdelivr.net/npm/axios"></script>

Dann lautet der Code zum Senden einer GET-Anfrage und zum Abrufen des HTTP-Statuscodes wie folgt:

axios.get('http://www.example.com')
   .then(response => {
      console.log('HTTP状态码：', response.status);
   });

Die prägnante API und die eleganten Kettenaufrufe von Axios ermöglichen es uns, Netzwerkanfragen zu senden bequemer.

Mit den oben genannten drei Methoden können wir den HTTP-Statuscode problemlos im Frontend abrufen. Das Verständnis von HTTP-Statuscodes kann uns helfen, Netzwerkanfragen besser zu debuggen und zu bearbeiten und die Benutzererfahrung zu verbessern. Ich hoffe, dieser Artikel kann Ihnen hilfreich sein!

Das obige ist der detaillierte Inhalt vonJavaScript-Tutorial: Erfahren Sie, wie Sie HTTP-Statuscodes von Grund auf erhalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!