Angular에서 Observable의 비동기 응답을 어떻게 처리합니까?

Angular에서 Observable/http/async 호출의 응답을 어떻게 반환합니까?

문제:

Angular의 서버에서 데이터 검색 Observable을 사용하려고 시도하면 정의되지 않은 초기 값이 발생할 수 있습니다. 즉시.

서비스:

@Injectable()
export class EventService {
  ...
  getEventList(): Observable<any> {
    ...
    return this.http.get(...).map(...).catch(...);
  }
}

구성 요소:

export class EventComponent {
  myEvents: any;
  ngOnInit() {
    this.es.getEventList().subscribe((response) => {
      this.myEvents = response;
    });
    console.log(this.myEvents); // Initially undefined
  }
}

이유:

HTTP 요청은 비동기식입니다. 즉, console.log( this.myEvents) 행은 응답 전에 실행됩니다. 도착합니다.

해결책:

구독 콜백을 사용하여 응답이 도착한 후에만 응답을 처리합니다.

ngOnInit() {
  this.es.getEventList().subscribe((response) => {
    this.myEvents = response;
    console.log(this.myEvents); // Not undefined
  });
}

고려 사항:

• 수행 데이터가 수신될 때 구독 콜백 내의 모든 작업 도착합니다.
• 비동기 작업은 응답을 기다리는 동안 인터페이스가 정지되는 것을 방지한다는 점을 인식하세요.
• 이 접근 방식은 Promise 기반 비동기 프로그래밍의 then 콜백과 유사합니다.

위 내용은 Angular에서 Observable의 비동기 응답을 어떻게 처리합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!