javascript - 如何在 Javascript 中使用 .bind 时获取 XMLHttpRequest 响应文本？

Question

这就是我想做的:

response: string;
sendCreateInvoice(invoice, job){
  let url = 'assets/php/myScript.php';
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      this.response = this.responseText;
    };
  };
  xmlhttp.open('POST', url, true);
  xmlhttp.send(invoice);
}

所以我认为我需要使用 .bind(this) 但当我这样做时，我似乎无法再访问 this.responseText 。我尝试过这样的:

response: string;
sendCreateInvoice(invoice, job){
  let url = 'assets/php/myScript.php';
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      this.response = this.responseText;
    };
  }.bind(this);
  xmlhttp.open('POST', url, true);
  xmlhttp.send(invoice);
}

我尝试了 this.xmlhttp.responseText 和 xmlhttp.responseText 但没有运气。我哪里出错了？如何将 responseText 保存到 response？

==================

工作代码:

response: string;
sendCreateInvoice(){
  let url = 'assets/php/myScript.php';
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = () => {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      this.response = xmlhttp..responseText;
    };
  };
  xmlhttp.open('POST', url, true);
  xmlhttp.send(invoice);
}

Answer 1

您可以使用xmlhttp来引用XMLHttpRequest对象。

对 open() 和 send() 的调用需要在回调函数之外。

  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      this.response = xmlhttp.responseText;
    };
  }.bind(this);

此外，您还可以使用箭头函数来代替 .bind(this)。

  xmlhttp.onreadystatechange = () => {
    if (this.readyState == 4 && this.status == 200) {
      this.response = xmlhttp.responseText;
    };
  };
  xmlhttp.open('POST', url, true);
  xmlhttp.send(invoice);

箭头函数将 this 视为普通的词法变量。