javascript - 使用javascript同步获取图像
问题描述
我有一个应用程序可以生成已下载图像的链接。
当我单独使用此代码(如在单个 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 未定义或为空
我怀疑代码是在保存本地存储之前执行的。我不知道如何将工作代码应用于同步提取。
解决方案
尝试创建所有请求的映射并用于Promise.all
解析它们的 URL。
假设您有一个 URL 列表:
const urls = ['url1', 'url2', ...];
创建一个获取请求的映射,如下所示:
const requests = urls.map((url) => fetch(url).then(resp => resp.blob()));
现在将此请求映射传递给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
});
推荐阅读
- line - osmnx:项目点到街道段
- javascript - console.log 有效,但 return 无效
- reactjs - 如何在文本区域中呈现 django api 的答案?
- node.js - 为 https 连接创建 socket.io 服务器
- vba - 循环遍历一个代码块中每个命名范围的第一行
- sql - 我不明白的 TSQL 过滤器,我认为会返回相同数据的 2 个版本不
- r - ggplot2 如何从具有论文列表的 DataFrame 中对值进行子集化?
- python - starlette,在 Web 套接字中使用同步函数
- scala - 从由内部类型参数化的类继承
- android - java.lang.NoClassDefFoundError:解析失败:Lcom/mapbox/android/telemetry/MapboxTelemetry;