TypeScript 中的 async/await 语法是如何工作的？

Question

我对 C# 的 async/await 非常熟悉，并且使用 TypeScript 已经一年左右了，谁能举一个简单的例子来解释它在 TypeScript 中是如何工作的？

如果该示例包含 Angular/jQuery 承诺，这将非常有帮助，因为它将提供一个实际实现的清晰视图。

Answer 1

关键是使用ES6 Promise 或实现lib.d.ts (Read more) 中的PromiseLike 和PromiseConstructorLike 接口的东西。一个 jQuery 承诺 does not implement 这些接口，所以它不会与这些接口一起工作。

这是一个使用 ES6 承诺的简单示例：

function getStringFromWebServerAsync(url: string) {
    return new Promise<string>((resolve, reject) => {
        // note: could be written `$.get(url).done(resolve).fail(reject);`,
        //       but I expanded it out for clarity
        $.get(url).done((data) => {
            resolve(data);
        }).fail((err) => {
            reject(err);
        });
    });
}

async function asyncExample() { 
    try {
        const data = await getStringFromWebServerAsync("http://localhost/GetAString");
        console.log(data);
    }
    catch (err) {
        console.log(err);
    }
}

asyncExample();

请注意，任何包含await 语句的代码都需要在async 函数中，因此我将代码封装在一个函数中。也就是说，即将到来的提案增加了“顶级等待”，它将在 TypeScript 3.8 中可用。阅读更多 here 和 see here for TypeScript details。

Answer 2

请注意，您需要在 Typescript 1.7 中以 ES6 为目标才能使用 async/await。对于较低版本，Visual Studio 输出

TS1308 'await' expression is only allowed within an async function.

和

TS1311 Async functions are only available when targeting ECMAScript 6 and higher.

有关更多信息，请参阅例如http://blogs.msdn.com/b/typescript/archive/2015/11/03/what-about-async-await.aspx