Javascript：返回速度太快，不等待Google Maps API

Question

我要乘汽車和火車。 我可以從Google Maps API中獲取它，但是當我想要一個變量中的距離時，帶有API的函數getDistance（）會返回直接值，而不必等待API的響應。 在Internet上，我找到了帶有異步/等待，承諾和回調的解決方案。 但這對我不起作用，可能是因為我寫錯了。 但是有人可以幫我解釋一下我的錯嗎？

謝謝！

我的代碼：

function giveComparing(result) {
        var $distanceCar = getDistance(result, google.maps.TravelMode.DRIVING);
        var $distanceTrain = getDistance(result, google.maps.TravelMode.TRANSIT);

        console.log($distanceCar); // Output: 0
        console.log($distanceTrain);  // Output: 0

    };

    function getDistance(result, transport) {
        var origin = result.departure.stationinfo.locationY + ',' + result.departure.stationinfo.locationX;
        var destination = result.arrival.stationinfo.locationY + ',' + result.arrival.stationinfo.locationX;
        var service = new google.maps.DistanceMatrixService();
        var distance = 0;

        service.getDistanceMatrix(
            {
                origins: [origin],
                destinations: [destination],
                travelMode: [transport]
            }, callback);

        function callback(response, status) {
            console.log(response.rows[0].elements[0].distance.value);
            distance = response.rows[0].elements[0].distance.value;
        };
        return distance;            
  } 

產量

Answer 1

正如您提到的那樣，您的觀點是正確的，您確實需要使用promise和async / await。 解決了一個預覽問題，如果您需要深入的解釋，這非常相似，並且在這里得到了很好的解釋:)

您可以執行以下操作以達到所需的效果：

async function giveComparing(result) {
  try{
    var $distanceCar = await getDistance(result, google.maps.TravelMode.DRIVING); //Wait for the promise to resolve
    var $distanceTrain = await getDistance(result, google.maps.TravelMode.TRANSIT);//Wait for the promise to resolve

    console.log($distanceCar);
    console.log($distanceTrain); 
  }catch(){
    console.log("Promise was rejected") //A promise was rejected.
  }
};

function getDistance(result, transport) {
  return new Promise((resolve, reject) => {
    var origin = result.departure.stationinfo.locationY + ',' + result.departure.stationinfo.locationX;
    var destination = result.arrival.stationinfo.locationY + ',' +      result.arrival.stationinfo.locationX;
    var service = new google.maps.DistanceMatrixService();

    service.getDistanceMatrix(
      {
        origins: [origin],
        destinations: [destination],
        travelMode: [transport]
      }, callback);

    function callback(response, status) {
        if(status == "OK"){
            console.log(response.rows[0].elements[0].distance.value);
            let distance = response.rows[0].elements[0].distance.value;
            resolve(distance); //Resolve our promise with the distance.
        }else{
            reject(); //Reject the promise since the status return anything else then OK
        }
    }
  });        
} 

上面的代碼沒有經過直接測試，但是我認為狀態正確是正確的，可以從開發人員指南中找到 。

Answer 2

你幾乎是對的。 您無法從這樣的異步操作中返回值，因此您將使用回調，但是會將回調傳遞給 getDistance作為要調用的參數。

function getDistance(result, transport, callback) {

 //... 

  service.getDistanceMatrix({
    origins: [origin],
    destinations: [destination],
    travelMode: [transport]
  }, callback);
}

// Call getDistance, passing the original arguments
// and a callback function
getDistance(result, transport, function (response) {
  const distance = response.rows[0].elements[0].distance.value;
});