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

Question

我对C#的异步/等待非常熟悉，并且已经使用TypeScript一年左右了，有人能否提供一个简单的示例来解释它在TypeScript中是如何工作的?

如果示例包括Angular/jQuery Promise，那将非常有帮助，因为它将清楚地展示实际实现。

- Pranay Dutta

---

请查看 TypeScript 上的异步函数提案：https://github.com/Microsoft/TypeScript/issues/1664。另外，还可以参考以下链接：https://smellegantcode.wordpress.com/2015/02/01/typescript-1-5-async-functions/ 和 http://www.dotnetcurry.com/javascript/1131/ecmascript6-async-using-generators-promises。 - Matija Grcic

路线图显示async/await为2.0版本：https://github.com/Microsoft/TypeScript/wiki/Roadmap（截至[7月23日](https://github.com/Microsoft/TypeScript/wiki/Roadmap/aa5e66fabe0d50ef53e6b05b3d1906a3eb40a35b)） - Jon Skeet

所以，如果你知道它不在1.6中，为什么要标记你的问题为1.6？我建议等到该功能可用（例如在2.0 beta中）- 我相信那时会有很多示例。 - Jon Skeet

@JonSkeet，这是 TypeScript 1.6 的实验性功能。https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#typescript-16 - Pranay Dutta

@JonSkeet 在1.6版本中使用--experimentalAsyncFunctions编译器选项进行实验（而且1.6 beta版本刚在周三发布）。 - David Sherret

Answer 1

重点是使用一个实现了PromiseLike和PromiseConstructorLike接口的ES6 Promise或类似物，在lib.d.ts中可以找到这些接口（阅读更多）。jQuery promise 没有实现这些接口，因此无法使用它。

以下是使用ES6 promise的简单示例：

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中可用。在这里阅读更多信息，在这里查看TypeScript详细信息。

- David Sherret

Answer 2

请注意，在使用Typescript 1.7中的async/await之前，您需要针对ES6进行目标设置。在较低版本中，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

- Zartag

---

这是一些不错的信息，但并没有真正回答这个问题。也许当你有足够的声望时，它应该被作为评论发布。 - Heretic Monkey

我非常清楚这一点，但正如你所说，我的声誉不足。对此感到抱歉。 - Zartag

针对ES6并没有什么关系，那只是一种语法糖设置。你需要指定ES6 Promise特性的正确类型，方法是在“lib”中包含“ES2015.Promise”，或者包含所有的“ES6”，这是默认针对ES6所做的。 - CervEd