解答 Promise 中的 "Uncaught ReferenceError: xxx is not defined" 问题

在前端开发中，使用 Promise 是很常见的。但是有时候我们会遇到一个错误：Uncaught ReferenceError: xxx is not defined。这个错误可能会让我们很困惑，因为我们明明已经定义了 xxx，为什么会提示它未定义呢？本文将会详细解答这个问题。

问题的原因

在使用 Promise 的过程中，我们可能会遇到下面这种情况：

new Promise((resolve, reject) => {
  // 异步代码
}).then(() => {
  console.log(xxx);
});

在 Promise 的 then 方法中，我们想要访问一个外部变量 xxx，但是却提示它未定义。这是因为 Promise 的 then 方法是异步执行的，在执行 then 方法时，外部变量 xxx 可能还没有被定义。这就导致了 Uncaught ReferenceError 错误的出现。

解决方法

方法一：将变量定义在 Promise 外部

最简单的解决方法是将变量定义在 Promise 外部，这样就可以保证在 then 方法执行时，变量已经被定义了。

const xxx = 'hello';

new Promise((resolve, reject) => {
  // 异步代码
}).then(() => {
  console.log(xxx);
});

方法二：使用闭包

如果我们无法将变量定义在 Promise 外部，可以使用闭包来解决这个问题。在 Promise 内部定义一个函数，在函数内部访问变量，然后将函数作为 then 方法的回调函数即可。

// javascriptcn.com 代码示例
new Promise((resolve, reject) => {
  const xxx = 'hello';
  // 异步代码
  const callback = () => {
    console.log(xxx);
  }
  resolve(callback);
}).then((callback) => {
  callback();
});

这样做的原理是，在 Promise 内部定义的函数可以访问 Promise 内部的变量，而且函数本身也是一个闭包，可以保证在执行时变量已经被定义了。

方法三：使用 async/await

如果你使用的是 ES2017 或以上的版本，可以使用 async/await 来解决这个问题。async/await 可以让异步代码看起来像同步代码，这样就可以避免 Uncaught ReferenceError 错误的出现。

(async () => {
  const xxx = 'hello';
  await new Promise((resolve, reject) => {
    // 异步代码
    resolve();
  });
  console.log(xxx);
})();

这里使用了立即执行函数表达式来包装异步代码，然后使用 await 等待 Promise 执行完毕，最后访问变量即可。

总结

Uncaught ReferenceError 错误的出现是因为 Promise 的 then 方法是异步执行的，而访问的变量可能还没有被定义。解决这个问题的方法有三种：将变量定义在 Promise 外部、使用闭包、使用 async/await。在实际开发中，我们可以根据实际情况选择不同的解决方法。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6556d6c0d2f5e1655d135c06