如何将chrome.storage.local异步获取值存入字典并在回调外正常使用

chrome.storage.local.get 是浏览器提供的异步IO API，调用后不会阻塞后续代码执行：

1. 代码运行时先初始化Credentials为空数组
2. 调用chrome.storage.local.get，把回调函数交给浏览器后台处理存储读取请求，主线程直接继续执行后面的代码
3. 此时立刻执行console.log("First Call",Credentials[0])，回调还没运行，Credentials还是空数组，所以打印undefined
4. 浏览器完成本地存储读取后，才会把回调函数推到主线程执行队列运行，此时才会给Credentials推入数据，所以回调内部的Second Call能正常拿到值

要让两处打印结果一致，必须保证读取存储的异步操作完成后，再执行取值逻辑，有两种常用实现方式：

1. 用async/await封装（推荐） #

把回调式API封装为Promise，用await等待异步执行完成后再运行后续逻辑：

// 封装chrome.storage.local.get为Promise形式
function getLocalStorage(keys) {
  return new Promise((resolve) => {
    chrome.storage.local.get(keys, resolve)
  })
}

var Credentials = []

async function main() {
  const result = await getLocalStorage(["Key"])
  // 注意原代码里的大小写错误：Key和key要和实际存储的键名保持一致
  const email = result.Key.email
  Credentials.push({"email": email})
  // 所有依赖Credentials的逻辑都放在await之后执行
  console.log("First Call", Credentials[0].email)
  console.log("Second Call", Credentials[0].email)
  // 其他需要用到Credentials的函数也在此处调用
}

main()

2. 回调内执行逻辑（适合简单场景） #

如果逻辑复杂度低，直接把所有依赖存储值的逻辑放到回调内部即可：

var Credentials = []
chrome.storage.local.get(["Key"], function(result) {
  const email = result.Key.email
  Credentials.push({"email": email})
  console.log("Second Call",Credentials[0].email)
  // 把需要用到Credentials的逻辑移到这里
  console.log("First Call",Credentials[0].email)
});

• 依赖异步返回值的逻辑不能放在异步调用的同级代码后直接执行，必须等待异步操作完成后再触发
• 注意存储键名的大小写保持一致，避免属性读取错误

内容的提问来源于stack exchange，提问作者Gega Kandelaki