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的时间段实现代码
Aug 02 Javascript
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
Aug 12 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 Javascript
基于jQuery实现表格的排序
Dec 02 Javascript
Angularjs实现分页和分页算法的示例代码
Dec 23 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 Javascript
详解webpack-dev-server的简单使用
Apr 02 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 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
防止本地用户用fsockopen DDOS攻击对策
2011/11/02 PHP
PHP实现的简单日历类
2014/11/29 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
php中各种定义变量的方法小结
2017/10/18 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
使用EXT实现无刷新动态调用股票信息
2008/11/01 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
Bootstrap实现登录校验表单(带验证码)
2016/06/23 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
fullCalendar中文API官方文档
2017/02/07 Javascript
详解用node编写自己的cli工具
2017/05/23 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
tensorflow实现对图片的读取的示例代码
2018/02/12 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
html5画布旋转效果示例
2014/01/27 HTML / CSS
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
送给程序员的20个Java集合面试问题
2014/08/06 面试题
应届生会计电算化求职信
2013/10/03 职场文书
三个儿子教学反思
2014/02/03 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
出国留学自荐信模板
2015/03/06 职场文书
2015年教师节主持词
2015/07/03 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书