欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Ajax請(qǐng)求超時(shí)與網(wǎng)絡(luò)異常處理圖文詳解

 更新時(shí)間:2021年05月23日 12:36:41   作者:追逐那顆星  
最近在項(xiàng)目中遇到一個(gè)問題,當(dāng)加載數(shù)據(jù)量特別大的時(shí)候會(huì)出現(xiàn)加載超時(shí)現(xiàn)象,所以這篇文章主要給大家介紹了關(guān)于Ajax請(qǐng)求超時(shí)與網(wǎng)絡(luò)異常處理的相關(guān)資料,需要的朋友可以參考下

別用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)短暫空白的問題(推薦)

    使用加載圖片解決在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-12
  • 也寫一個(gè)Ajax.Request類附代碼

    也寫一個(gè)Ajax.Request類附代碼

    也寫一個(gè)Ajax.Request類附代碼...
    2007-08-08
  • Ajax實(shí)現(xiàn)頁(yè)面無刷新留言效果

    Ajax實(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)求

    這篇文章主要介紹了服務(wù)端配置實(shí)現(xiàn)AJAX跨域請(qǐng)求的相關(guān)資料,需要的朋友可以參考下
    2015-02-02
  • 利用ajax傳遞數(shù)組及后臺(tái)接收的方法詳解

    利用ajax傳遞數(shù)組及后臺(tái)接收的方法詳解

    這篇文章主要給大家介紹了關(guān)于利用ajax傳遞數(shù)組及后臺(tái)接收的相關(guān)資料,文中介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。
    2017-06-06
  • Ajax的使用代碼解析

    Ajax的使用代碼解析

    Ajax被認(rèn)為是(Asynchronous(異步) JavaScript And Xml的縮寫)。現(xiàn)在,允許瀏覽器與服務(wù)器通信而無須刷新當(dāng)前頁(yè)面的技術(shù)都被叫做Ajax
    2016-11-11
  • Ajax遍歷jSon后對(duì)每一條數(shù)據(jù)進(jìn)行相應(yīng)的修改和刪除(代碼分享)

    Ajax遍歷jSon后對(duì)每一條數(shù)據(jù)進(jìn)行相應(yīng)的修改和刪除(代碼分享)

    這篇文章主要介紹了Ajax遍歷jSon后對(duì)每一條數(shù)據(jù)進(jìn)行相應(yīng)的修改和刪除的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2016-11-11
  • ajax請(qǐng)求json數(shù)據(jù)案例詳解

    ajax請(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-09
  • ajax接口文檔url路徑的簡(jiǎn)寫實(shí)例

    ajax接口文檔url路徑的簡(jiǎn)寫實(shí)例

    前端工程師將來打交道最多的是Http API接口,此種接口會(huì)提供一個(gè)URL地址暴露在互聯(lián)網(wǎng)上,可以通過編寫Ajax代碼去與之交互來完成功能,下面這篇文章主要給大家介紹了關(guān)于ajax接口文檔url路徑簡(jiǎn)寫的相關(guān)資料,需要的朋友可以參考下
    2021-10-10
  • react axios 跨域訪問一個(gè)或多個(gè)域名問題

    react axios 跨域訪問一個(gè)或多個(gè)域名問題

    這篇文章主要介紹了react axios 跨域訪問一個(gè)或多個(gè)域名問題,本文通過實(shí)例代碼截圖的形式給大家展示的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-04-04

最新評(píng)論