Ajax的应用③(nodemon、请求超时与网络异常、取消请求、重复请求)
nodemon工具的应用
前面我们已经发现每次在对服务器端的代码进行了修改之后,都要重启一遍服务才能生效。这样会非常的麻烦。而借助nodemon工具可以帮我们解决这一个问题。当我们修改了服务器端的代码之后,nodemon会自动帮我们重启服务端。
下载:在nodejs的环境下,在命令行使用
npm install -g nodemon
在下载完这个工具之后,想要使用使用它,只需把以前的node + 空格 + 文件名 改为 nodemon + 空格 + 文件名 即可。
再修改完服务端的代码之后,按下Ctrl+s在保存的同时,即可自动重启。
如果提示在此系统上无法运行脚本,解决办法:
电脑设置–>更新与安全–>开发人员选项–>找到PowerShell–>点击应用即可
IE缓存问题
问题:在一些浏览器中(IE),由于缓存机制的存在,ajax 只会发送的第一次请求,剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
解决方式:浏览器的缓存是根据 url 地址来记录的,所以我们只需要修改 url 地址即可避免缓存问题
xhr.open(“get”,“/testAJAX?t=”+Date.now());
请求超时与网络异常处理
你的服务端在运作的时候不可能永远又快又准的对所有请求进行处理,请求超时与网络异常是服务端中经常出现的两个问题。因此我们可以用Ajax在请求超时与网络异常的情况之中对用户进行友好地提醒,是产品的体验更好。
以下面的代码为例:
<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>
请求超时:
我们可以通过超时设置去界定多长时间算超时:
//超时设置 2s 设置
xhr.timeout = 2000;
一旦满足了这个超时设置,那么这个请求就会被自动取消!
同时在超时之后,通过超时回调函数进行处理:
//超时回调
xhr.ontimeout = function(){
alert("网络异常, 请稍后重试!!");
}
如果想要模拟超时的情况,可以在服务器端添加定时器函数
网络异常:
在网络异常的时候,我们同样也可以通过回调函数去处理:
//网络异常回调
xhr.onerror = function(){
alert("你的网络似乎出了一些问题!");
}
如果想要模拟网络异常的情况,可以F12在NetWork中进行网速的延迟或者直接脱机断网。
取消请求
前面我们涉及到了超时取消请求的方法,而这里是关于手动取消请求的方法。
例如:我们可以模拟一个场景,点击按钮发送请求,点击另外一个按钮取消请求。
<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:3000/delay');
x.send();
}
// abort
btns[1].onclick = function(){
x.abort();
}
</script>
</body>
取消请求 使用XMLHttpRequest对象的内置abort()方法。
因为这里的请求可以发送多个,每个都是不一样的对象,故这里的XMLHttpRequest对象没有用const去声明,同时把它拿到外面来声明,是为了防止取消请求事件中的作用域访问不到。
对重复请求的处理
为了缓解服务器端的压力,我们对于一些多次的重复请求会做出相应的处理。处理原则:永远只发出最新的一次请求。
那么我们如何来实现这一功能呢?
步骤:
①对请求状态进行标识
②每次发送请求前查看上一次请求的状态
③如果上一次请求没有送达,则取消上一次的请求。
代码实现:
<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;
}
}
}
</script>
</body>
相关文章
- 网络编程 -- RPC实现原理 -- Netty -- 迭代版本V1 -- 入门应用
- 网络流量画像(IP,主机维度)业界应用调研——time、port、size、rate、网络访问关系、IP归属、是否代理+历史异常情况(ddos常用)
- axios网络交互应用-Vue
- Windows设置防火墙允许指定应用正常使用网络
- 【快应用】车机快应用如何监听网络变化?
- 消灭卡顿应用!华为HMS Core网络加速套件——hQUIC Kit闪耀登场!
- 《循序渐进Linux(第2版) 基础知识 服务器搭建 系统管理 性能调优 虚拟化与集群应用》——2.2 Linux的几种安装方式
- dubbo应用架构演进路线图
- android 调用微信QQ的其他应用打开列表中添加自己的应用,并且获取uri
- 2022年移动应用程序开发的最佳后端框架
- 《黑客大曝光:移动应用安全揭秘及防护措施》一第2章 移动网络
- java并发编程中Future、CompleteFuture、ForkJoin的应用
- Jira5.0.2与Crowd2.4.2应用集成
- tomcat添加context方式部署web应用
- MaxCompute在网络舆情监控系统中的应用
- Android学习路径(22)应用Fragment建立动态UI——构建一个灵活UI
- 关系网络在信贷领域的应用(转)
- 全球信息数据量陡增 大数据应用前景广阔
- 应用SAP PI实现SAP BW数据仓库对于第三方系统数据完美集成以及DELTA加载的分析