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

Posted 2023-03-16

【中文标题】以与文件相同的顺序加载图像

【英文标题】：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

【参考方案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)
    )
);