angular - 在 ngOnInit 上同步调用函数
问题描述
我在 Angular 4 上工作,我在 ngOnInit() 上立即运行了很多不同的函数。其中大多数是带有回调的 http 请求,它们处理数据并将其传递给下一个函数。
目前我正在使用 setTimeouts,以确保一切都按正确的顺序进行。但是,它并不总是正确的,例如互联网连接速度较慢。我想确保一切都按正确的顺序进行,没有超时。 为此,我研究了 Promise 和异步等待,但我无法将它实现到我的应用程序中,因为 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
, 它执行您期望的相同操作。在另一个或链接之后进行一个 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';
希望能帮助到你。
推荐阅读
- apache-camel - Apache Camel 支持 HDFS 或 Azure Blob FileSystem (Gen2) 中的 parquet
- java - Selenium 中是否有办法通过单击 iFrame 中的按钮来克服 Safari 浏览器的同源策略?
- android - 警报对话框不会通过滑行加载图像
- javascript - 在 dijit 日历中默认禁用星期日
- ios - 整个应用程序的尾随 UILabel 错误开始随机出现
- bash - 一次断开后,Raspberry Pi 无法连接到蓝牙
- python-3.x - 获取非等距信号的最小周期
- node.js - 运行服务时找不到模块'@angular/compiler'
- power-automate - Power Automate 每个发票编号发送一封电子邮件
- javascript - 如何在 Codeigniter 中删除 %20