當使用XMLHttpRequest對象進行異步請求時,我們通常會監聽其onreadystatechange事件來處理請求的狀態變化。以下是一些處理onreadystatechange事件的異步處理技巧:
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
handleResponse(xhr.responseText);
}
};
function handleResponse(response) {
// 處理響應數據
}
function makeRequest(url) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve(xhr.responseText);
} else {
reject(xhr.status);
}
}
};
xhr.send();
});
}
makeRequest('https://api.example.com/data')
.then(function(response) {
// 處理響應數據
})
.catch(function(error) {
// 處理錯誤
});
async function fetchData(url) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve(xhr.responseText);
} else {
reject(xhr.status);
}
}
};
xhr.send();
});
}
async function handleRequest() {
try {
const response = await fetchData('https://api.example.com/data');
// 處理響應數據
} catch (error) {
// 處理錯誤
}
}
handleRequest();
這些技巧可以幫助我們更好地處理XMLHttpRequest對象的onreadystatechange事件,使代碼更加清晰和易于維護。