使用 javascript 同步获取图像

Question

我有一个应用程序可以生成已下载图像的链接。

当我单独使用此代码（如在单个 uri 中）时，它适用于我想要实现的目标，动态创建图像路径并创建本地图像，我可以将其存储并在我需要的其他地方引用它。

var path = getOS() + '' + object.link + '/' + object.icon
var outside
fetch(path)
   .then(response => response.blob())
   .then(images => {
   outside = URL.createObjectURL(images)  
   localStorage.setItem('stored_img'+ _object.link, outside)
})

问题是当我尝试循环浏览多个图像并尝试创建指向它们的 localStorage 链接时。 所有本地 Storageitems 未定义或 null

我怀疑代码是在保存本地存储之前执行的。 我不知道如何将工作代码应用于同步提取。

Answer 1

尝试创建所有请求的 map 并使用Promise.all来解析它们的 URL。

假设您有一个 URL 列表：

const urls = ['url1', 'url2', ...];

创建一个获取请求的 map，如下所示：

const requests = urls.map((url) => fetch(url).then(resp => resp.blob()));

现在将此请求 map 传递给Promise.all ：

Promise.all(requests).then(responseArr => {
  const imagesArr = responseArr.map(image => {
    const url = URL.createObjectURL(image);
    localStorage.setItem('...', url);
    return url;
  });
  // now you have a list of image urls in imagesArr which you can use. They are also stored in localStorage
});