Ajax请求超时与网络异常处理图文详解


Posted in Javascript onMay 23, 2021

别用IE浏览器!!!

问题

当浏览器请求超时或者网络异常的时候,我们程序需要做出什么处理和反应呢?

ps:代码我会在后面贴出来,思路最重要

# 请求超时 首先在==express==逻辑上是这样子写的

// 模拟请求超时
app.all("/delay", (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');

    setTimeout(() => {
        response.send('接收成功:模拟请求超时');
    }, 3000);
})

前端的请求

Ajax请求超时与网络异常处理图文详解

一开始没有加请求时间的设置,是可以输出结果的

Ajax请求超时与网络异常处理图文详解

那么现在呢,我们需要为请求加上一个限制时间,超过这个限制时间,浏览器就会认为此时请求超时了。如下加上

Ajax请求超时与网络异常处理图文详解

保存代码,然后到浏览器刷新,打开控制台

Ajax请求超时与网络异常处理图文详解

选择network,然后点击按钮,观察network的请求状态

首先一开始是pending状态(请求中)

Ajax请求超时与网络异常处理图文详解

超过了请求的阈值(2s),此时显示请求被取消了,显示cancel状态,而不是finish

Ajax请求超时与网络异常处理图文详解

但是在实际业务中,你不可能让每个用户打开控制台看请求有没有超时吧,所以我们可以加一个请求超时回调来完成信息弹窗提醒

Ajax请求超时与网络异常处理图文详解

我们刷新运行,发现此时就有一个弹窗提示了

Ajax请求超时与网络异常处理图文详解

那么,请求超时就演示到这来

网络异常

现在来看看网络异常我们需要怎么处理,那么网络异常在前端js里面也是有回调函数的,如下

Ajax请求超时与网络异常处理图文详解

然后,我们通过浏览器的控制台模拟离线状态

Ajax请求超时与网络异常处理图文详解

然后,我们点击按钮查看效果

Ajax请求超时与网络异常处理图文详解

莫得问题!

代码

<!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: 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('请求超时,请检查网络是否可用!');
            }

            xhr.onerror = function() {
                alert('你的网络开小差了,请重新连接网络试试');
            }

            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();

// 模拟请求超时
app.all("/delay", (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');

    setTimeout(() => {
        response.send('接收成功:模拟请求超时');
    }, 3000);
})

app.listen(8080, () => {
    console.log('正在监听8080端口');
});

总结

到此这篇关于Ajax请求超时与网络异常处理的文章就介绍到这了,更多相关Ajax请求超时内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
写js时遇到的一些小问题
Dec 06 Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
在Ubuntu上安装最新版本的Node.js
Jul 14 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
electron中使用bootstrap的示例代码
Nov 06 Javascript
微信小程序-可移动菜单的实现过程详解
Jun 24 Javascript
JavaScript canvas基于数组生成柱状图代码实例
Mar 06 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 Javascript
jQuery实现简单轮播图效果
Dec 27 jQuery
vue-element-admin项目导入和导出的实现
May 21 #Vue.js
vue2实现provide inject传递响应式
May 21 #Vue.js
JS + HTML 罗盘式时钟的实现
JavaScript canvas实现流星特效
May 20 #Javascript
vue使用节流函数的踩坑实例指南
vue实现同时设置多个倒计时
May 20 #Vue.js
Vue和Flask通信的实现
You might like
PHP新手上路(九)
2006/10/09 PHP
php中simplexml_load_file函数用法实例
2014/11/12 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
28个JS验证函数收集
2010/03/02 Javascript
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
js 3秒后跳转页面的实现代码
2014/03/10 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
2016/07/14 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
javascript实现滑动解锁功能
2017/03/22 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
Python使用Scrapy爬取妹子图
2015/05/28 Python
Python文件读取的3种方法及路径转义
2015/06/21 Python
Python实现命令行通讯录实例教程
2016/08/18 Python
python2.7 json 转换日期的处理的示例
2018/03/07 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
英国定做窗帘和纺织品面料一站式商店:Dekoria
2018/08/29 全球购物
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
一道SQL存储过程面试题
2016/10/07 面试题
工作会议方案
2014/05/21 职场文书
违反交通法规检讨书
2014/09/10 职场文书
个人向公司借款协议书
2014/10/09 职场文书
婚前协议书标准版
2014/10/19 职场文书
死亡赔偿协议书
2015/01/28 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python
Python数据分析之pandas读取数据
2021/06/02 Python