Question

我正在开发一个Javascript应用。这是我第一次尝试更复杂的应用程序，而且我遇到了Promises的问题。

<!DOCTYPE html>
<html>
  <head>
    <title>Images</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      ...
    </style>
    <script src="http://js.pusher.com/2.2/pusher.min.js"></script>
    <script async defer
       src="https://maps.googleapis.com/maps/api/js?key=key&callback=initMap">
    </script>
  </head>
  <body>
    <div id="map"></div>

    <script>
      var map;

      //setup Pusher API
      var channel = "channel";
      var pusher = new Pusher(appid);
      var title;
      var Channel = pusher.subscribe(channel);

      function getTitle() {
        return new Promise(function(resolve, reject) {
            Channel.bind("new-listing", function(listing) {
              title = listing['title'];    
              resolve(title);
            }, 0);
          });
        }

      getTitle().then(function(title) {
        return title;
      });
      // console.log("Title: " + title);

      function findCoordinates() {
          return new Promise(function(resolve, reject) {
            geocoder.geocode( { 'address': address}, function(results, status) {
               latitude = results[0].geometry.location.lat();
               longitude = results[0].geometry.location.lng();

             resolve(latitude, longitude);
            }, 0);
          });

        }

       findCoordinates().then(function(latitude, longitude) {
         console.log("Latitude: " + latitude);
         console.log("Longitude: " + longitude);
      });
      // console.log("Latitude: " + latitude);

      function initMap() {
        var postion = {lat: latitude, lng: longitude}; //here I need latitude and longitude
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: postion
        });

        var marker = new google.maps.Marker({
          position: postion,
          map: map,
          title: title //here I need title
        });

        marker.addListener('click', function() {
          infowindow.open(map, marker);
        });

      }
    </script>

  </body>

</html>

我有三个问题：

虽然承诺正在起作用，但问题是标题仍未在承诺之外提供
与纬度相同+我需要有纬度和经度
另一个问题是我的代码现在抱怨未在promise中定义地理编码器。

任何反馈都非常感谢。

Answer 1

问题是该承诺之外的标题仍无法使用

永远不会。这可能允许您在初始化之前访问它，因此您不会拥有该标题的全局变量 - 您对此有全球承诺。
您可以通过调用承诺上的then来访问标题，这可能需要等待值到达。

与纬度相同+我需要有纬度和经度

同样在这里。请注意，您不能使用两个参数调用resolve，而是必须传递一个对象。

另一个问题是我的代码现在抱怨在承诺中没有定义地理编码器。

不太可能发生了变化。也许您需要等待调用findCoordinates，直到加载了地理编码器脚本。

你的大多数代码看起来都很好，现在你只需将promises存储在变量中，并在initMap函数中等待它们：

function getTitle(channel) {
  return new Promise(function(resolve, reject) {
    channel.bind("new-listing", resolve);
  }).then(function(listing) {
    return listing['title'];
  });
}

function findCoordinates(address) {
  return new Promise(function(resolve, reject) {
    geocoder.geocode( { 'address': address}, function(results, status) {
      // if (status not ok) return reject(status);
      resolve(results);
    }, 0);
  }).then(function(results) {
    var latitude = results[0].geometry.location.lat();
    var longitude = results[0].geometry.location.lng();
    console.log("Latitude: " + latitude);
    console.log("Longitude: " + longitude);
    return {lat: latitude, lng: longitude});
  });
}

//setup Pusher API
var pusher = new Pusher(appid);
var channel = pusher.subscribe("channel");

var titlePromise = getTitle(channel);
var coordinatesPromise = findCoordinates(…); // dunno where you got the address from

// called by the google maps script when ready
function initMap() {
  Promise.all([titlePromise, coordinatesPromise]).then(function(res) {
    var title = res[0];
    var position = res[1];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: position
    });
    var marker = new google.maps.Marker({
      position: position,
      map: map,
      title: title
    });

    marker.addListener('click', function() {
      infowindow.open(map, marker);
    });
  });
}

Javascript承诺没有帮助

1 个答案: