Knockout 计算函数内的异步调用答案

【问题标题】：Asynchronous call inside a Knockout computed functionKnockout 计算函数内的异步调用
【发布时间】：2015-01-03 18:30:45
【问题描述】：

现在我有一个 Knockout 计算函数，它接受某些变量并对 google 方向服务进行 ajax 调用以获取两个位置之间的距离。我对ajax请求的回调函数做了一些计算。我想做的是仅在位置变量更改时才进行 ajax 调用，这样它就不会在每次 ko 可观察到的更改时进行 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 文档。如果有人能帮我解决这个问题，那就太好了。

【问题讨论】：

标签： javascript jquery ajax google-maps-api-3 knockout.js

【解决方案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);
    });
}

【讨论】：