Angular 4 TypeScript中Promise场景下全局变量值丢失原因咨询

这问题我帮不少开发者排查过，大概率是异步时序、作用域遮蔽这类常见坑导致的，咱们一个个来拆解可能的原因：

1. 异步操作的时序问题（最常见） #

如果给全局变量赋值的操作是在异步回调里（比如fetch请求、setTimeout、Promise的then方法），而第二个console.log是同步执行的，那它会比赋值操作先跑，自然拿不到值。

举个典型的错误示例：

// 全局变量
let globalVar: string = '';

function initData() {
  // 异步请求数据
  fetch('/api/get-data')
    .then(res => res.text())
    .then(data => {
      globalVar = data;
      console.log(globalVar); // 第一个log：能正常打印，因为是在回调里，赋值已经完成
    });
  // 这里是同步代码，此时异步回调还没执行！
  console.log(globalVar); // 第二个log：输出空字符串
}
initData();

解决办法：确保第二个console.log在异步操作完成后执行，比如改用async/await：

async function initData() {
  const res = await fetch('/api/get-data');
  const data = await res.text();
  globalVar = data;
  console.log(globalVar); // 第一个log
  console.log(globalVar); // 第二个log：此时赋值已完成，能正常打印
}

2. 局部变量遮蔽了全局变量 #

你可能在赋值的方法内部，不小心用let/const/var重新声明了同名变量，导致你实际是给局部变量赋值，而非全局变量。

示例：

let globalVar: string = '';

function setValue() {
  // 这里的let声明了一个局部变量，和全局的globalVar是两个东西！
  let globalVar = '我是局部变量';
  console.log(globalVar); // 第一个log：打印局部变量的值
}
setValue();
console.log(globalVar); // 第二个log：全局变量还是空字符串

排查方法：检查赋值方法内部有没有重声明同名变量，去掉局部的let/const/var即可：

function setValue() {
  globalVar = '我是全局变量'; // 直接赋值给全局变量
  console.log(globalVar);
}

3. 模块系统导致的“伪全局” #

如果你的TypeScript文件使用了import/export，那你声明的“全局变量”其实是模块级变量，不属于浏览器的全局作用域（比如window）。如果在其他模块访问，或者代码执行顺序不对，可能会出现值未更新的情况。

如果要真正的全局（浏览器环境），可以把变量挂载到window上：

// 先声明window的类型扩展，避免TS报错
declare global {
  interface Window {
    globalVar: string;
  }
}

// 初始化全局变量
window.globalVar = '';

function setGlobalValue() {
  window.globalVar = '真正的全局值';
  console.log(window.globalVar); // 第一个log
}
setGlobalValue();
console.log(window.globalVar); // 第二个log：能正常拿到值

4. 代码执行顺序问题 #

第二个console.log所在的代码块，可能比赋值方法先执行了。比如赋值方法是在DOMContentLoaded事件回调里，而第二个log是在脚本最外层直接执行的：

let globalVar: string = '';

// 页面加载完成后才赋值
window.addEventListener('DOMContentLoaded', () => {
  globalVar = '页面加载完成啦';
  console.log(globalVar); // 第一个log正常
});

// 这里的代码会先于DOMContentLoaded执行
console.log(globalVar); // 第二个log：输出空字符串

解决办法：确保第二个log在赋值操作之后执行，比如也放进事件回调里，或者用Promise等待赋值完成。

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