Question

我正在研究Angular 4，我有很多不同的函数在ngOnInit（）上运行。其中大多数是具有回调的http请求，回调处理数据并将其传递给下一个函数。

目前我正在使用setTimeouts，以确保一切顺利。但是，它并不总是正确的，例如较慢的互联网连接。我想确保一切顺利，没有超时。为此，我调查了promises和async await，但我无法设法将它实现到我的应用程序，因为onInit上调用的函数不仅仅是http调用。我不确定我应该从当前的回调中放置代码。

我将提供一个小代码片段来说明它：

ngOnInit() {

this.getPolygons();

this.customerMasterData();
this.loadMap();

setTimeout(() => this.ngOnInitAfterTimeout(), 2000);}



getPolygons() {
this.dataService.portfolioPolygon()
  .subscribe(
    (response: Response) => {
      const data = response.json();
      const polygon = data.polygons;
      if (polygon) {
        polygon.forEach((item, index) => {
          this.polygons.push(item.polygon);
          this.polygonId.push(item.identificatie);
        });
      }
    },
    (error) => {
      this.isLoading = false;
      console.log(error);
    }
  );}


ngOnInitAfterTimeout() {
    this.winRef.nativeWindow.SetCustomLayers(this.InputArray);

    this.winRef.nativeWindow.SetStartLayers();

    this.loadMapState();

    this.cleanup();

    this.customerMasterData();}


customerMasterData() {

if (this.showAsList) {
  // LIST

  if (this.reverse == false) {
    this.sortDirection = 'A';
  } else {
    this.sortDirection = 'D';
  }

  // string used for filtering the dataset
  let filterString = "";
  if (this.portfolioCB) {
    filterString += 'portfolio-';
  }
  if (this.rentalCB) {
    filterString += 'rental-';
  }
  if (this.emergencyCB) {
    filterString += 'emergency-';
  }

  this.dataService.customerMasterData(filterString, this.order, this.sortDirection, this.datePipe.transform(this.startdate, 'dd-MM-yyyy'), this.datePipe.transform(this.enddate, 'dd-MM-yyyy'), false, this.Globalvariables.emergencyDistance, this.listPage, this.specificTime)
    .subscribe(
      (response: Response) => {
        this.listViewData = response.json();
        this.getMarkers();
        this.listPageCount = Math.ceil(this.listViewData.totalFileViewCount / 50);
        if (this.listPageCount == 0) {
          this.listPageCount = 1;
        }
      },
      (error) => {
        console.log(error);
      }
    )
} else {
//MAP

  let filterString = "";
  if (this.portfolioCB) {
    filterString += 'portfolio-';
  }
  if (this.rentalCB) {
    filterString += 'rental-';
  }
  if (this.emergencyCB) {
    filterString += 'emergency-';
  }

  this.dataService.customerMasterData(filterString, this.order, this.sortDirection, this.datePipe.transform(this.startdate, 'dd-MM-yyyy'), this.datePipe.transform(this.enddate, 'dd-MM-yyyy'), false, this.Globalvariables.emergencyDistance, null, this.specificTime)
    .subscribe(
      (response: Response) => {
        this.listViewData = response.json();
        this.getMarkers();
      },
      (error) => {
        console.log(error);
      }
    )
}}

Answer 1

您应该使用RxJS mergeMap，它会执行您期望的相同操作。在一个又一个OR Chaining之后进行一次http调用。

在您的情况下，在ngOnInit

ngOnInit() {
    this.dataService.portfolioPolygon()
      .map((response: Response) => {
          const data = response.json();
          // Do the rest
          },
       )
     .mergeMap(responseFromPortfolioPolygon => this.dataService.customerMasterData(filterString, this.order, this.sortDirection, this.datePipe.transform(this.startdate, 'dd-MM-yyyy'), this.datePipe.transform(this.enddate, 'dd-MM-yyyy'), false, this.Globalvariables.emergencyDistance, this.listPage, this.specificTime))
      .map(
       (res: Response) => res.json()
       // Do the rest
       )
       .subscribe(res => loadMap()  // CALL LOAD MAP );
}

不要忘记从正确的位置导入mergeMap，因为每个RxJS版本都会更改

import 'rxjs/add/operator/mergeMap';

希望它有所帮助。

在ngOnInit上同步调用函数

1 个答案: