为每个承诺读取数据网址？答案

【问题标题】：Read data url in for each promise?为每个承诺读取数据网址？
【发布时间】：2020-04-05 03:47:18
【问题描述】：

我想用 database64 字符串替换我的对象中的 firebase 子数据图像 url。它工作得很好，但我对异步有问题？我怎样才能在我的 foreach 中等待我所有的价值？

 return FirebaseRef.child('rav').on('value', snapshot => {
    //   const userData = snapshot.val() || [];

    var obj = {

    }

    snapshot.forEach(child => {

      function toDataURL(url, callback) {
        var xhr = new XMLHttpRequest();
        xhr.onload = function () {
          var reader = new FileReader();
          reader.onloadend = function () {
            callback(reader.result);
          }
          reader.readAsDataURL(xhr.response);
        };
        xhr.open('GET', url);
        xhr.responseType = 'blob';
        xhr.send();
      }

      toDataURL(child.val().avatar, function (dataUrl) {
        // console.log('RESULT:', dataUrl)

        obj[child.key] = {

          ...child.val(),
          avatar: dataUrl
        }
        console.log('obj', obj)
      })



    });


    console.log('obj', obj)

    this.updateAvatar({ profile: obj }); // Send to reducer


  });
},

}),

【问题讨论】：

标签： javascript reactjs firebase firebase-realtime-database promise

【解决方案1】：

在forEach 之前创建一个空数组，让callback() 函数返回一个Promise.resolve()，将callback() 的返回值（承诺）推送到您的数组中，然后（在forEach 之后）使用Promise.resolve()您的数组以在所有 FileReader() 调用完成后触发您要调用的操作。

【讨论】：

【解决方案2】：

首先让我声明你不应该在循环中定义函数。它在循环的每一步都重新定义。不过那不是你的问题。幸运的是我今年早些时候写了这样一个函数。此 dataURL 是在 wikipedia 上找到的。

function dataURLtoBlob(dataURL){
  var d;
  if(typeof dataURL !== 'string' || !((d = dataURL.split(';base64,')) && d.length > 1)){
    return false;
  }
  var s = atob(decodeURIComponent(d[1])), l = s.length, a = new Uint8Array(l);
  for(var i=0; i<l; i++){
    a[i] = s.charCodeAt(i);
  }
  return new Blob([a], {type:'image/png'});
}
var url = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDADIiJSwlHzIsKSw4NTI7S31RS0VFS5ltc1p9tZ++u7Kfr6zI4f/zyNT/16yv+v/9////////wfD/////////////2wBDATU4OEtCS5NRUZP/zq/O////////////////////////////////////////////////////////////////////wAARCAAYAEADAREAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAQMAAgQF/8QAJRABAAIBBAEEAgMAAAAAAAAAAQIRAAMSITEEEyJBgTORUWFx/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AOgM52xQDrjvAV5Xv0vfKUALlTQfeBm0HThMNHXkL0Lw/swN5qgA8yT4MCS1OEOJV8mBz9Z05yfW8iSx7p4j+jA1aD6Wj7ZMzstsfvAas4UyRHvjrAkC9KhpLMClQntlqFc2X1gUj4viwVObKrddH9YDoHvuujAEuNV+bLwFS8XxdSr+Cq3Vf+4F5RgQl6ZR2p1eAzU/HX80YBYyJLCuexwJCO2O1bwCRidAfWBSctswbI12GAJT3yiwFR7+MBjGK2g/WAJR3FdF84E2rK5VR0YH/9k=';
console.log(url);
dataURLtoBlob(url).text().then(function(str){
  console.log(str);
});

&lt;img src='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDADIiJSwlHzIsKSw4NTI7S31RS0VFS5ltc1p9tZ++u7Kfr6zI4f/zyNT/16yv+v/9////////wfD/////////////2wBDATU4OEtCS5NRUZP/zq/O////////////////////////////////////////////////////////////////////wAARCAAYAEADAREAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAQMAAgQF/8QAJRABAAIBBAEEAgMAAAAAAAAAAQIRAAMSITEEEyJBgTORUWFx/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AOgM52xQDrjvAV5Xv0vfKUALlTQfeBm0HThMNHXkL0Lw/swN5qgA8yT4MCS1OEOJV8mBz9Z05yfW8iSx7p4j+jA1aD6Wj7ZMzstsfvAas4UyRHvjrAkC9KhpLMClQntlqFc2X1gUj4viwVObKrddH9YDoHvuujAEuNV+bLwFS8XxdSr+Cq3Vf+4F5RgQl6ZR2p1eAzU/HX80YBYyJLCuexwJCO2O1bwCRidAfWBSctswbI12GAJT3yiwFR7+MBjGK2g/WAJR3FdF84E2rK5VR0YH/9k='/&gt;

当然，当你可以store an image in Firebase 时，你应该问问自己为什么要这样做。

您应该能够使用 FormDataInstance.append 将 Blob 发送到您的服务器。

【讨论】：