在JavaScript中判断网络超时通常是通过使用XMLHttpRequest
对象或者fetch
API结合Promise.race
来实现的。
基础概念:
实现网络超时的优势:
类型与应用场景:
XMLHttpRequest
的超时设置和基于fetch
API的超时判断。如何实现:
XMLHttpRequest
对象的timeout
属性来判断网络超时。var xhr = new XMLHttpRequest();
xhr.open('GET', 'your_url', true);
xhr.timeout = 5000; // 设置超时时间为5秒
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log('请求成功');
} else {
console.log('请求失败');
}
}
};
xhr.ontimeout = function() {
console.log('请求超时');
};
xhr.send();
Promise.race
结合fetch
API来实现超时判断。function fetchWithTimeout(url, options, timeout = 5000) {
return Promise.race([
fetch(url, options),
new Promise((_, reject) =>
setTimeout(() => reject(new Error('请求超时')), timeout)
)
]);
}
fetchWithTimeout('your_url', {}, 5000)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error.message));
问题原因与解决方法:
领取专属 10元无门槛券
手把手带您无忧上云