javascript - 如何在循环中使用 Promises 并确保所有内容都已完成,然后再继续?
问题描述
我正在使用 localforage 库来访问 localStorage/IndexedDB。要检索项目,调用 localforage.getItem() 函数,该函数返回一个 Promise,该 Promise 在检索数据时完成。
我需要遍历 localforage 键,在与我的条件匹配的任何键上调用“getItem”,并将该键的值放在“matches”数组中。但是,在确定所有值都已成功添加到“匹配项”之前,我不想继续该功能。
我对 Promises 很陌生,我不知道如何等到所有的 getItem() Promises 都完成后再继续。
我意识到 localforage 有一个“迭代”功能,但我真的很想更熟练地使用 Promises,并且真的很想知道它应该如何工作。
这就是我正在做的事情:
var matches = []; // Array to store matched items
localforage.keys() // Get all keys in localforage
.then(function(keys) // When all keys are retrieved, iterate:
{
for(var i in keys)
{
// If the current key matches what I am looking for, add it to the 'matches' array.
if (keys[i].indexOf('something i am looking for') > -1)
{
// Here I need to add this value to my array 'matches', but this requires using the getItem method which returns a Promise and doesn't necessarily fulfill immediately.
localforage.getItem(keys[i])
.then(function(value)
{
matches.push(value);
});
}
}
});
// At this point, I want to proceed only after *all* matches have been added to the 'matches' array (i.e. the getItem() Promises are fulfilled on all items in the loop).
我该怎么做呢?这是应用“等待”表达式的地方吗?例如,我应该做
await localforage.getItem(keys[i])
.then(function(value)
... etc
这会使 getItem 函数同步吗?
感谢您的任何建议/指示。
解决方案
您可以Promise.all()
在这种情况下使用。基本思想是,您将一堆 promise 推送到数组中,然后将该数组传递给Promise.all()
当数组中的所有 promise 解析时,Promise.all()
解析为值的数组:
localforage.keys()
.then(function(keys){
var matches = []
for(let i in keys) {
if (keys[i].indexOf('something i am looking for') > -1) {
// matches will be an array of promises
matches.push(localforage.getItem(keys[i]))
}
}
// Promise.all returns a promise that resolves to an array
// of the values they resolve to
return Promise.all(matches)
})
.then(values => {
// values is an array of your items
})
您也可以使用async/await
类似这样的东西来模拟keys
并getItems
运行代码段:
let localforage = {
keys() {
return Promise.resolve([1, 2, 3, 4, 5])
},
getItem(k) {
return Promise.resolve("found: " + k)
}
}
async function getStuff() {
let matches = []
let keys = await localforage.keys()
for (let key of keys) {
matches.push(await localforage.getItem(key))
}
return matches
}
getStuff()
.then(values => {
console.log(values)
})
推荐阅读
- reactjs - Ant Design 的“折叠的内联菜单”错误
- r - D 函数返回零
- ios - HeaderCell 仅被添加到表视图一次
- python - 日期时间绘图回溯无信息
- python - 更改 maptlotlib 的默认样式会破坏图例标记
- python - 在python中将CSV转换为JSON文件
- ios - FileProvider:“CopyItem()”被调用了两次 -> 错误(FTP 下载)
- javascript - 通过 onclick 事件将多个参数传递给 JavaScript 函数
- javascript - 无法使用带有共享组件的 formControl 绑定默认值
- javascript - 如何在 html 上的 IE 中捕获 window.location.href ("url") 上的错误