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

别用IE浏览器！！！

问题

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

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

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

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

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

前端的请求

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

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

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

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

首先一开始是pending状态（请求中）

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

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

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

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

网络异常

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

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

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

莫得问题！

代码

<!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请求超时内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Ajax请求在数据量大的时候出现超时的解决方法

    Ajax请求在数据量大的时候出现超时的解决方法

     最近在用EXtjs做项目,在加载数据量特别大的时候会出现加载超时现象,在FB下查看,原来是ext默认ajax请求30秒. 在网上搜到下面的解决方法,以备参考和其他人参考. ExtJS做Ajax请求的时候,默认的相应时间是30秒,如果后来数据查询时间超过30秒,ExtJS就会报错. 这就需要修改ExtJS的超时时间: 2种方法: 1:在Ajax请求的时候加:(timeout: 100000000)属性 复制代码 代码如下: Ext.Ajax.request({ url: 'foo.php', s

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

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

    别用IE浏览器!!! 问题 当浏览器请求超时或者网络异常的时候,我们程序需要做出什么处理和反应呢? ps:代码我会在后面贴出来,思路最重要 # 请求超时 首先在==express==逻辑上是这样子写的 // 模拟请求超时 app.all("/delay", (request, response) => { response.setHeader('Access-Control-Allow-Origin', '*'); response.setHeader('Access-Contr

  • AJAX请求以及解决跨域问题详解

    目录 AJAX 介绍 一.原生AJAX请求(GET) 二.jQuery AJAX请求(GET 和POST) 三.跨域问题的解决 四.其他解决跨域问题方法 总结 AJAX 介绍 AJAX其实就是异步的js和xml 通过ajax可以在浏览器中发送异步请求. 最大优势:无刷新获取数据 优点: 1.可以无需刷新页面与服务器进行通信 2.允许根据用户事件更新部分页面内容 当然也存在其缺点问题:比如跨域问题等! 一.原生AJAX请求(GET) 由于get和post请求类似,原生代码相比jQuery复杂一些:

  • 虚拟机VirtualBox中centos6.5网络设置图文详解

    虚拟机VirtualBox中centos6.5网络设置图文详解

    最近一些日子在学习有关于虚拟机VirtualBox,现在分享给大家参考一下. 一.虚拟机网络配置 默认只是设置了网卡1:方式NAT(对应ifcfg-eth0) 我们还可以设置网卡2,网卡3.可以在系统安装完成后设置. 网卡2设置回环网卡,实现虚拟机与宿主机组成局域网(对应ifcfg-eth1),这样即使没有路由器也可以组成局域网,可以进行ssh连接. 需要宿主机安装MicrosoftLoopbackAdapter.参加附录. 网卡3设置连接到互联网,并与宿主机组成局域网(对应ifcfg-eth2

  • JavaScript中浅讲ajax图文详解

    JavaScript中浅讲ajax图文详解

    1.ajax入门案例 1.1 搭建Web环境 ajax对于各位来说,应该都不陌生,正因为ajax的产生,导致前台页面和服务器之间的数据传输变得非常容易,同时还可以实现页面的局部刷新.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 对于JavaWeb项目而言,ajax主要用于浏览器和服务器之间数据的传输. 如果是单单地堆砌知识点,会显得比较无聊,那么根据惯例,我先不继续介绍ajax,而是来写一个案例吧. 打开

  • python编程之requests在网络请求中添加cookies参数方法详解

    哎,好久没有学习爬虫了,现在想要重新拾起来.发现之前学习爬虫有些粗糙,竟然连requests中添加cookies都没有掌握,惭愧.废话不宜多,直接上内容. 我们平时使用requests获取网络内容很简单,几行代码搞定了,例如: import requests res=requests.get("https://cloud.flyme.cn/browser/index.jsp") print res.content 你没有看错,真的只有三行代码.但是简单归简单,问题还是不少的. 首先,这

  • 通达OA 使用Ajax和工作流插件实现根据人力资源系统数据增加OA账号(图文详解)

    通达OA 使用Ajax和工作流插件实现根据人力资源系统数据增加OA账号(图文详解)

    本次小飞鱼开发的程序主要解决某下属公司在人力系统中增加账号不能马上审批完毕的问题,可以通过这个流程审批后由插件在后台判断自动增加OA账号,增加机制与hr与OA系统同步相同. 只进行增加操作,没有修改.删除的操作.原有已经进行了两个系统的数据自动同步开发,因此这次的开发属于一个补充的内容,仅在此提供一个应用的思路和开发过程的探讨. 前端发起人申请时填写hr系统中已经分配的工号,即可对应查询出其他相关数据.为了避免查出数据后对工号修改,增加一个确认工号输入框.其他信息由Ajax自动获取为只读形式.这

  • Spring Cloud Hystrix异常处理方法详解

    这篇文章主要介绍了Spring Cloud Hystrix异常处理方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在调用服务执行HsytrixCommand实现的run()方法抛出异常时,除HystrixBadRequestException之外,其他异常都会认为是Hystrix命令执行失败并触发服务降级处理逻辑. 异常处理 当Hystrix命令因为异常(除了HystrixBadRequestException异常)进入服务降级逻辑之后

  • Windows系统中搭建Go语言开发环境图文详解

    Windows系统中搭建Go语言开发环境图文详解

    目录 1.Go语言简介 2.安装Git 3.Go 工具链(编译器)安装 3.1.环境变量GOROOT 3.2.环境变量GOPATH 3.3.Go常用命令 4.包管理 4.1.go module 4.2.gopm 5.编写Go语言代码的IDE或编辑工具 5.1.基于VSCode的Go开发环境 5.1.1.安装VSCode 5.1.2.安装插件 5.1.3.常用配置 5.2.GoLand 5.3.Vim 5.4.其他Go代码编写工具 6.Go语言学习资料分享 本文详细讲述如何在 Windows 系统

  • vmware 实现linux目录映射window本地目录图文详解

    vmware 实现linux目录映射window本地目录图文详解

    ---恢复内容开始--- 背景: 1,使用lnmp环境 2,代码可以在windows上面写,直接映射到linux的lnmp环境下面 第一步: vmware 新建一个linux虚拟机 一路下一步到完成 第二步: 安装镜像(自己去下载一个linux的镜像) 然后确认 ,然后重新客户机 然后一路next(语言可以选中文) 直到这一步 给linux设置密码 然后一路next,确认所有修改 第三步: 进入linux系统配置网络 修改下图路径中的文档(onboot改成yes) 修改完保存 重启网络 第四步:

  • Android 监听网络状态方法详解

    Android 监听网络状态方法详解 一.加入网络权限 获取网络信息需要在AndroidManifest.xml文件中加入相应的权限. <uses-permission Android:name="android.permission.ACCESS_NETWORK_STATE" /> 二.判断手机网络的几个方案 1)判断是否有网络连接 public boolean isMobileConnected(Context context) { if (context != nul

随机推荐