如何在Promise内部修改外部初始化变量？解决异步取值时序问题

• 这是JavaScript异步执行的天然特性导致的：firebase.database().ref(path).once('value')发起的数据库查询是异步操作，代码不会等查询结果返回再往下走。你在Promise外部直接读取valid变量时，.then里的赋值逻辑根本还没执行，拿到的永远是最开始的初始值true。
• 你提供的原代码本身还有两处可修正的问题：第二个.then()缺少闭合的大括号与圆括号；循环里的user变量没有用const/let声明，会意外挂载到全局对象上造成污染。

方式1：把所有依赖校验结果的逻辑，放到Promise链的回调中执行 #

Promise链的回调是严格按照异步完成顺序执行的，只要不把依赖valid值的业务逻辑放到Promise外部，就不会遇到时序问题。修正后的代码如下：

// 不需要在外部提前初始化valid，直接把变量作为Promise链的返回值逐层传递
firebase.database().ref(path).once('value')
  .then((snap) => {
    let valid = true;
    const data = snap.val()
    if (data !== null) {
      // 给循环变量加声明，避免全局污染
      for (const user in data) {
        if (data[user].Email === Email) {
          valid = false;
          break; // 匹配到对应邮箱后直接跳出循环，无需遍历剩余数据
        }
      }
    }
    // 把最终的valid值作为Promise的返回值传递下去
    return valid;
  })
  .then((finalValid) => {
    // 这里拿到的finalValid就是异步执行完成后的最终校验结果
    // 所有需要使用这个结果的业务逻辑，全部写在这个回调里即可
    console.log('邮箱校验结果：', finalValid);
    if (!finalValid) {
      alert('该邮箱已被注册，请更换后重试');
    }
  })

注意：如果确实需要在外部作用域访问这个变量，只需要在Promise的回调执行时完成赋值即可，但绝对不能在同步流程里立刻读取这个变量——因为读取操作发生的时候，回调还没执行，变量自然没有更新。

方式2：用async/await简化异步代码的书写 #

如果不想写层层嵌套的.then回调，可以把整段校验逻辑封装为async函数，用await等待数据库查询的结果，代码的阅读逻辑会更贴近同步代码的习惯：

async function checkEmailAvailable(Email, path) {
  const snap = await firebase.database().ref(path).once('value');
  let valid = true;
  const data = snap.val();
  if (data !== null) {
    for (const user in data) {
      if (data[user].Email === Email) {
        valid = false;
        break;
      }
    }
  }
  return valid;
}
// 调用封装好的函数时，因为函数本身返回Promise，同样需要在回调中获取最终结果
checkEmailAvailable(Email, path).then(valid => {
  // 这里可以安全使用最终的校验值编写业务逻辑
  console.log('校验完成：', valid);
})

• 不要试图用同步逻辑等待异步结果：JavaScript的事件循环机制决定了，同步代码永远会优先于Promise回调、网络请求等异步任务执行，你在Promise外部直接console.log(valid)的操作，永远早于回调里的赋值逻辑，不可能拿到更新后的值。
• 不要写循环等待的反模式代码：比如用while(valid)死循环等待变量值变化，这种写法会直接卡死JS主线程，导致整个页面无响应。

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