以与文件相同的顺序加载图像答案

【问题标题】：Load images in the same order as the files以与文件相同的顺序加载图像
【发布时间】：2019-10-09 18:53:42
【问题描述】：

我正在使用 Firebase 存储。在一个存储桶中，我有几个图像文件和一个包含所有文件列表的 listfile.txt。我需要做的是加载图像并将它们按照与listfile.txt 中列出的文件相同的顺序放入数组中。

我遇到了一些问题，因为 getDownloadURL() 是异步的，并且图像以随机顺序加载到 overlay 数组中。

var files=[];
var mapRef=[];
var overlay=[];

var listMapsRef = storageRef.child(prefix+"/listfile.txt");
listMapsRef.getDownloadURL().then(function(url) {
    $.get(url, function(txt){
        files = txt.split("\n");
        for (var i = 0; i < files.length; i++) {
            mapRef.push(storageRef.child(files[i]));
            .....
            .....
        }
        count = mapRef.length;
        mapRef.forEach(function(oneMap) {
                oneMap.getDownloadURL().then(function(url){
                ovl=loadImage(url);
                overlay.push(ovl);
                if (!--count) {
                    startMyApp();
                    }
                });
            });

    }); //.get
});  //.then

【问题讨论】：

由于请求是异步的，因此无法对它们的响应进行排序（除了使用同步请求，但这不是一个可行的解决方案）。相反，一旦收到所有请求，您可以重新排序结果数组以匹配所需的顺序。
你是对的。谢谢@RoryMcCrossan

标签： jquery foreach each firebase-storage

【解决方案1】：

做类似这样的伪代码

function loadImage(url) {
  return new Promsie((resolve, reject) => {
    fetch(url, (data, err) => {
       if (err) reject(err);
       else resolve(data);
    })
  });
}

const overlay = await Promise.all(
    mapRef.map(
        oneMap => oneMap
            .getDownloadURL()
            .then(url => loadImage(url)
    )
);

【讨论】：