Angular2服务调用的结果返回undefined，然而填充数据

12 浏览
0 Comments

Angular2服务调用的结果返回undefined，然而填充数据

我有两个Angular服务调用，其中第二个服务调用应该在第一个服务调用的结果上进行。但是我的代码根本没有执行第二个服务调用。请查看下面的代码片段。

ngOnInit(): void {

let personId: string = this._activatedRoute.snapshot.params['id'];

    this._personService.getPersonById(personId)
        .then(person => this.person = person);
    console.log(this.person); --打印undefined，但在html中正确显示数据。
    if (this.person) { 
    this._teamService.getTeamById(this.person.teamId)
            .then(teamData => this.team = teamData);
    }
}

0

2 答案

0 Comments

Angular2中，当调用服务返回undefined时，可能是因为服务调用是异步的，因此代码的其他部分不会被调用then方法的这一部分阻塞。因此控制台打印出undefined，if语句检查失败，然后在未来的某个时间，服务调用返回并执行第一个then方法（第二个then方法由于if语句的原因不会执行）。

解决方法是将if语句放在then方法中，或者研究一些避免"callback hell"的技术。

0
0 Comments

在上面的代码中，问题的原因是未使用await关键字来等待Promise返回结果。因此，控制台输出的this.person为undefined。解决方法是在_personService.getPersonById方法前添加await关键字，并在ngOnInit方法前添加async关键字。

修改后的代码如下：

public async ngOnInit() {
    await this._personService.getPersonById(personId)
        .then(person => this.person = person)
        .catch(err => console.log(err));
    console.log(this.person); 
    if (this.person) { 
        await this._teamService.getTeamById(this.person.teamId)
            .then(teamData => this.team = teamData)
            .catch(err => {
                // 处理错误
                console.log(err);
            });
    }    
}

这样修改后，通过在_personService.getPersonById方法前添加await关键字，可以确保在获取到person对象之后再执行后续的代码。这样，控制台输出的this.person将会是正确的值。

此外，如果想要使外层的函数也等待内层函数的执行，可以在外层函数前添加async关键字，并在内层函数前添加await关键字。

如果想了解更多关于async/await的用法，可以参考以下代码：

public async delay(ms: number) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
public async someFcn() {
    console.log('1');
    await this.delay(2000)
        .then(x => console.log('2'));
    console.log(3);
    await this.delay(1000)
        .then(x => console.log('4'))
        .then(x => console.log('5'));
    console.log('Done');
}

在这个例子中，通过await关键字来等待delay方法的执行结果，可以确保代码按照预期的顺序执行。

希望以上内容对您有帮助。如果您认为我的回答解决了您的问题，请考虑选择我为最佳答案。

0