无法以正确的方式在Javascript中实现异步XMLHttpRequest

Question

我使用Async XMLHttpRequest进行API调用。这是我的程序的工作流程，

first_function(){
var valueToBeReturned = 0;

 makeRequest(myCallback)//function for API call

 /*rest of the code*/
 console.log("print second");
 return valueToBeReturned;
}

function makeRequest(callback){
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", "my_url", true);
    xhttp.send(null);
    xhttp.onload = function() {
        if(xhttp.readyState === 4) {
            if(xhttp.status === 200) {
                response = JSON.parse(xhttp.responseText);
                callback(null, response);
            }
        }
    }
}

function myCallback(data){
    console.log("print first")
}

现在发生的是每次运行它时，第一个函数中的整个代码都会被执行，然后执行makeRequest中的代码。我理解JS本质上是同步的。但是我无法在这里完成我的工作，这是它调用API，然后执行回调，然后是makeRequest之后的代码。我在这里做错了什么？

PS这不是实际的代码，只是为了演示我的程序流程

Answer 1

您需要将callback作为makeRequest中的参数。不过，我不确定null是什么。如果您希望"print second"打印第二个，则需要在 myCallback之后执行 - 可能会插入另一个回调？

function first_function(){
  var valueToBeReturned = 0;
  makeRequest(myCallback, restOfTheCode)
  function restOfTheCode() {
    /*rest of the code*/
    console.log("print second");
  }
}

function makeRequest(callback1, callback2){
  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", "my_url", true);
  xhttp.send(null);
  xhttp.onload = function() {
    if(xhttp.readyState === 4 && xhttp.status === 200) {
      const response = JSON.parse(xhttp.responseText);
      callback1(response);
      callback2(response);
    }
  }
}

function myCallback(data){
  console.log("print first");
}

但如果您使用Fetch和Promises，那么整个事情会好很多：

function makeRequest() {
  return fetch('my_url')
    .then(response => response.JSON())
}
// consume the request:
makeRequest()
  .then(responseJSON => {
     // do stuff with the responseJSON
   });