我在 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);
}
)
}}
最佳答案
你应该使用 RxJS
mergeMap
,它做的事情和你在这里期望的一样。一个接一个地进行 OR 链接调用。
在你的例子中,在 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
版本中都会发生变化
导入 'rxjs/add/operator/mergeMap';
希望对您有所帮助。
关于angular - 在 ngOnInit 上同步调用函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50408279/