学习AJAX必知必会（3）~自动重启工具nodemon、缓存问题、请求超时和网络异常、取消重复请求

admin

撰写于 2022年 01月 22 日

1、nodemon 自动重启工具（自动重启基于nodejs开发的服务端应用）

■ nodemon 是一个工具，通过在检测到目录中的文件更改时自动重新启动node应用程序来帮助开发node.js。

//安装nodemon命令（全局安装）：
npm install -g nodemon

2、解决缓存问题：当请求资源不变（地址栏的url），不再发送新的请求

• 解决：通过添加一个随机的请求参数【新请求】---通过时间撮new Date( ).getTime( ) 或者 Data.now( )添加随机数

• 一般不需要咱手动添加，工具都有自动生成一个时间撮

xhr.open('get', 'http://127.0.0.1:8000/server?t=Date.now()');//通过添加一个随机的请求参数【新请求】解决缓存问题

3、Ajax请求超时和网络异常处理

（1）Ajax请求超时：

• 客户端html处理：设置超时时间timeout和超时回调函数ontimeout

  //设置超时为2s
xhr.timeout = 2000;
//超时回调
xhr.ontimeout = function () {
alert('网络异常，请稍后再试!')
}

• 服务端进行延时提醒：

app.get('/server', (request, response) => {
//设置响应头(允许跨域)
response.setHeader('Access-Control-Allow-Origin', '*');
//设置响应头（允许自定义请求头）
response.setHeader('Access-Control-Allow-Headers', '*');
//设置响应体
setTimeout(() => {
response.send('服务端延时响应');
}, 3000)
});

（2）网络异常：

• 客户端html处理：设置网络异常回调函数onerror

  xhr.onerror = function () {
alert('你的网络似乎除了问题!');
}

4、Ajax取消请求

■ 通过abort方法

 xhr.abort();

■ 取消重复请求（通过一个布尔的标识变量）

• isSending初始值为false, send方法执行之后，isSending值为true，获取响应数据，判断状态值为4时，当前请求完成，isSending为false
• 通过判断isSending 是否为true，为true 执行 abort方法

  //是否正在发送ajax请求
let isSending = false;

  if(isSending) {
//console.log('正在请求')
xhr.abort();
}

  isSending = true;
//3、发送Ajax请求
xhr.send();

 //4、事件绑定，处理服务端返回结果
xhr.onreadystatechange = function () {
//处理前判断服务端是否返回所有结果和服务端的状态码是2**
if (xhr.readyState === 4) {
isSending = false;
}
}

学习AJAX必知必会（3）~自动重启工具nodemon、缓存问题、请求超时和网络异常、取消重复请求的