Question

情景： 当我加载页面时，它会调用几个服务并将它们加载到几个组合框中。在完成加载组合框的所有服务之前，用户不能输入值。因此，当我加载此页面时，我立即启动旋转装载机，当所有服务完成后，我停止旋转装载机。为实现这一目标，我使用了类似的东西。

代码：

this.globalService.ShowLoader(true);
...
this.consultantService.getAllConsultants().then(consultants => {
    this.consultants = consultants;
}).then(() => {
    this.divisionService.getAllDivisions1().then(divisions => {
        this.divisions = divisions;
    }).then(() => {
        this.entityService.getAllEntity1().then(entities => {
            this.entities = entities;
        }).then(() => {
            this.roleService.getAllRoles1().then(roles => {
                this.roles = roles;
            }).then(() => {
                this.isLoaded = true
            })
        })
    });
})
...
ngAfterViewChecked() {
    if (this.isLoaded) {
        loadLister();
        this.globalService.ShowLoader(false)
        this.isLoaded = false
    } }

这可以，但这是一种解决方法。我需要知道这个过程是否还有其他更好的选择。任何意见将是有益的。谢谢。

Answer 1

我不完全确定你是否只是问这是否可以用更优雅的方式编写，或者是否有某些问题可以取代你的＆＃34;解决方法＆＃34 34。

假设第一个，是的，这可以写得更容易。由于异步函数之间没有依赖关系，因此可以在＆＃34; parallel＆＃34;中运行它们。而不是强迫它按顺序运行。

//Declare an empty array
var promises = [];

//Push each promise to the array
promises.push(this.consultantService.getAllConsultants());
promises.push(this.divisionService.getAllDivisions1());
promises.push(this.entityService.getAllEntity1());
promises.push(this.roleService.getAllRoles1());

//Use Promise.all() to await all promises. 
//The .all() function resolves a new promise as soon 
//as all promises in the passed array are resolved, 
//or rejects the promise if any promise is rejected
Promise.all(promises).then((results:any[]) => {
    //Results is an array that will look like
    //[consultants, divisions, entities, roles]
})
.catch(function(err){
    //Handle error
});

Answer 2

你可以试试这个：

Observable.forkJoin(
  this.consultantService.getAllConsultants(),
  this.divisionService.getAllDivisions1(),
  this.entityService.getAllEntity1(),
  this.roleService.getAllRoles1()
).subscribe(values => {
  const [consultants, divisions, entities, roles] = values;
  this.consultants = consultants;
  ....
  this.isLoaded = true;
})

您可以在此blog post查看带有可观察对象的其他替代方案。

替代此意大利面条代码

2 个答案: