LocalForage async/await getItem() 等待 2 个变量然后完成加载

Question

我是 Javascript 异步调用和理解承诺的新手。我已经习惯了，等等。

我在我的网站中使用 localforage，我需要从 2 个来源获取数据。

var ordersRaw = null
var itemsRaw = null
localforage.getItem('ordersRaw').then((res) => {
    if(res) {
        ordersRaw = res
    } 
})
localforage.getItem('itemsRaw').then((res) => {
    if(res) {
        itemsRaw = res
    } 
})
if(ordersRaw && itemsRaw) {
    // now load the screen
} else { console.log('NO DATA') }

得到这两条数据后，通过运行函数完成加载屏幕

displayWithResults()

但是如果我这样运行它，它会立即失败，因为异步功能。并导致 NO DATA 出现。

我一直在使用 javascript 遇到这个问题，但我似乎无法准确地完全理解它。任何帮助在这里表示赞赏。

Answer 1

有几种方法可以解决这个问题：

• 嵌套回调
• 通过 Promise 使用异步等待
• 将结果存储在单个键下作为对象中的嵌套属性
• 使用 Promise.all

归结为您希望在执行检查之前异步检索所有结果。

我建议你使用异步等待，它很干净。

代码看起来像这样：

(async() => {
    try {
        const ordersRaw = await localforage.getItem('ordersRaw');
        const itemsRaw = await localforage.getItem('itemsRaw');
        if(ordersRaw && itemsRaw) {
            // now load the screen
        } else { 
           console.log('NO DATA') }
        }
    } catch (e) {
        console.log(e);
    }
})();

编辑：以上代码按顺序执行。 请替换为：

const getOrders = localforage.getItem('ordersRaw');
const getItems = localforage.getItem('itemsRaw');
const [ordersRaw, itemsRaw] = await Promise.all([getorders, getItems]);