为什么我的 javascript 代码出现故障？ [复制]

Question

我正在尝试显示我的 firebase 数据库中的数据和 firebase 存储中的图像。目前它似乎在另一个之前运行我的一些代码。我在下面显示了我的代码：

 <script>
            var wrapper = document.getElementById("myHTMLWrapper");
            var myHTML = '';
            var databaseRef = firebase.database().ref('items/');
            databaseRef.once('value', function(snapshot)
            {
              snapshot.forEach(function(childSnapshot) 
              {
                var childKey = childSnapshot.key;
                var childData = childSnapshot.val();
                myHTML += '<div class="card">';
                myHTML += '<div class="card-body">';
                var urlimage;
                storageRef.child('images/'+ childData.id +'.jpg').getDownloadURL().then(function(url){
                    urlimage = url;
                    console.log(urlimage);
                });
                console.log('url outside of function is: '+urlimage);
                myHTML += '<img src="'+ urlimage +'" class="img-thumbnail" height="">';
                console.log('images/'+ childData.id +'.jpg');
                myHTML += '<h4>'+ childData.sku + ' - ' + childData.name +'</h4>';
                myHTML += '</div>';
                myHTML += '</div>';
              });
              wrapper.innerHTML = myHTML;
            });
          </script>

它从数据库中正确返回数据，但在解析图像的 URL 时遇到问题。从我的控制台日志来看，问题似乎是代码到达了 console.log('url outside of function is: '+urlimage);在它到达 console.log(urlimage) 之前；即使它在代码结构中高于它。我认为这与 Javascript 如何处理它有关。我将非常感谢一些帮助。提前致谢。

Answer 1

看起来“getDownloadURL”返回了一个 Promise，当该 Promise 被解决时，您将获得 url，因此您解释的行为是正常的。如果要使用 url 值，则必须将代码移动到回调函数中。像这样的

var getURL = function(childSnapshot) {
   var childKey = childSnapshot.key;
   var childData = childSnapshot.val();
   return storageRef.child('images/'+ childData.id +'.jpg').getDownloadURL().then(function(url){
       var myHTML = '';
       myHTML += '<div class="card">';
       myHTML += '<div class="card-body">';
       myHTML += '<img src="'+ url +'" class="img-thumbnail" height="">';

       myHTML += '<h4>'+ childData.sku + ' - ' + childData.name +'</h4>';
       myHTML += '</div>';
       myHTML += '</div>';
       return myHTML;
  });
}
var promises = [];
snapshot.forEach(function(childSnapshot) {
       promises.push(getURL(childSnapshot));
}  
Promise.all(promises).then(results => {
     wrapper.innerHTML = results.join('');
}