JavaScript异步场景下如何等待keys变量赋值完成后执行后续代码

解决方案 #

核心原因 #

所有async函数执行后都会返回Promise对象，调用getAllKeys()时不会等待内部异步逻辑执行完成，就会立刻执行下一行的prepareData()，因此此时keys还是初始的空数组。

方案1：使用.then链式调用 #

首先调整prepareData为异步函数，处理内部getData的异步返回：

let keys = [];

const getAllKeys = async () => {
  try {
    keys = await AsyncStorage.getAllKeys();
  } catch (e) {
    // 读取key报错
  }
  console.log("keys: ", keys) // 这里可以正常打印拿到的keys
}

const getData = async (key) => {
  try {
    const jsonValue = await AsyncStorage.getItem(key);
    return jsonValue != null ? JSON.parse(jsonValue) : null;
  } catch (e) {
    // 读取值报错
  }
};

// 改为异步函数，处理getData的异步逻辑
const prepareData = async () => {
  console.log("keys: ", keys)
  for (const key of keys) { // 用for of遍历方便处理异步逻辑
    console.log("hier")
    const data = await getData(key)
    console.log(data)
  }
}

// 等待getAllKeys执行完成后再调用prepareData
getAllKeys().then(() => {
  prepareData()
})

方案2：使用async/await写法（逻辑更清晰） #

把执行逻辑包裹在自执行异步函数中即可：

// 其余函数定义保持不变，仅调整执行部分代码
;(async () => {
  await getAllKeys()
  await prepareData()
})()

额外优化建议 #

可以去掉全局变量keys，直接通过返回值传递数据，避免全局变量污染：

// 修改getAllKeys直接返回结果
const getAllKeys = async () => {
  try {
    return await AsyncStorage.getAllKeys();
  } catch (e) {
    // 读取key报错
    return []
  }
}

const prepareData = async (keys) => { // 接收keys作为参数
  console.log("keys: ", keys)
  for (const key of keys) {
    console.log("hier")
    const data = await getData(key)
    console.log(data)
  }
}

// 调用逻辑
;(async () => {
  const keys = await getAllKeys()
  await prepareData(keys)
})()

内容的提问来源于stack exchange，提问作者Daniel Scho