Ajax的应用③(nodemon、请求超时与网络异常、取消请求、重复请求)
nodemon工具的应用
前面我们已经发现每次在对服务器端的代码进行了修改之后，都要重启一遍服务才能生效。这样会非常的麻烦。而借助nodemon工具可以帮我们解决这一个问题。当我们修改了服务器端的代码之后，nodemon会自动帮我们重启服务端。
下载：在nodejs的环境下，在命令行使用
npm install -g nodemon
- 1
在下载完这个工具之后，想要使用使用它，只需把以前的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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
请求超时：
我们可以通过超时设置去界定多长时间算超时：
//超时设置 2s 设置
xhr.timeout = 2000;
- 1
- 2
一旦满足了这个超时设置，那么这个请求就会被自动取消！
同时在超时之后，通过超时回调函数进行处理：
//超时回调
xhr.ontimeout = function(){
alert("网络异常, 请稍后重试!!");
}
- 1
- 2
- 3
- 4
如果想要模拟超时的情况，可以在服务器端添加定时器函数
网络异常：
在网络异常的时候，我们同样也可以通过回调函数去处理：
//网络异常回调
xhr.onerror = function(){
alert("你的网络似乎出了一些问题!");
}
- 1
- 2
- 3
- 4
如果想要模拟网络异常的情况，可以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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
取消请求 使用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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
文章来源: blog.csdn.net，作者：十八岁讨厌编程，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/zyb18507175502/article/details/123966184
- 点赞
- 收藏
- 关注作者
评论（0）