實用技巧：掌握JavaScript中獲取HTTP狀態碼的方法，需要具體代碼示例
引言：
在Web開發中，經常需要與后端進行數據交互。在這個過程中，了解HTTP狀態碼是非常重要的，它能夠幫助我們判斷請求是否成功以及處理錯誤情況。本文將介紹如何通過JavaScript獲取HTTP狀態碼的方法，并提供具體的代碼示例，幫助讀者快速掌握這一技巧。
一、使用XMLHttpRequest對象獲取HTTP狀態碼
XMLHttpRequest是一種用于客戶端與服務器端進行異步通信的對象。在JavaScript中，我們可以利用XMLHttpRequest對象發送HTTP請求，并獲取相應的狀態碼。
代碼示例：
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();
登錄后復制
解析：
首先，我們創建一個XMLHttpRequest對象實例xhr。然后，使用xhr.open()方法指定請求的類型(GET、POST等)以及請求的URL。第三個參數為異步標識，設置為true表示使用異步方式發送請求。
接下來，我們為xhr對象的onreadystatechange事件綁定一個回調函數。該回調函數會在xhr對象的狀態發生變化時被觸發。當onreadystatechange事件觸發時，我們先判斷xhr對象的readyState是否為4，這意味著請求已經完成接收到響應。
最后，我們通過xhr.status屬性獲取HTTP狀態碼，并在控制臺打印出來。
二、使用fetch API獲取HTTP狀態碼
fetch API是一種基于Promise的現代網絡請求API，提供了更加簡潔和靈活的方式進行網絡通信。通過fetch API，我們也能夠方便地獲取HTTP狀態碼。
代碼示例：
fetch('http://api.example.com/data')
.then(response => {
let status = response.status;
console.log('HTTP狀態碼：', status);
})
.catch(error => {
console.log('請求發生錯誤：', error);
});
登錄后復制
解析：
首先，我們使用fetch函數發送一個GET請求，并傳入請求的URL作為參數。fetch函數會返回一個Promise對象。
接著，我們使用Promise對象的then方法定義一個回調函數。當請求返回時，該回調函數會被觸發，并接受一個response對象作為參數。
在回調函數中，我們通過response.status屬性獲取HTTP狀態碼，并在控制臺打印出來。
如果請求發生錯誤，我們可以通過catch方法捕獲錯誤，并在控制臺打印出錯誤信息。
三、使用axios庫獲取HTTP狀態碼
axios是一個基于Promise的HTTP客戶端，可以在瀏覽器和Node.js中使用。它提供了便利的API，用于發送HTTP請求和處理響應。
代碼示例：
axios.get('http://api.example.com/data')
.then(response => {
let status = response.status;
console.log('HTTP狀態碼：', status);
})
.catch(error => {
console.log('請求發生錯誤：', error);
});
登錄后復制
解析：
首先，我們使用axios的get方法發送一個GET請求，并傳入請求的URL作為參數。get方法會返回一個Promise對象。
接著，我們使用Promise對象的then方法定義一個回調函數。當請求返回時，該回調函數會被觸發，并接受一個response對象作為參數。
在回調函數中，我們通過response.status屬性獲取HTTP狀態碼，并在控制臺打印出來。
如果請求發生錯誤，我們可以通過catch方法捕獲錯誤，并在控制臺打印出錯誤信息。
結論：
本文介紹了三種常用的方法來獲取HTTP狀態碼：使用XMLHttpRequest對象、fetch API和axios庫。通過掌握這些方法，并能夠靈活使用，我們能夠更加準確地判斷請求狀態以及處理錯誤情況，提升Web開發的效率和質量。希望本文能對讀者有所幫助。
參考資料：
-
MDN Web Docs: XMLHttpRequest – https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
MDN Web Docs: Fetch API – https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
Axios – https://axios-http.com/
