如何在TypeScript中使用async/await

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");
}

- Kupi

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");
    }
}

希望这可以帮到您。

- Amid

---

我尝试了两种方式，但都没有成功，this.theme 没有被赋值。控制台中没有记录“AFTER ASYNC”。如果我在 getTheme() 方法中放置一个 console.log("int method")，它也不会在控制台中记录。 - Kupi

我将 getTheme 的内容更改为仅在控制台中记录一些内容并返回 Promise.resolve()，而不是 Observable<Theme>，这样就可以正常工作了。但是，如果我正常使用它而不是在 async/await 中使用，那么 getTheme 方法也可以正常工作。 - Kupi

好的。你能否将getTheme的内容替换为类似于rx.Observable.just(123)的返回值，并查看它是否有效？ - Amid

当我返回一个Observable时，他仍然显示日志，但是一旦我尝试使用“.take(1).toPromise()”获取observable的值，它就不会记录“AFTER SYNC”消息。 - Kupi

目前，TypeScript 只支持将代码编译为 ES6 才能使用 async/await，这并不是一个问题。 - Amid