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

Question

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

因为我是 typescript 中 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");
    }
}

希望这会有所帮助。