{"id":2201,"date":"2015-11-03T12:53:23","date_gmt":"2015-11-03T20:53:23","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/typescript\/?p=2201"},"modified":"2019-04-30T13:04:17","modified_gmt":"2019-04-30T21:04:17","slug":"what-about-async-await","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/typescript\/what-about-async-await\/","title":{"rendered":"What about Async\/Await?"},"content":{"rendered":"

We\u2019ve heard your feedback that you\u2019re excited about async\/await in TypeScript. Async\/await allows developers to write to asynchronous code flows as if they were synchronous, removing the need for registering event handlers or writing separate callback functions. You may have seen similar patterns in C#. TypeScript\u2019s async\/await pattern makes use of Promises, much like C#\u2019s async\/await pattern<\/a> leverages Tasks. Promises<\/a> are objects that represent ongoing asynchronous actions and are a built-in feature of ECMAScript 6 (ES6). TypeScript\u2019s async\/await is implemented as proposed for ES2016 (aka ES7)<\/a>.<\/p>\n

We\u2019re happy to announce that you can already use async\/await today if you\u2019re targeting Node.js v4 or later! In this post, we\u2019ll show you how and give you an update on async\/await\u2019s progress.<\/p>\n

How async\/await works<\/strong><\/p>\n

JavaScript is single-threaded and sequential: once your function starts running, it can\u2019t be interrupted before it runs to completion. For most tasks, this is exactly what the developer expects and wants. However, when an asynchronous task (such as a call to a web service) is running, it\u2019s more efficient to allow the rest of the JavaScript to continue running while you wait for the task to return. Async\/await allows you to call asynchronous methods much the same way you\u2019d call a synchronous method, but without blocking for the asynchronous operations to complete.<\/p>\n

For example, in the code below, main<\/span> awaits on the result of the asynchronous function ping<\/span>. Because main<\/span> awaits, it\u2019s declared as an async function. The ping<\/span> function awaits on the delay<\/span> function in a loop, so it\u2019s declared as async as well. The delay<\/span> function calls setTimeout<\/span> to return a Promise after a certain amount of time. When setTimeout<\/span>\u2019s promise returns, you\u2019ll see \u2018ping\u2019 on the console.<\/p>\n

async<\/span> function<\/span> main() {<\/span>\n\u00a0await<\/span> ping();<\/span>\n}<\/span><\/p>\n

async<\/span> function<\/span> ping() {<\/span>\n\u00a0for<\/span> (var<\/span>\u00a0i = 0; i < 10; i++) {<\/span>\n\u00a0\u00a0await<\/span> delay(300);<\/span>\n\u00a0\u00a0console.log(“ping”);<\/span>\n\u00a0}<\/span>\n}<\/span><\/p>\n

function<\/span> delay(ms: number<\/span>) {<\/span>\n\u00a0return<\/span> new<\/span> Promise(resolve => setTimeout(resolve, ms));<\/span>\n}<\/span><\/p>\n

main();<\/span><\/p>\n

 <\/p>\n

TypeScript uses ES6 generators<\/a> to implement the ability to re-enter a function at a given point when an asynchronous call returns. Generators use the yield<\/span> keyword to tell the JavaScript runtime when control is being given up while a function waits for something to happen. When that something happens, the JavaScript runtime then continues the function execution from where control was yielded. For the sample above, the TypeScript compiler emits the below ES6 JavaScript for the ping<\/span> function.<\/p>\n

function<\/span> ping() {<\/span>\n\u00a0return<\/span> __awaiter(this<\/span>, void<\/span> 0, Promise, function<\/span>* () {<\/span>\n\u00a0\u00a0for<\/span> (var<\/span>\u00a0i = 0; i < 10; i++) {<\/span>\n\u00a0\u00a0\u00a0yield<\/span> delay(300);<\/span>\n\u00a0\u00a0\u00a0console.log(“ping”<\/span>);<\/span>\n\u00a0\u00a0}<\/span>\n\u00a0});<\/span>\n}<\/span><\/p>\n

The__awaiter<\/span> function wraps the function body, including the yield<\/span> statement, in a Promise that executes the function as a generator.<\/p>\n

Trying it out with Node.js<\/strong><\/p>\n

Starting with nightly builds, TypeScript 1.7 now supports async\/await for ES6 targets. You can install the latest nightly build of TypeScript using <\/span>npm install typescript@next<\/span> and try it with Node.js v4 or beyond, which has support for ES6 generators. Here\u2019s how your <\/span>tsconfig.json<\/span> would look like:<\/p>\n

\"compilerOptions\"<\/span>: {<\/span>\r\n\u00a0 \"target\"<\/span>: \"ES6\"<\/span>,<\/span>\r\n\u00a0 \"module\": \"commonjs\"<\/span><\/span><\/span>\r\n}<\/span><\/pre>\n
The compiled JavaScript output can then run in Node.js:<\/p>\n
\"\"<\/p>\n
Next steps<\/strong><\/p>\n
We know that many TypeScript developers want to write async\/await code for browsers as well as for Node.js and understand that using a temporary solution based on additional transpiliation layer is not optimal either from a developer workflow perspective or due to the performance impact it causes with the extra compilation overhead. To target the breadth of browsers, we need to rewrite ES6 generator functions into ES5-executable JavaScript using a state machine. It\u2019s a big challenge that requires significant changes across the compiler, but we\u2019re working on it. Stay tuned; we\u2019ll keep you up to date on our progress!<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
We\u2019ve heard your feedback that you\u2019re excited about async\/await in TypeScript. Async\/await allows developers to write to asynchronous code flows as if they were synchronous, removing the need for registering event handlers or writing separate callback functions. You may have seen similar patterns in C#. TypeScript\u2019s async\/await pattern makes use of Promises, much like C#\u2019s […]<\/p>\n","protected":false},"author":378,"featured_media":1797,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2201","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-typescript"],"acf":[],"blog_post_summary":"
We\u2019ve heard your feedback that you\u2019re excited about async\/await in TypeScript. Async\/await allows developers to write to asynchronous code flows as if they were synchronous, removing the need for registering event handlers or writing separate callback functions. You may have seen similar patterns in C#. TypeScript\u2019s async\/await pattern makes use of Promises, much like C#\u2019s […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/posts\/2201","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/users\/378"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/comments?post=2201"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/posts\/2201\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/media\/1797"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/media?parent=2201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/categories?post=2201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/tags?post=2201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
If you\u2019re targeting Node.js v4 or later, try out async\/await today. We\u2019ve created a more complex sample using the GitHub API to asynchronously retrieve history on a repo. You can find the source on the TypeScriptSamples repo<\/a> and run it in Node.js. We\u2019d love to hear your feedback and\u00a0if you find issues, please let us know<\/a>. One other thing to keep in mind: Node.js doesn\u2019t yet support ES6 modules, so choose CommonJS module output when compiling your TypeScript, as indicated in the tsconfig.json<\/span> above<\/span>.<\/span><\/p>\n