如何在异步 HTTP 调用后正确访问 Angular Observable 中的数据？

如何从 Angular 中的 Observable/HTTP/Async 调用返回响应

问题：

可观察返回通过异步调用获取数据，但由于异步的本质，访问数据会导致未定义的结果

服务：

@Injectable()
export class EventService {

  constructor(private http: Http) { }

  getEventList(): Observable<any>{
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    return this.http.get("http://localhost:9999/events/get", options)
                .map((res)=> res.json())
                .catch((err)=> err)
  }
}

组件：

@Component({...})
export class EventComponent {

  myEvents: any;

  constructor( private es: EventService ) { }

  ngOnInit(){
    this.es.getEventList()
        .subscribe((response)=>{
            this.myEvents = response;
        });

    console.log(this.myEvents); //This prints undefined!
  }
}

原因：

异步操作需要时间才能完成，但 JavaScript 会执行立即同步代码。 console.log(this.myEvents);在接收到来自服务器的数据之前执行。

解决方案：

使用订阅回调来处理响应到达后的情况：

this.es.getEventList()
    .subscribe((response)=>{
        this.myEvents = response;
        console.log(this.myEvents); //<-- not undefined anymore
    });

结论：

处理异步操作回调或订阅函数以在收到数据后访问数据。这可确保数据不是未定义或为空。

以上是如何在异步 HTTP 调用后正确访问 Angular Observable 中的数据？的详细内容。更多信息请关注PHP中文网其他相关文章！