AJAX--请求超时与网络异常

最新推荐文章于 2022-04-01 21:13:21 发布
最新推荐文章于 2022-04-01 21:13:21 发布
阅读量172 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45728623/article/details/119737488
版权

XMLHttpRequest 超时 网络异常 JavaScript 前端开发
关键词由CSDN通过智能技术生成 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>请求超时与网络异常</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const result = document.getElementById('result');
        const btn = document.getElementsByTagName('button')[0];

        btn.addEventListener('click', function (){
            const xhr = new XMLHttpRequest();

            // 超时设置 2s
            xhr.timeout = 2000;
            // 超时回调
            xhr.ontimeout = function (){
                alert('请求超时！！！');
            }
            // 网络异常回调
            xhr.onerror = function (){
                alert('你的网络似乎出了一点问题');
            }

            xhr.open('GET', 'http://127.0.0.1:8000/delay');
            xhr.send();
            xhr.onreadystatechange = function (){
                if(xhr.readyState === 4){
                    if(xhr.status >=200 && xhr.status <300){
                        result.innerHTML = xhr.response;
                        console.log(xhr.response);
                    }
                }
            }
        })

    </script>

</body>
</html>
// 延时响应
app.all('/delay', (express, response)=>{
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    setTimeout(() =>{
        // 设置响应体
        response.send('延时响应！！！');
    }, 1000)
});

 当把时间设置为3000ms时候

setTimeout(() =>{
        // 设置响应体
        response.send('延时响应！！！');
    }, 3000)

 恢复时间设置 还是1000ms

页面设置为offline（断网情况）

 

 

般若-
关注
ajax（6）——模拟网络连接超时和网络异常请求，ontimeout，onerror,
木子 旭的博客
02-28 894
1.代码 1.1服务代码 const express = require("express"); const app = express(); app.get("/server", (request, response) => { response.setHeader("Access-Control-Allow-Origin", "*"); const data = { name: "lixv000", }; let str = JSON.stringify(data);
【ajax】7.请求：请求超时与网络异常处理+取消请求+请求重复发送问题
weixin_43210113的博客
12-07 789
〇、前情提要 在看b站视频 - 尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版），中插了这个知识记录一下。 参考： 我的笔记： 【javaweb】b站-尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版） 笔记 https://blog.csdn.net/weixin_43210113/article/details/110628389 b站视频 - 尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020
Ajax 请求超时和网络异常
weixin_50736511的博客
10-28 746
上代码 html部分 node.js 部分 再node.js部分设置一个定时器模拟网络延迟 setTimeout(()=>{ response.send(‘延迟响应’); },3000)； （在定时器里面设置响应内容） 回到html 设置超时为 2s如果请求超过两秒就取消请求 xhr.timeout = 2000; 超时回调 xhr.ontimeout = function(){ alert(“哎呦，你要的网页迷路啦！”) } 网络异常回调 *xhr.onerror = functi
fetch使用的常见问题及解决办法
weixin_30408165的博客
02-24 797
首先声明一下，本文不是要讲解fetch的具体用法，不清楚的可以参考MDN fetch教程。 引言 说道fetch就不得不提XMLHttpRequest了，XHR在发送web请求时需要开发者配置相关请求信息和成功后的回调，尽管开发者只关心请求成功后的业务处理，但是也要配置其他繁琐内容，导致配置和调用比较混乱，也不符合关注分离的原则；fetch的出现正是为了解决XHR存在的这些问题。例如下面代码： f...
IE缓存问题
qq_39368007的博客
11-25 149
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>IE缓存问题</title> <style> #result{ ...
Ajax 请求超时与网络异常
qq_39368007的博客
11-25 352
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>请求超时与网络异常</title> <style> #result{ ...
ajax-data-model:ajax 通用数据请求处理模型。提供 ajax 请求、数据缓存、通用性接口约定处理等能力
05-28
接口超时、接口错误、接口异常、数据埋点等>...) 快速开始 1. 下载安装 手动下载：到代码仓库下载 的 zip 包，取得 dist 目录内文件即可。 npm 方式： npm i --save ajax-data-model 2. 使用 2.1 浏览器中直接引用...
Ajax请求超时与异常处理
x1037490413的博客
07-02 1120
超时设置，当服务器响应超时时，请求就取消 timeout属性等于一个整数，用来设置当请求发出后等待接受响应的时间。ontimeout()方法则是当等待超时后，自动执行的回调方法。 异常处理，谷歌控制台在Online设置Offline断网 server.js /* * @Description: * @Version: 2.0 * @Autor: Seven * @Date: 2021-06-09 15:59:55 * @LastEditors: Seven * @LastEditTime: 2
AJAX (4) — AJAX请求超时与缓存问题 、取消请求、请求重复发送问题
m0_59897687的博客
12-26 1175
目录 一、AJAX请求超时与缓存问题 1.server.js文件 2.html文件 二、AJAX取消请求 三、AJAX请求重复发送问题 nodemon自动重启工具 nodemon是一种工具，可以自动检测到目录中的文件更改时通过重新启动应用程序来调试基于node.js的应用程序。 安装命令：npm install -g nodemon 一、AJAX请求超时与缓存问题 先设计出一个需求： 点击按钮，向服务端发送请求，服务端返回结果，...
springboot配置ajax请求超时,使用Ajax请求SpringBoot接口引发的跨域惨案
weixin_26782929的博客
08-05 481
最近项目中引入了SpringBoot，目的是做到前后端分离开发。但实际过程中出现了很多问题，其中比较令人头疼的就是跨域问题。场景再现创建SpringBoot项目，引入Web、JPA和MySQL后台接口代码如下：@RequestMapping(value = "/l", method = RequestMethod.POST)@ResponseBodypublic List add(List lis...
AJAX：请求超时与网络异常处理
Continue的博客
04-16 1018
1. 概述 有时候我们会因为网络问题导致ajax发送请求延时，这时候为了更好的用户体验，我们可以设置请求超时与网络异常的提示。 2. 实现 XMLHttpRequest对象中含有许多属性 设置超时时间：timeout 超时：ontimeout 如果超过这个时间，则调用方法 网络错误：onerror 如果网络错误，则调用这个方法 3. 案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8
本地html画面ajax请求url 报跨域错误
emmmmmm的博客
04-13 3757
1.报错原因（本地文件跨域访问问题https://blog.csdn.net/sjohnny/article/details/70256172）方案一：src/main/java/com.project.xxx/configCorsConfig.javapackage com.project.xxx.config;import org.springframework.context.annotat...
ajax 网络连接失败,ajax网络请求失败处理
weixin_36057482的博客
08-06 992
ajax网络请求失败处理 内容精选换一换当您调用API时，如果遇到“APIGW”开头的错误码，请参见API网关错误码进行处理。请检查应用服务器的网络连接情况，确保应用服务器网络正常。检查请求中物联网平台的应用接入地址和端口是否正确。使用“ping {物联网平台应用接入地址}”命令，查看应用服务器是否可以正常访问物联网平台的应用接入地址。使用“telnet {物联网平台应用接入地址} {端口}”命令...
js请求ajax处理断网情况,JS Ajax请求会话过期处理问题解决方法分析
weixin_29266007的博客
08-05 605
本文实例讲述了JS Ajax请求会话过期处理问题解决方法。分享给大家供大家参考，具体如下：对于页面来说，处理session过期比较简单，一般只需在过滤器里面判断session用户是否存在，不存在则@R_420_404@面到登陆页即可。对于Ajax请求来说，这个办法则无效，只能获取到登录页的HTML代码。原因在于Ajax请求是XMLHTTPRequest对象发起的而不是浏览器，而服务器返回的信息接收...
html ajax访问不了,jquery 请求ajax失败或者不执行的原因是什么？
weixin_33574009的博客
06-10 1633
开发中会经常用到Jquery中的ajax，配合Ashx处理程序，实现一些无刷新操作，有时候会出现一些问题，现在总结一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。jquery 请求ajax失败或者不执行的原因1、URL地址错误2、dataType定义类型和返回类型是否一致比如json格式数据。例如：{success:true,id:1} 这种不规则的字符串，不是严格的json...
xhr ajax超时时间,【ajax请求网关超时 】 | IT修真院·坑乎
weixin_34933151的博客
08-05 240
function login() {var name = document.getElementById('name');var password = document.getElementById('password');var none = document.getElementById('hint');console.log(name.value);console.log(password....
请求超时与网络异常处理
tgyzjy的博客
04-01 502
Web页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>请求超
终止Ajax请求：JS与jQuery的实用技巧
然而，在某些情况下，可能需要中断或取消已经发送的Ajax请求，例如用户交互改变、网络异常或超时。本文将详细介绍如何在JavaScript和jQuery中有效地终止这些请求。 首先，了解如何在原生JavaScript中终止Ajax请求。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值