Javascript承诺没有帮助

我正在开发一个Javascript应用程序。这是我第一次尝试一个更复杂的应用程序，我遇到了Promises的问题。Javascript承诺没有帮助

<!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中定义。

任何反馈真的很感激。

来源

2016-08-31 wiwa1978

title'的'范围是所预期的（如与“纬度”和“经度”相反），但是你的实际问题是回调的不同步。 – Bergi

我读了类似问题的答案，并将我的问题修改得更加具体。不得不承认，即使在阅读答案后，我也没有看到它。 – wiwa1978

'setTimeout'就像'Channel.bind'，''Test message''就像'listing ['title']'。有了这个承诺，并且承诺了坐标，您可以使用'Promise.all'，然后在所有数据到达后调用您的'initMap'。 – Bergi

的问题是，标题是还没有上市的诺言

它永远不会被外界。这可能允许你在初始化之前访问它，所以你不会有一个标题的全局变量 - 你有一个全球承诺。
您可以通过致电then来获取标题，这可能不需要等待值的到来。

同纬度+我需要有经度和纬度提供

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

另一个问题是，我的代码现在抱怨geocoder没有在promise中定义。

不太可能发生了变化。也许你需要等待，直到地址解析器脚本已经加载，然后调用findCoordinates。

大部分代码看起来已经好了，现在你只需要存储在变量中的承诺，并在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); 
    }); 
    }); 
}

来源

2016-08-31 22:13:35 Bergi

好奇听到downvote的原因。 – Bergi

不是来自我，我只是upvoted。将尝试您的建议并回报。 – wiwa1978

Javascript承诺没有帮助

回答

相关问题