11.请求超时与网络异常处理

最新推荐文章于 2024-12-12 11:37:45 发布

月亮慢慢圆o

最新推荐文章于 2024-12-12 11:37:45 发布

阅读量1.1k

点赞数 5

分类专栏： Ajax 文章标签：前端 github javascript

本文链接：https://blog.csdn.net/yujiabao702/article/details/137657738

版权

Ajax 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何在前端使用JavaScript的XMLHttpRequest对象来处理HTTP请求的超时问题，以及设置网络异常和请求超时的回调函数，以提升用户体验并确保正确响应网络状况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.请求超时

请求时间过长的时候需要进行处理

为了呈现请求超时的效果，我们在路由规则里设置 3s 以后服务器才返回结果

  app.get("/delay", (request, response) => {
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Headers", "*");
    setTimeout(() => {
      response.send("HELLO IE");
    }, 3000);
  });

设置请求超时就取消请求，在发送 Ajax 请求的步骤里设置，通过 xhr 对象的 timeout 属性

  xhr.timeout = 2000;

还可以设置请求超时的回调，通过 xhr 对象的 ontimeout 属性设置

  xhr.ontimeout = function() {
    alert('请求超时...已取消请求')
  };

整理如下

    const result = document.querySelector("#result");
    result.addEventListener("mouseover", () => {
      const xhr = new XMLHttpRequest();
      // 设置等待时间
      xhr.timeout = 2000;
      // 设置超时以后的回调函数
      xhr.ontimeout = function () {
        alert("请求超时...已取消请求");
      };
      xhr.open("GET", "http://127.0.0.1:8000/delay");
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhr.send();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            result.innerHTML = xhr.response;
          }
        }
      };
    });

2.网络异常

为了实现网络异常效果，通过后台控制器去设置

可以通过 xhr 对象的 onerror 属性去设置网络异常的回调函数

  xhr.onerror = function () {
    alert("你的网络有些异常");
  };

整理如下

    const result = document.querySelector("#result");
    result.addEventListener("mouseover", () => {
      const xhr = new XMLHttpRequest();
      // 设置请求等待时间
      xhr.timeout = 2000;
      // 设置请求超时后的回调
      xhr.ontimeout = function () {
        alert("请求超时...已取消请求");
      };
      // 设置网络异常的回调
      xhr.onerror = function () {
        alert("你的网络有些异常");
      };
      xhr.open("GET", "http://127.0.0.1:8000/delay");
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhr.send();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            result.innerHTML = xhr.response;
          }
        }
      };
    });