비동기 HTTP 호출 후 Angular Observable의 데이터에 올바르게 액세스하는 방법은 무엇입니까?

Angular에서 Observable/HTTP/Async 호출의 응답을 반환하는 방법

문제:

Observable이 반환됩니다. 비동기 호출을 통해 데이터를 호출하지만 데이터에 액세스하면 비동기 특성으로 인해 정의되지 않은 결과가 발생합니다. 작동.

서비스:

@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
    });

결론:

내에서 비동기 작업을 처리하세요. 데이터가 수신된 후 데이터에 액세스하기 위한 콜백 또는 구독 함수. 이렇게 하면 데이터가 정의되지 않았거나 null이 아닌지 확인됩니다.

위 내용은 비동기 HTTP 호출 후 Angular Observable의 데이터에 올바르게 액세스하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!