javascript - 为什么我的 javascript 代码运行不正常？

Question

这个问题已经有答案了:

Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference (7 个回答)

已关闭 4 年前。

我正在尝试显示 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 是:'+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('');
}