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 相关文章推荐
Extjs4 类的定义和扩展实例
Jun 28 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
Aug 29 Javascript
js获取通过ajax返回的map型的JSONArray的方法
Jan 09 Javascript
jQuery中queue()方法用法实例
Dec 29 Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
探寻JavaScript中this指针指向
Apr 23 Javascript
ES6数组的扩展详解
Apr 25 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
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的基本常识小结
2013/07/05 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
浅谈PHP中的
2016/04/23 PHP
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
jQuery给动态添加的元素绑定事件的方法
2015/03/09 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
Vue表单及表单绑定方法
2018/09/04 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
python在命令行下使用google翻译(带语音)
2014/01/16 Python
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
在Python中处理时间之clock()方法的使用
2015/05/22 Python
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
python实现自动网页截图并裁剪图片
2018/07/30 Python
详解Python做一个名片管理系统
2019/03/14 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
python 计算概率密度、累计分布、逆函数的例子
2020/02/25 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
CSS3制作苹果风格键盘特效
2015/02/26 HTML / CSS
聘任书的写作格式及范文
2014/03/29 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
大学生见习总结报告
2015/06/24 职场文书