Angular框架中subscribe函数外部访问变量为undefined问题咨询

问题根因 #

这是JavaScript/Angular中异步任务执行顺序的特性导致的：

• apiService.getData()返回的是Observable对象，调用subscribe()仅完成了「成功、失败、执行完成」三个回调函数的注册，不会阻塞主线程执行，代码会立刻往后走，执行subscribe外面的最后一行console.log(this.observance)。
• 此时HTTP请求还在后台发送，还没有触发成功回调执行this.observance的赋值逻辑，因此打印结果为undefined。
• subscribe内部的回调是等HTTP请求拿到响应结果后才会异步触发，此时已经完成了变量赋值，所以内部打印能拿到正常数据。
• 额外说明：你代码中错误回调里的console.log(this.observance)也是拿不到值的，触发错误时不会走成功回调的赋值逻辑，打印结果同样为undefined。

解决方案 #

如果后续逻辑需要依赖接口返回的this.observance数据，推荐两种处理方案：

1. 把依赖this.observance的逻辑放到subscribe的成功回调/完成回调中执行，保证赋值完成后再触发对应逻辑：

this.apiService.getData("observance/patient/" + this.patient.id).subscribe(
  x => {
    this.observance = JSON.parse(x.body);
    // 所有用到observance的后续逻辑都放在这里调用
    doSomethingWithObservance(this.observance);
  },
  err => {
    console.log("Aucune observance récupéré.");
  },
  () => {
    // 也可以放到完成回调里，成功失败都会触发，按需选择即可
  }
)

2. 如果你更习惯同步写法，可以把Observable转成Promise配合async/await使用：

// 注意外层函数需要添加async修饰符
async fetchObservanceData() {
  try {
    const res = await this.apiService.getData("observance/patient/" + this.patient.id).toPromise();
    this.observance = JSON.parse(res.body);
    console.log(this.observance); // 此处可以正常拿到赋值后的值
  } catch (err) {
    console.log("Aucune observance récupéré.");
  }
}

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