【ajax】7.请求：请求超时与网络异常处理+取消请求+请求重复发送问题
〇、前情提要
在看b站视频 - 尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版），中插了这个知识记录一下。
参考：
我的笔记：
【javaweb】b站-尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版） 笔记
https://blog.csdn.net/weixin_43210113/article/details/110628389b站视频 - 尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版）
https://www.bilibili.com/video/BV1WC4y1b78y?p=2笔记视频链接
链接：https://pan.baidu.com/s/1Wnwb42-AaqAlg6cQ0PRHwg
提取码：3waj
————————————————————————————我的笔记：
【ajax】2.NodeJS的安装与介绍+express框架介绍与基本使用
https://blog.csdn.net/weixin_43210113/article/details/110636188我的笔记：
【ajax】3.GET：AJAX案例准备+AJAX请求的基本操作+AJAX设置请求参数
https://blog.csdn.net/weixin_43210113/article/details/110656792我的笔记：
【ajax】4.POST：AJAX发送POST请求+POST设置请求体
https://blog.csdn.net/weixin_43210113/article/details/110664818我的笔记：
【ajax】5.JSON：服务端响应JSON数据+nodemon自动重启工具安装+Missing write access to /usr/local/lib/node_modules解决方法
https://blog.csdn.net/weixin_43210113/article/details/110792442我的笔记：
【ajax】6.IE缓存问题解决
https://blog.csdn.net/weixin_43210113/article/details/110798325
一、请求超时与网络异常处理
如没有安装过NodeJS和expressjs请看↓
我的笔记：
【ajax】NodeJS的安装与介绍+express框架介绍与基本使用
https://blog.csdn.net/weixin_43210113/article/details/110636188
如没有安装过nodemon请看
我的笔记：
【ajax】5.JSON：服务端响应JSON数据+nodemon自动重启工具安装+Missing write access to /usr/local/lib/node_modules解决方法
https://blog.csdn.net/weixin_43210113/article/details/110792442
5-超时与网络异常.html
<!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{width:200px;height:100px;border:solid 1px #90b;}</style>
</head>
<body><button>点击发送请求</button><div id="result"></div><script>const btn = document.getElementsByTagName('button')[0];const result = document.querySelector('#result');btn.addEventListener('click', function(){const xhr = new XMLHttpRequest();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;}}}})</script>
</body>
</html>
server.js
//1. 引入express
const express = require('express');//2. 创建应用对象
const app = express();//3. 创建路由规则
//延时响应
app.all('/delay', (request, response) => {//设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');response.setHeader('Access-Control-Allow-Headers', '*');// 设置延时器setTimeout(() => {//设置响应体response.send('延时响应');}, 3000)
});//4. 监听端口启动服务
app.listen(8000, () => {console.log("服务已经启动, 8000 端口监听中....");
});
此时延时响应延迟3s后显示
当增加超时设置，加一个两秒的限制
//超时设置 2s 设置
xhr.timeout = 2000;
此时在第二秒时，会自动取消，状态变为canceled
增加超时回调ontimeout
//超时回调
xhr.ontimeout = function(){alert("网络异常, 请稍后重试!!");
}
增加网络异常回调onerror
//网络异常回调
xhr.onerror = function(){alert("你的网络似乎出了一些问题!");
}
模拟时找到online，切换为offline
5-超时与网络异常.html
<!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{width:200px;height:100px;border:solid 1px #90b;}</style>
</head>
<body><button>点击发送请求</button><div id="result"></div><script>const btn = document.getElementsByTagName('button')[0];const result = document.querySelector('#result');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;}}}})</script>
</body>
</html>
二、取消请求
6-取消请求.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>取消请求</title>
</head>
<body><button>点击发送</button><button>点击取消</button><script>//获取元素对象const btns = document.querySelectorAll('button');let x = null;btns[0].onclick = function(){x = new XMLHttpRequest();x.open("GET",'http://127.0.0.1:8000/delay');x.send();}// abortbtns[1].onclick = function(){x.abort();}</script>
</body>
</html>
abort()为XMLHttpRequest对象自带函数，可以取消请求。
server.js
//1. 引入express
const express = require('express');//2. 创建应用对象
const app = express();//3. 创建路由规则
//延时响应
app.all('/delay', (request, response) => {//设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');response.setHeader('Access-Control-Allow-Headers', '*');// 设置延时器setTimeout(() => {//设置响应体response.send('延时响应');}, 3000)
});//4. 监听端口启动服务
app.listen(8000, () => {console.log("服务已经启动, 8000 端口监听中....");
});
测试
按下点击发送三秒内点点击取消，则被取消。
三、请求重复发送问题
问题描述
用户重复按下，但请求未完成时，给服务器很大压力。看waterfall部分。
需求：
重复点击时，取消重复的那个。
7-重复请求问题.html
增加一个变量isSending判断
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>重复请求问题</title>
</head>
<body><button>点击发送</button><script>//获取元素对象const btns = document.querySelectorAll('button');let x = null;//标识变量let isSending = false; // 是否正在发送AJAX请求btns[0].onclick = function(){//判断标识变量if(isSending) x.abort();// 如果正在发送, 则取消该请求, 创建一个新的请求x = new XMLHttpRequest();//修改 标识变量的值isSending = true;x.open("GET",'http://127.0.0.1:8000/delay');x.send();x.onreadystatechange = function(){if(x.readyState === 4){//修改标识变量isSending = false;}}}// abortbtns[1].onclick = function(){x.abort();}</script>
</body>
</html>
server.js
//1. 引入express
const express = require('express');//2. 创建应用对象
const app = express();//3. 创建路由规则
//延时响应
app.all('/delay', (request, response) => {//设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');response.setHeader('Access-Control-Allow-Headers', '*');// 设置延时器setTimeout(() => {//设置响应体response.send('延时响应');}, 3000)
});//4. 监听端口启动服务
app.listen(8000, () => {console.log("服务已经启动, 8000 端口监听中....");
});
测试
疯狂点击都会被isSending发现
【ajax】7.请求：请求超时与网络异常处理+取消请求+请求重复发送问题相关推荐
- AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)
根据视频进行整理 [https://www.bilibili.com/video/BV1WC4y1b78y?p=1] 视频资料 百度网盘: 链接:[https://pan.baidu.com/s/1n ...
- 微信公众号平台服务器配置请求url超时,绑定微信公众平台提示请求URL超时怎么办...
绑定微信公众平台提示"请求URL超时"解决办法,这个问题很多朋友遇到过,绑定微信公众平台提示请求URL超时解决办法其实很简单,下面由学习啦小编告诉你! 绑定微信公众平台提示请求UR ...
- 四、ajax请求超时与网络异常处理
- python爬虫避免重复数据_No.2﹣Python﹣scan﹣anti-crawler（随机请求头和IP代理）取消链接和重复数据消除,NO2pythonscrapy,反,爬虫,去...
# -*- coding: utf-8 -*- """ 所有请求头的USER_AGENTS网址 http://www.useragentstring.com/pages/ ...
- Ajax 请求超时与网络异常
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- 连接超时_记一次网络请求连接超时的事故
点击上方蓝色字关注我们~前言 从HTTP请求超时.重试机制.操作系统网络等层面剖析了事故的原因,最终解决业务问题. 这里先抛两个问题: 1)你遭遇过由于网络连接或请求超时造成的生产事故吗? 2)你知道 ...
- 数据分析与爬虫实战视频——学习笔记（一）（python基础、urllib、超时设置、自动模拟HTTP请求、异常处理、浏览器伪装、代理服务器、新闻爬虫、淘宝登陆和图片爬取）
未经允许,请勿转载. 连载未完成状态 网址: [数据挖掘]2019年最新python3 数据分析与爬虫实战_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili https://www.bilibili ...
- ajax async:false不管用_js 网络请求框架 ajax和axios、fetch的区别
互联网行业发展至今出现了很多技术,技术都在与时俱进的更新中,如从前的前端技术栈(html4+js+css+jquery)到现在vue+axios.随着更多优秀的框架出现,让我们从重复的基础代码编写中解 ...
- 设置AFNetworking网络请求的超时时间
设置AFNetworking网络请求的超时时间 也许大家使用的时候已经察觉到,设置AFNetworking的超时时间并不管用,但可以用特殊的方式来处理. 以下是笔者基于AFNetworking2.5. ...
- Ajax请求session超时处理流程（DWZ）
DWZ-Java框架Ajax请求session超时处理思路: 1)SessionValidateFilter统一验证session是否超时 2)SessionValidateFilte ...
最新文章
- 如何在Ruby中写入文件？
- AJAX 跨域请求（转发）
- naarray查询 swift_数据分析库之Numpy
- C#使用ICSharpCode.SharpZipLib压缩后进行web批量下载文件
- spring security 学习三-rememberMe
- CentOS安装和配置FTP
- Java在ACM中的应用
- 4加密问题漏洞修复_Apache Shiro 反序列化漏洞实战
- Spring Boot 中使⽤ Cache 缓存的使⽤
- azure 安全组_具有安全性和设计注意事项的Azure成本跟踪
- jquery城市选择案例
- 华为机试HJ5：进制转换
- DetoursHook
- php smarty 模板注释,smarty中的注释
- java项目：基于springboot高校党建管理系统(springboot+vue+mysql+redis) 1010
- java xheditor_xhEditor与Java结合使用
- 基于Anki+Vocabulary的英语单词记忆法
- Python轻松实现地图可视化(附详细源码)
- 标准差越大越集中_中国大学MOOC: 正态分布的标准差越大，其概率密度曲线越高越集中。...
- 转一次排障经历以供学习