XMLHttpRequest 完成后未调用类中的方法答案

【问题标题】：Method in class not being called after XMLHttpRequest is doneXMLHttpRequest 完成后未调用类中的方法
【发布时间】：2017-02-20 02:04:07
【问题描述】：

我有以下方法可以登录我的 API：

login()
{
    var formData = new FormData();

    formData.append("admin[email]", "user");
    formData.append("admin[password]", "pass");

    var request = new XMLHttpRequest();
    request.open("POST", "my_link");

    request.onreadystatechange = (function() {
      if (request.readyState === XMLHttpRequest.DONE && request.status === 201)
      {
        return function() { this.loadMembers(); }
      }
    });

    request.send(formData);
  }

然后我有我的方法，我试图在我的帖子异步请求完全完成后调用：

loadMembers()
{
    ....
}

现在由于某种原因，this.loadMembers() 永远不会被调用。如果我将测试 console.log() 放在它的正上方（不在返回回调中）它调用就好了 - 所以我知道 requestState 和请求状态是正确的。

有没有更好的方法来做到这一点？还是我做错了什么？

谢谢

【问题讨论】：

标签： javascript asynchronous typescript xmlhttprequest

【解决方案1】：

这是因为您返回的是一个函数，而不仅仅是调用 loadMembers。

所以而不是：

request.onreadystatechange = (function() {
  if (request.readyState === XMLHttpRequest.DONE && request.status === 201)
  {
    return function() { this.loadMembers(); }
  }
});

你可能想要：

var that = this;
request.onreadystatechange = (function() {
  if (request.readyState === XMLHttpRequest.DONE && request.status === 201)
  {
    that.loadMembers();
  }
});

【讨论】：

这不起作用，因为onreadystatechange回调上下文中的“this”是XMLHttpRequest，而不是我的类。
好的，更新它以捕获this 上下文，因此它可以在函数中作为that 使用。

【解决方案2】：

记住 login() 中的“this”与 (function() { if....}) 中的 this 不同，因此您需要以 rasmeister 显示的方式保存 this var that = this .

【讨论】：