编程语言
首页 > 编程语言> > 学习AJAX必知必会(3)~自动重启工具nodemon、缓存问题、请求超时和网络异常、取消重复请求

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

作者:互联网


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

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

//安装nodemon命令(全局安装):
npm install -g nodemon

2、解决缓存问题:当请求资源不变(地址栏的url),不再发送新的请求

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

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

(1)Ajax请求超时:

  //设置超时为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)网络异常:

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

4、Ajax取消请求

■ 通过abort方法
 xhr.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;
    }
 }

标签:请求,isSending,必知,nodemon,xhr,超时,服务端
来源: https://www.cnblogs.com/shan333/p/15832555.html