Knockout計算函數內部的異步調用

Question

現在，我有一個Knockout計算函數，該函數接受某些變量，並對Google DirectionsService進行Ajax調用以獲取兩個位置之間的距離。 我對ajax請求的回調函數做了一些計算。 我想做的是僅在位置變量發生更改時才進行ajax調用，以使其不會在每次可觀察到的更改時都進行api調用。

這是我的初始代碼：

ko.computed(function () {

    if (checkStatus() !== "invalid-data") {
      // Encode address for google API
      var start = self.start().split(' ').join('+');
      var end = self.end().split(' ').join('+');

        var request = {
          origin: start,
          destination: end,
          travelMode: google.maps.TravelMode.DRIVING
        };

        directionsServices.route(request, function (response, status) {

          if (status === "OK") {
            // calculations
          } else {
            console.error("Error: " + status);
          }
        });
      }
    }

  }, self);

這是我重構API調用的嘗試：

function getTripData() {

    var request = {
      origin: start,
      destination: end,
      travelMode: google.maps.TravelMode.DRIVING
    };

    return $.Deferred(function(dfd) {
      directionsServices.route(request, dfd.resolve());
    }).promise();
}

if (locationsChanged) {
  trip = getTripData();
  trip.done (function() {
    console.log(trip.status);
    console.log(trip.response);
  });
}

我知道這是不對的，代碼也不起作用。 我真的無法理解有關延期和承諾對象的JQuery文檔。 如果有人可以幫助我解決這個問題，那將是很好的。

Answer 1

據我所知，您的重構還算不錯。
您正在尋找的可能是

function getTripData() {
    var request = {
        origin: start,
        destination: start,
        waypoints: [{
            location: end
        }],
        travelMode: google.maps.TravelMode.DRIVING
    };
    var dfd = $.Deferred();
    directionsServices.route(request, function(response, status) {
        dfd.resolve(response, status);
    });
    return dfd.promise();
}

if (locationsChanged) {
    trip = getTripData();
    trip.done(function(response, status) {
        console.log(response);
        console.log(status);
    });
}