react.js中的XMLHttpRequest ontimeout问题答案

【问题标题】：XMLHttpRequest ontimeout problem in react.jsreact.js中的XMLHttpRequest ontimeout问题
【发布时间】：2020-01-04 18:45:00
【问题描述】：

在我的 react.js 项目 Profile 类中，我有一个名为 getData 的函数，如下所示：

getData()
{
    console.log("inside get data");
    var request = new XMLHttpRequest();
    request.timeout=1000;
    request.ontimeout=function () {
        console.log("on timeout");
    };
    request.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            console.log(this.responseText);
        }
    };
    request.open('GET', 'http://localhost:8080/user/'.concat(this.state.userID));
    request.send();
}

我也试过这个：

    request.setTimeout(function () {
        console.log("on timeout");
            that.props.history.push("/bad_request/".concat(this.status));

    },1000);

但它给了我错误说TypeError: request.setTimeout is not a function

我也绑定了方法：

this.getData = this.getData.bind(this);

我从componentWillMount 调用它。

这会在控制台中记录一些内容。但永远不会超时。

有什么问题？如何解决？

【问题讨论】：

setTimeout 是全局方法，与XMLHttpRequest 无关。目前还不清楚您要在这里做什么。
您确定您的端点将花费超过 1 秒的时间来回复吗？除非您已经将其设置为停止，否则本地服务器将很快返回响应。否则尝试一个非常小的数字，如 1（1 毫秒）或向服务器端点添加代码以使其停止时间超过一秒
我只用了一秒快速调试。
@charlietfl 解决了这个问题。但是还有一件事，如果我在console.log("on timeout"); 之后添加that.props.history.push("/bad_request/".concat(this.status)); 行，它会给我错误提示 TypeError: Cannot read property 'history' of undefined 因为这目前表明该方法。如何解决？
我已经编辑了代码。

标签： javascript reactjs xmlhttprequest timeout settimeout

【解决方案1】：

switch (xmlhttp.readyState) {
      case 0 : // UNINITIALIZED
      case 1 : // LOADING
      case 2 : // LOADED
      case 3 : // INTERACTIVE
      break;
      case 4 : // COMPLETED
      doSomething()
      break;
      default: // catch error here
   }

我用它来检查它是否是状态，最后我可以检查服务器是否超时，默认情况下会给我不同类型的错误。

【讨论】：