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 相关文章推荐
jquery ajaxSubmit 异步提交的简单实现
Feb 28 Javascript
JS中FRAME的操作问题实例分析
Oct 21 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
vue.js语法及常用指令
Oct 29 Javascript
浅析Vue中method与computed的区别
Mar 06 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
vue实现百度下拉列表交互操作示例
Mar 12 Javascript
Vue实现导航栏点击当前标签变色功能
Aug 19 Javascript
IDEA安装vue插件图文详解
Sep 26 Javascript
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
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
人族 Terran 魔法与科技
2020/03/14 星际争霸
hadoop常见错误以及处理方法详解
2013/06/19 PHP
浅谈PHP变量作用域以及地址引用问题
2013/12/27 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
php数组分页实现方法
2016/04/30 PHP
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
判断数组是否包含某个元素的js函数实现方法
2016/05/19 Javascript
jquery获取所有选中的checkbox实现代码
2016/05/26 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
Python实现直播推流效果
2019/11/26 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
Pycharm无法打开双击没反应的问题及解决方案
2020/08/17 Python
Python偏函数实现原理及应用
2020/11/20 Python
Spy++的使用方法及下载教程
2021/01/29 Python
python解包用法详解
2021/02/17 Python
吉尔德利巧克力公司:Ghirardelli Chocolate Company
2019/03/27 全球购物
财务管理个人自荐书范文
2013/11/24 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
大学生考试作弊被抓检讨书
2014/12/27 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
学习经验交流会策划书
2015/11/02 职场文书