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 相关文章推荐
Javascript 调试利器 Firebug使用详解六
Jul 05 Javascript
DOM 脚本编程中的兄弟节点
Oct 31 Javascript
JavaScript中获取元素索引的函数
Sep 10 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 25 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
NO3第三帝国留言簿制作过程
2006/10/09 PHP
PHP 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
vue中echarts3.0自适应的方法
2018/02/26 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
详解Python用户登录接口的方法
2019/04/17 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
安全生产专项整治方案
2014/05/06 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
红色经典观后感
2015/06/18 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书
青年志愿者活动感想
2015/08/07 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
jquery插件实现代码雨特效
2021/04/24 jQuery
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL
详解Vue slot插槽
2021/11/20 Vue.js