Angular 6中无法在subscribe()方法外部使用获取到的数据

这是一个非常典型的异步操作时序问题，我来给你拆解清楚：

首先你要明白：Angular的HttpClient.get()发起的是异步HTTP请求——也就是说，当你调用这个方法时，浏览器会先发送请求，然后不等待请求返回，直接继续执行后面的代码。

看你的代码实际执行顺序：

1. 调用getMasterObj()，执行this.http.get(this.url1)发起网络请求；
2. 立刻执行外部的console.log(this.masterChartObj1)——这时候请求还在网络传输中，数据根本没返回，masterChartObj1自然是undefined；
3. 过了一会儿，HTTP请求成功返回数据，subscribe里的回调函数才会被触发，这时候this.masterChartObj1 = data才会执行，所以内部的console.log能正常打印数据。

你尝试用parent_scope = this的写法其实没必要，因为箭头函数已经帮你绑定了外部的this，两种写法里的内部赋值都是生效的，问题根源还是异步时序的问题。

解决办法 #

你需要把依赖masterChartObj1的逻辑放在数据返回之后执行，这里给你几种常见的处理方式：

1. 在subscribe回调内部处理数据（最直接）

把所有需要用到masterChartObj1的代码都放到subscribe的回调里，或者调用一个专门的处理方法：

getMasterObj () { 
  this.http.get(this.url1).subscribe( (data) =>{ 
    this.masterChartObj1 = data; 
    console.log(this.masterChartObj1); // 数据正常打印
    // 在这里处理数据，比如渲染图表、更新视图等
    this.renderChart();
  })
}

private renderChart() {
  // 这里可以安全使用this.masterChartObj1
  console.log('渲染图表使用的数据：', this.masterChartObj1);
}

2. 使用async/await（更像同步写法）

把Observable转换成Promise，用async/await等待请求完成：

async getMasterObj () { 
  try {
    // 把Observable转成Promise
    this.masterChartObj1 = await this.http.get(this.url1).toPromise();
    console.log(this.masterChartObj1); // 数据正常打印
    // 后续逻辑可以直接写在这里
  } catch (error) {
    console.error('请求失败了：', error);
  }
}

3. 使用RxJS操作符（适合复杂数据流场景）

如果后续还有更多RxJS操作，可以用tap操作符在数据流中赋值，然后在subscribe里处理后续逻辑：

import { tap } from 'rxjs/operators';

getMasterObj () { 
  this.http.get(this.url1)
    .pipe(
      tap(data => {
        this.masterChartObj1 = data;
        console.log(this.masterChartObj1); // 数据正常打印
      })
    )
    .subscribe(() => {
      // 这里执行后续逻辑
    });
}

总结一下：异步操作的核心就是不要在等待结果的代码外面去访问还没被赋值的变量，一定要等异步操作完成（也就是回调触发后）再处理数据。

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