別用IE瀏覽器！！！
問題
當(dāng)瀏覽器請(qǐng)求超時(shí)或者網(wǎng)絡(luò)異常的時(shí)候，我們程序需要做出什么處理和反應(yīng)呢？
ps：代碼我會(huì)在后面貼出來，思路最重要
# 請(qǐng)求超時(shí) 首先在==express==邏輯上是這樣子寫的
// 模擬請(qǐng)求超時(shí)
app.all("/delay", (request, response) => {
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Headers', '*');
setTimeout(() => {
response.send('接收成功：模擬請(qǐng)求超時(shí)');
}, 3000);
})
前端的請(qǐng)求
一開始沒有加請(qǐng)求時(shí)間的設(shè)置，是可以輸出結(jié)果的
那么現(xiàn)在呢，我們需要為請(qǐng)求加上一個(gè)限制時(shí)間，超過這個(gè)限制時(shí)間，瀏覽器就會(huì)認(rèn)為此時(shí)請(qǐng)求超時(shí)了。如下加上
保存代碼，然后到瀏覽器刷新，打開控制臺(tái)
選擇network，然后點(diǎn)擊按鈕，觀察network的請(qǐng)求狀態(tài)
首先一開始是pending狀態(tài)（請(qǐng)求中）
超過了請(qǐng)求的閾值（2s），此時(shí)顯示請(qǐng)求被取消了，顯示cancel狀態(tài)，而不是finish
但是在實(shí)際業(yè)務(wù)中，你不可能讓每個(gè)用戶打開控制臺(tái)看請(qǐng)求有沒有超時(shí)吧，所以我們可以加一個(gè)請(qǐng)求超時(shí)回調(diào)來完成信息彈窗提醒
我們刷新運(yùn)行，發(fā)現(xiàn)此時(shí)就有一個(gè)彈窗提示了
那么，請(qǐng)求超時(shí)就演示到這來
網(wǎng)絡(luò)異常
現(xiàn)在來看看網(wǎng)絡(luò)異常我們需要怎么處理，那么網(wǎng)絡(luò)異常在前端js里面也是有回調(diào)函數(shù)的，如下
然后，我們通過瀏覽器的控制臺(tái)模擬離線狀態(tài)
然后，我們點(diǎn)擊按鈕查看效果
莫得問題！
代碼
!DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8" />
titile>超時(shí)與網(wǎng)絡(luò)異常處理/titile>
style>
#content {
width: 400px;
height: 200px;
border: 1px solid rgb(4, 247, 25);
border-width: 3px;
margin: 20px 0 20px 0;
}
/style>
/head>
body>
button type="button">提交/button>
div id="content">/div>
script>
const btn = document.getElementsByTagName('button')[0];
const res = document.getElementById('content');
btn.onclick = function() {
const xhr = new XMLHttpRequest();
xhr.timeout = 2000;
xhr.ontimeout = function() {
alert('請(qǐng)求超時(shí)，請(qǐng)檢查網(wǎng)絡(luò)是否可用！');
}
xhr.onerror = function() {
alert('你的網(wǎng)絡(luò)開小差了，請(qǐng)重新連接網(wǎng)絡(luò)試試');
}
xhr.open('GET', 'http://127.0.0.1:8080/delay');
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status >= 200 xhr.status 300) {
res.innerHTML = xhr.response;
}
} else {
}
}
};
/script>
/body>
/html>
const express = require("express");
const app = express();
// 模擬請(qǐng)求超時(shí)
app.all("/delay", (request, response) => {
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Headers', '*');
setTimeout(() => {
response.send('接收成功：模擬請(qǐng)求超時(shí)');
}, 3000);
})
app.listen(8080, () => {
console.log('正在監(jiān)聽8080端口');
});
總結(jié)
到此這篇關(guān)于Ajax請(qǐng)求超時(shí)與網(wǎng)絡(luò)異常處理的文章就介紹到這了,更多相關(guān)Ajax請(qǐng)求超時(shí)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:- Ajax請(qǐng)求在數(shù)據(jù)量大的時(shí)候出現(xiàn)超時(shí)的解決方法
