asynchronous - 如何在打字稿中使用异步/等待

Question

我想http.get从我的方法中调用一个方法ThemeService并使其尽可能“同步”，以便在它Theme从调用中获取后它是连续的。我搜索了如何做到这一点，并偶然发现了asyncand await。我试图实现这一点，但它并不完全奏效。我console.log()在代码中放了一些，所以我可以看到什么是执行的，什么没有执行。“IN ASYNC FUNCTION”和“AFTER ASYNC”被执行，但不是在我调用之后/中的那些ThemeService。

因为我对async/await打字稿中的功能不熟悉，所以我不知道我写的内容是否糟糕，或者我想要做的事情是否可行。

ngOnInit():void{
    let id = +this.routeParams.get('themeId');
    async function getTheme(){
        console.log("IN ASYNC FUNCTION");
        var val =  await this.themeService.getTheme(id).subscribe((theme:Theme)=> {
            this.theme = theme;
            console.log("IN AWAIT FUNCTION")
        });
        console.log("AFTER AWAIT");
        return val;
    }

    getTheme();
    console.log("AFTER ASYNC");
}

Answer 1

你可以这样（注意'take(1).toPromise()'的用法）：

ngOnInit():void
{
    let id = +this.routeParams.get('themeId');
    async function getTheme()
    {
        console.log("IN ASYNC FUNCTION");
        var val =  await this.themeService.getTheme(id).take(1).toPromise();
        console.log("AFTER AWAIT");
        return val;
    }

    this.theme = await getTheme();
    console.log("AFTER ASYNC");
}

或者更短一点：

class MyComponent implements OnInit
{
    async ngOnInit() 
    {
        let id = +this.routeParams.get('themeId');
        this.theme = await this.themeService.getTheme(id).take(1).toPromise();
        console.log("AFTER ASYNC");
    }
}

希望这可以帮助。