Выполнение асинхронных функций с обратным вызовом?

Question

Я немного смущен тем, как создавать и использовать функции обратного вызова при работе с асинхронными запросами. Все примеры в Интернете, как использовать функцию SetTimeout для имитации функции async, но я хочу привести пример, который просто использует API реального мира.

У меня есть функция, которая принимает асинхронной почтовый индекс и возвращает JSON как это:

{ 
    "post code": "90210", 
    "country": "United States", 
    "country abbreviation": "US", 
    "places": [ 
     { 
      "place name": "Beverly Hills", 
      "longitude": "-118.4065", 
      "state": "California", 
      "state abbreviation": "CA", 
      "latitude": "34.0901" 
     } 
    ] 
} 

Вот функции. Функция async переходит в API и возвращает JSON выше.

Функция синхронизации просто берет JSON и возвращает городскую строку в UpperCase.

// Async Function 
    var returnLocationInfoByZip = function(zip){ 
     var client = new XMLHttpRequest(); 
     var response; 
     client.open("GET", "http://api.zippopotam.us/us/" + zip, true); 
     client.onreadystatechange = function() { 
      if(client.readyState == 4) { 
       response = client.responseText; 
       return response; 
      }; 
     }; 
     client.send(); 
    }; 

// Sync Function 
    var cityToUpperCase = function(responseObject){ 
     var city = responseObject.places[0]["place name"]; 
     return city.toUpperCase(); 
    }; 

Следующий поток кода не работает, потому что я не использую обратные вызовы. Какой был бы самый чистый способ выполнения этих функций, чтобы я мог получить желаемый журнал консоли имени города во всех UpperCase?

// Obviously doesn't work 

    var zip = "94043"; 
    var responseObject = returnLocationInfoByZip(zip); 

    //Here I would like to console log the uppercase city name 
    var cityInUpperCase = cityToUpperCase(responseObject); 
    console.log(cityInUpperCase); 

EDIT: Ба, похоже, это может иметь ответ: How do I return the response from an asynchronous call?

Я все еще будет интересно узнать, как это сделать с этим конкретным примером шахты, хотя.

Answer 1

Вы должны передать функции синхронизации (cityToUpperCase) в качестве параметра функции асинхронной (returnLocationInfoByZip), который будет ссылаться, когда onreadystatechange называется:

var returnLocationInfoByZip = function(zip, callback){ 
    ... 
    client.onreadystatechange = function() { 
     if(client.readyState == 4) { 
      response = client.responseText; 
      callback(JSON.parse(response)); 
     }; 
    }; 
    ... 
} 

var cityToUpperCase = function(responseObject){ 
    ... 
}; 

... 
returnLocationInfoByZip(zip, function(responseObject){ 
    console.log(cityToUpperCase(responseObject)); 
});