ajax 重复请求、请求超时与网络异常的处理

重复请求的处理

发起一个新的请求之前先判断当前是否有相同的请求正在发送，如果有就取消掉。类似于防抖

//标识变量
let isSending = false; //是否正在发送AJAX请求
btns[e].onclick = function () {
  //判断标识变量
  if (isSending) x.abort(); // 如果正在发送，则取消该请求，创建一个新的请求
  x = new XMLHttpRequest();
  //修改标识变量的值
  issending = true;
  x.open("GET", "http://127.8.0.1:8000/delay");
  x.send();
  x.onreadystatechange = function () {
    if (x.readyState === 4) {
      //请求完成修改标识变量为false
      isSending = false;
    }
  };
};

请求超时与网络异常的处理

超时设置

XMLHttpRequest.timeout 是一个无符号长整型数，代表着一个请求在被自动终止前所消耗的毫秒数。默认值为 0，意味着没有超时。

timeout 事件

当进度由于预定时间到期而终止时，会触发timeout 事件。

error事件

当发生网络错误时，会触发 error 事件。

案例（写于 xhr 对象创建之后）：

//超时时间设置 2s还未得到响应结果就取消请求
xhr.timeout = 2000;
//超时处理
xhr.ontimeout = function () {
  //一般是设置一个提示效果，如旋转的小圆圈
  alert("加载中!");
};
//网络异常处理
xhr.onerror = function () {
  alert("你的网络似乎出了一些问题!");
};