Chrome扩展全局变量访问异常：异步调用致输出undefined

兄弟，我一眼就看出问题在哪了——chrome.storage.sync.get是异步API，它的执行逻辑和你想的不一样！你的代码执行顺序其实是这样的：

1. 定义全局变量color
2. 调用updateColor()
3. 执行chrome.storage.sync.get，但这个方法不会立刻返回结果，它会把回调函数塞进任务队列，直接跳过继续执行后面的代码
4. 执行第二个console.log(color)，这时候color还没被赋值，所以输出undefined
5. 等浏览器把存储里的颜色数据拿到手后，才会回头执行回调函数里的color = result.favoriteColor和第一个console.log(color)

方法1：把依赖color的代码塞进回调里（最直接） #

既然只有回调函数能确定color已经有值，那所有需要用color的逻辑都放进去就行：

var color;
function updateColor(){
  chrome.storage.sync.get("favoriteColor", function(result) {
    color = result.favoriteColor;
    console.log(color); // 这里能拿到正确值
    // 所有需要用到color的代码都写在这里
    renderColorPreview(color);
  });
};

function renderColorPreview(color) {
  console.log(color); // 这里也能正常拿到值
}

updateColor();

方法2：用Promise+async/await（更优雅） #

不想把代码都堆在回调里？可以把chrome.storage.sync.get封装成Promise，用async/await让异步代码看起来像同步的：

// 把存储API封装成Promise
function getFavoriteColor() {
  return new Promise((resolve) => {
    chrome.storage.sync.get("favoriteColor", (result) => {
      resolve(result.favoriteColor);
    });
  });
}

async function updateColor() {
  const color = await getFavoriteColor();
  console.log(color); // 这里能拿到正确值
  // 后续需要用color的代码直接写在这里就行
}

updateColor();

方法3：直接用Chrome原生Promise支持（Chrome 88+） #

从Chrome 88版本开始，chrome.storage的方法已经原生支持Promise了，不用自己封装，直接用await就行：

async function updateColor() {
  const result = await chrome.storage.sync.get("favoriteColor");
  const color = result.favoriteColor;
  console.log(color); // 正常输出颜色值
}

updateColor();

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