從零開始：JavaScript教你如何獲取HTTP狀態碼
在Web開發中，我們經常需與服務器進行通信，而了解HTTP狀態碼是非常重要的一部分。HTTP狀態碼是服務器對HTTP請求的響應的一種標識，服務器通過狀態碼告訴客戶端請求的處理結果。
本文將使用JavaScript編寫代碼示例，教你如何在前端獲取HTTP狀態碼的方法。
一、使用XMLHttpRequest對象獲取HTTP狀態碼
XMLHttpRequest對象是前端與服務器進行數據交換的核心，我們可以利用它來發送HTTP請求并獲取響應的狀態碼。
首先，我們創建一個XMLHttpRequest對象：
var xhr = new XMLHttpRequest();
登錄后復制
接下來，我們可以使用XMLHttpRequest對象的open()方法來指定請求的URL和請求的方法（GET、POST、PUT等）：
xhr.open('GET', 'http://www.example.com', true);
登錄后復制
我們還可以使用setRequestHeader()方法來設置請求頭，這在需要傳遞特定的請求頭時非常有用：
xhr.setRequestHeader('Content-Type', 'application/json');
登錄后復制
然后，我們使用send()方法來發送請求：
xhr.send();
登錄后復制
我們需要監聽XMLHttpRequest對象的readystatechange事件，該事件在請求狀態改變時被觸發。在監聽函數中，我們可以通過status屬性來獲取HTTP狀態碼：
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
console.log('HTTP狀態碼：', xhr.status);
}
};
登錄后復制
二、使用fetch API獲取HTTP狀態碼
fetch API是JavaScript中的一種現代化的網絡請求方法，我們也可以使用它來獲取HTTP狀態碼。
使用fetch方法發送GET請求，并獲取HTTP狀態碼的代碼如下：
fetch('http://www.example.com')
.then(response => {
console.log('HTTP狀態碼：', response.status);
});
登錄后復制
需要注意的是，fetch方法返回一個Promise對象，我們需要使用.then()來處理異步請求的響應。
三、使用Axios庫獲取HTTP狀態碼
Axios是一個非常流行的JavaScript庫，它能夠更簡潔地發送網絡請求，并提供了更友好的API。我們同樣可以使用Axios來獲取HTTP狀態碼。
首先，我們需要引入Axios庫：
<script src="https://cdn.jsdelivr.net/npm/axios"></script>
登錄后復制
然后，發送GET請求并獲取HTTP狀態碼的代碼如下：
axios.get('http://www.example.com')
.then(response => {
console.log('HTTP狀態碼：', response.status);
});
登錄后復制
Axios的簡潔的API和優雅的鏈式調用使得我們能夠更方便地發送網絡請求。
通過以上三種方法，我們可以在前端輕松地獲取HTTP狀態碼。了解HTTP狀態碼可以幫助我們更好地調試和處理網絡請求，提升用戶體驗。希望本文能夠對你有所幫助！
