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

Question

我是 Javascript 异步调用和理解 promise 的新手。我已经习惯了这样做，等等。

我在我的网站中使用 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()

但是如果我像这样运行它，由于异步功能，它会立即失败。并导致没有数据显示。

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

Answer 1

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

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

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

我建议你使用 async wait，它很干净。

代码看起来像这样:

(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]);