0

我正在尝试学习 Javascript 类和异步 XMLHTTPRequests。我不太擅长面向对象编程，因此我正在尝试学习它以扩展我的知识。

我已经设法了解如何使用https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes上的 mozilla 文档定义 Class 属性、方法和 getter 。

同时我也在学习如何向apis发起异步请求来获取数据。请查看下面我的精简代码，它代表了我为发出异步请求所做的工作。

根据代码，我能够发出成功的请求并从 API 请求中检索数据（数据日志到控制台），但是数据没有被保存为我的对象的属性，即即使我已经设置this.responseData = JSON.parse(http.response);，当我尝试访问 的值test.responseData，它返回为undefined。

我曾多次尝试在线搜索解决方案，但不幸的是没有成功，因此我发布这个问题是为了询问是否有人可以根据我的代码给我一个解决方案。

我正在尝试的是可能的，还是必须做一个synchronous request。许多在线文章指出使用synchrous requests是不好的做法并影响浏览器渲染？

非常感谢你，我很感激你的帮助。

class testClass {
  constructor() {
    this.requestApiData();
  }

  requestApiData() {
    let requestUrl = "https://jsonplaceholder.typicode.com/todos/1";
    let http = new XMLHttpRequest();

    http.onreadystatechange = function() {
      console.log("onreadystatechange = ", http.readyState);

      if (http.readyState == 4 && http.status == 200) {
        this.responseData = JSON.parse(http.response);
        console.log("http.response = ", http.response);
      }
    }

    http.open("GET", requestUrl, true);
    http.send();
  }
}


var test;
var count = 0;

function run() {
  count += 1;
  document.getElementById('counter').innerHTML = count + "";

  if (!test) {
    document.getElementById('counter').innerHTML += " - Test Undefined";
    test = new testClass();
  } else {
    document.getElementById('counter').innerHTML += " - Test Defined";
  }

  document.getElementById('output_message').innerHTML = test.responseData;
}

setInterval(run, 3000)
<p id="counter">

</p>
<pre id="output_message">
  
</pre>

4

0 回答 0