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') }

我有了这2条数据后，通过运行调用一个函数

完成加载屏幕

displayWithResults()

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

我一直运行与 javascript 一起解决这个问题，但我似乎无法完全准确地理解它。在这里的任何帮助表示赞赏。

Answer 1

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

嵌套回调
使用 promises 使用 async await
将结果存储在单个键下作为对象中的嵌套属性
使用Promise.all

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

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

代码看起来像这样：

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

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

LocalForage async/await getItem() wait for 2 variables and then finish loading

javascript

asynchronous

local-storage

async-await

localforage