Ajax請(qǐng)求超時(shí)與網(wǎng)絡(luò)異常處理圖文詳解
別用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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用加載圖片解決在Ajax數(shù)據(jù)加載中頁(yè)面出現(xiàn)短暫空白的問題(推薦)
在項(xiàng)目中用ajax異步獲取數(shù)據(jù)后有時(shí)會(huì)因?yàn)閿?shù)據(jù)問題或者網(wǎng)絡(luò)問題,頁(yè)面一直顯示空白,現(xiàn)在用加載圖片來過渡這種狀態(tài),具體實(shí)例代碼通過本文一起學(xué)習(xí)吧2016-12-12Ajax實(shí)現(xiàn)頁(yè)面無刷新留言效果
這篇文章主要為大家詳細(xì)介紹了Ajax實(shí)現(xiàn)頁(yè)面無刷新留言效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12服務(wù)端配置實(shí)現(xiàn)AJAX跨域請(qǐng)求
這篇文章主要介紹了服務(wù)端配置實(shí)現(xiàn)AJAX跨域請(qǐng)求的相關(guān)資料,需要的朋友可以參考下2015-02-02利用ajax傳遞數(shù)組及后臺(tái)接收的方法詳解
這篇文章主要給大家介紹了關(guān)于利用ajax傳遞數(shù)組及后臺(tái)接收的相關(guān)資料,文中介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-06-06Ajax遍歷jSon后對(duì)每一條數(shù)據(jù)進(jìn)行相應(yīng)的修改和刪除(代碼分享)
這篇文章主要介紹了Ajax遍歷jSon后對(duì)每一條數(shù)據(jù)進(jìn)行相應(yīng)的修改和刪除的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-11-11ajax請(qǐng)求json數(shù)據(jù)案例詳解
最近項(xiàng)目有這樣一個(gè)需求,點(diǎn)擊六大洲,出現(xiàn)對(duì)應(yīng)的一些請(qǐng)求信息,展示在下面,當(dāng)請(qǐng)求之后,第二次點(diǎn)擊就不用再次請(qǐng)求了,究竟用代碼怎么寫呢,下面小編帶領(lǐng)大家了解了解2015-09-09react axios 跨域訪問一個(gè)或多個(gè)域名問題
這篇文章主要介紹了react axios 跨域訪問一個(gè)或多個(gè)域名問題,本文通過實(shí)例代碼截圖的形式給大家展示的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04