Для цикла после службы извлекает данные

Question

Пытаясь следовать стандартам Angular, я разделил свои данные и другую логику представления.Я создал службу с несколькими HTTP-запросами, которые запускаются при инициализации компонента:

getData() {

    this.http.get(`https://example.com/corporate/Communications/_api/web/lists/getbytitle('Corporate Announcements')/items?$orderBy=PublishDate desc&$filter=(PublishDate le '${moment().format()}' and ExpirationDate ge '${moment().format()}' and OData__ModerationStatus eq '0' and ReadyToPublish eq 'Yes' and BannerArticle eq 'Yes' and BannerExpiration ge '${moment().format()}')`).subscribe(data => {
      console.log("bannerItems", data['value']);
      this.bannerItems = data['value'];
    });

    this.http.get(`https://example.com/corporate/Communications/_api/web/lists/getbytitle('Corporate Announcements')/items?$orderBy=PublishDate desc&$filter=(PublishDate le '${moment().format()}' and ExpirationDate ge '${moment().format()}' and OData__ModerationStatus eq '0' and ReadyToPublish eq 'Yes') and (BannerArticle eq 'No' or (BannerArticle eq 'Yes' and BannerExpiration le '${moment().format()}'))`).subscribe(data => {
      console.log("announcements", data['value']);
      this.announcements = data['value'];
    });

    this.http.get(`https://example.com/divisions/Risk/_api/web/lists/getbytitle('Corporate Announcements')/items?$orderBy=ID desc&$filter=(Expires ge '${moment().format()}' and OData__ModerationStatus eq '0')`).subscribe(data => {
      console.log("riskAnnouncements", data['value']);
      this.riskAnnouncements = data['value'];
    });

    this.http.get(`https://example.com/divisions/it/servicestatus/_api/web/lists/getbytitle('Service List')/items?$orderBy=Title asc&$filter=StatusKPI ne 'Service running normally'`).subscribe(data => {
      console.log("serviceAlerts", data['value']);
      this.serviceAlerts = data['value'];
    })

    this.http.get(`https://example.com/divisions/it/servicestatus/_api/web/lists/getbytitle('Service Event History')/items?$orderBy=Title asc&$filter=(Modified ge '${moment().subtract(30, 'days').format()}' and Status eq 'Information Alert')`).subscribe(data => {
      console.log("serviceInfoAlerts", data['value']);
      this.serviceInfoAlerts = data['value'];
    })

}

В моем компоненте я пытаюсь перебрать массив serviceAlerts, однако цикл запускается до назначения данныхв массив.Как я могу заставить цикл ждать, пока все getData() не закончится, прежде чем запускать без использования setTimeout?

Answer 1

Прежде всего getData() в вашем сервисе ничего не возвращает.

Если вы следуете стандартам углового кодирования, вы будете писать разные методы для выполнения этих вызовов http (разделение и чистый код). например:

getCodeData(){ return http.get("url").pipe(handleError())
getSecondCodeData(){ return http.get("Secondurl").pipe(handleError())

Теперь перейдем к вашей проблеме получения данных всеми этими методами: Вы можете использовать RxJS ForkJoin для достижения этого эффекта:

Observable.forkJoin([
            this.myService.getCodeData(),
            this.myService.getSecondCodeData()
        ]).subscribe((results: any[]) => { 
        results[0] => will have the value from first http call and so on..
      })