Ajax請求超時與網路異常處理圖文詳解
阿新 • • 發佈：2021-05-24
別用IE瀏覽器！！！
問題
當瀏覽器請求超時或者網路異常的時候，我們程式需要做出什麼處理和反應呢？
ps：程式碼我會在後面貼出來，思路最重要
www.cppcns.com# 請求超時 首先在==express==邏輯上是這樣子寫的
// 模擬請求超時
app.all("/delay",(request,response) => {
response.setHeader('Access-Control-Allow-Origin','*');
response.setHeader('Access-Control-Allow-Headers','*');
setTimeout(() => {
response.send('接收成功：模擬請求超時');
},3000);
})
前端的請求
一開始沒有加請求時間的設定，是可以輸出結果的
那麼現在呢，我們需要為請求加上程式設計客棧一個限制時間，超過這個限制時間，瀏覽器就會認為此時請求超時了。如下加上
儲存程式碼，然後到瀏覽器重新整理，開啟控制檯
選擇network，然後點選按鈕，觀察network的請求狀態
首先一開始是pending狀態（請求中）
超過了請求的閾值（2s），此時顯示請求被取消了，顯示cancel狀態，而不是finish
但是在實程式設計客棧際業務中，你不可能讓每個使用者開啟控制檯看請求有沒有超時吧，所以我們可以加一個請求超時回撥來完成資訊彈窗提醒
我們重新整理執行，發現此時就有一個彈窗提示了
那麼，請求超時就演示到這來
網路異常
現在來看看網路異常我們需要怎麼處理，那麼網路異常在前端js裡面也是有回撥函式的，如下
然後，我們通過瀏覽器的控制檯模擬離線狀態
然後，我們點選按鈕檢視效果
莫得問題！
程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<titile>超時與網路異常處理</titile>
<style>
#content {
width: 400px;
height: 200px;
border: 1px solid rgb(4,247,25);
border-width: 3px;
margin: XEogwb
const express = require("express");
const app = express();
// 模擬請求超時
app.all("/delay",3000);
})
app.listen(8080,() => {
console.log('正在監聽8080埠');
});
總結
到此這篇關於Ajax請求超時與網路異常處理的文章就介紹到這了,更多相關Ajax請求超時內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！