RunKit: Await Documentation

<!DOCTYPE html> <html> <head> <title>RunKit: Await Documentation</title> <script src="https://static.runkitcdn.com/assets/vendor/jquery/jquery.min.js"></script> <script src="https://static.runkitcdn.com/assets/vendor/bootstrap/bootstrap.min.js?v=4.1.3"></script> <meta name="keywords" content="RunKit REPL tonic endpoint playground javascript node npm module prototype prototyping API server" /> <meta name="author" content="runkit.com" /> <meta name="description" content="RunKit notebooks are interactive javascript playgrounds connected to a complete node environment right in your browser. Every npm module pre-installed."> <meta name="viewport" content="width=device-width, initial-scale=0.5"> <link type="application/opensearchdescription+xml" rel="search" title="RunKit" href="https://static.runkitcdn.com/search.xml"/> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Sans:400,700|Ubuntu+Mono:400|Roboto:300,400,700" type="text/css"> <link rel="stylesheet" href="https://static.runkitcdn.com/assets/vendor/font-awesome/css/font-awesome.min.css" /> <link rel="stylesheet" href="https://static.runkitcdn.com/assets/styles/codemirror.css"/> <link rel="stylesheet" href="https://themes.runkitcdn.com/runkit-light.css?v=ce0f1cbf00545d68f7a212bb4a3cb3a4aac49d35" /> <link rel="stylesheet" href="https://static.runkitcdn.com/assets/vendor/bootstrap/bootstrap.min.css?v=4.1.3"/> <link rel="stylesheet" href="https://static.runkitcdn.com/assets/styles/base.css?v=ce0f1cbf00545d68f7a212bb4a3cb3a4aac49d35"/> <link rel="stylesheet" href="https://static.runkitcdn.com/assets/styles/static.css?v=ce0f1cbf00545d68f7a212bb4a3cb3a4aac49d35"/> <link rel="stylesheet" href="https://static.runkitcdn.com/assets/vendor/photon/icons.min.css"> </head> <body class="static-page"> <header> <nav class="primary-nav navbar navbar-expand-sm navbar-light"> <div class="container justify-content-between"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="logo navbar-brand" href="/home">RunKit</a> </li> </ul> <ul class="navbar-nav secondary-links text-right navbar-right"> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="navbar-nav"> <li class="nav-item"><a class="nav-link" href="https://discuss.runkit.com">Forum</a></li> <li class="nav-item"><a class="nav-link" href="http://blog.runkit.com/">Blog</a></li> <li class="nav-item"><a class="nav-link" href="/docs">Documentation</a></li> <li class="nav-item"><a class="nav-link" href="/explore">Explore</a></li> </ul> </div> <div class="navbar-user-menu-container"> <li class="nav-item"><a class="nav-link" href="/login"><span class="signin">Sign in</span></a></li> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar"> <span class="navbar-toggler-icon"></span> </button> </div> </ul> </div> </nav> </header> <div id="main-content"> <div class="page-wrapper"> <link rel = "stylesheet" href = "https://static.runkitcdn.com/assets/styles/await.css" /> <div id="content"> <section> <div class="section-container"> <div class="documentation-full">  <h2>Cleaning up your asynchronous code with <code>await</code></h2> <p>REPLs have traditionally had a difficult time allowing you to interact with asynchronous code since they encourage a coding style where you evaluate expressions and use those results in the next field. But if you are using promises or callbacks, this breaks down because these results exist only in the callback, not the next line:</p> </div> <div class="example-full"> <div id="ex-0"></div> </div> <div class="documentation-full"> <p>In RunKit, you can use top-level <code>await</code> to get the same behavior of synchronous code.</p> </div> <div class="example-full"> <div id="ex-1"></div> </div> </div> <div class="section-container"> <div class="documentation-full"> <p>Now we can treat this code as synchronous, despite the fact that the code is still executing asynchronously.</p> <p>Let's look how. It helps to have a more complex example, where we need to do a few asynchronous operations in sequence. You can see how <code>await</code>, promises and callbacks achieve the same results, but the <code>await</code> style works better in a REPL:</p> </div> <div class="tabs example-full"> <div class="tabs"> <nav class="tabs-navigation"> <ul class="tabs-menu"> <li class="tabs-menu-item is-active" onclick="selectTab(this, 'await')"> await </li> <li class="tabs-menu-item" onclick="selectTab(this, 'promises')"> promises </li> <li class="tabs-menu-item" onclick="selectTab(this, 'callbacks')"> callbacks </li> </ul> </nav> <div id="await" class="tab-view is-active"> <p>Here, we use <code>await</code> on lines 4 and 8, and the results from each request remain in scope.</p> <div id="ex-2"></div> </div> <div id="promises" class="tab-view"> <p>Promises appear to be cleaner than nested callbacks, but not without a new syntax and scope confusion caused by passed functions.</p> <div id="ex-3"></div> </div> <div id="callbacks" class="tab-view"> <p>When using callbacks, the error, body and response are only in the callback's scope, so we nest a second callback to perform another <code>got</code> call using data returned from the first.</p> <div id="ex-4"></div> </div> </div> </div> </div> <div class="section-container"> <div class="documentation-full"> <p>Remember, <code>await</code> expects a <code>promise</code> so you can either write your own or use one of the many libraries that natively supports promises, and npm is full of packages that add promise support to existing libraries. Here are a few of our favorites:</p> <ul> <li><b><a href="https://npm.runkit.com/fs-promise">fs-promise</a></b> - promise based filesystem api</li> <li><b><a href="https://npm.runkit.com/request-promise">request-promise</a></b> - a wrapper around "request" for http stuff</li> <li><b><a href="https://npm.runkit.com/glob-promise">glob-promise</a></b> - glob style filesystem queries</li> <li><b><a href="https://npm.runkit.com/bluebird">bluebird</a></b> - general promise library with lots of utilities</li> </ul> </div> </div> <div class="section-container"> <div class="documentation-full"> <h3>Further Reading</h3> <ul> <li><a href="http://rossboucher.com/await">ES7 Async/Await presented at Brookyln.js</a></li> <li><a href="https://babeljs.io">Babel.js</a></li> <li><a href="https://github.com/lukehoban/ecmascript-asyncawait/">ECMAScript's Proposal for async/await</a></li> <li><a href="https://esdiscuss.org/notes/2014-01-30#async-await">ES Meeting Notes discussing on async/await</a></li> <li><a href="https://esdiscuss.org/topic/does-async-await-solve-a-real-problem">Does async/await Solve a Real Problem?</a></li> <li><a href="https://thomashunter.name/blog/the-long-road-to-asyncawait-in-javascript/">The Long Road to async/await in JavaScript</a></li> <li><a href="https://www.twilio.com/blog/2015/10/asyncawait-the-hero-javascript-deserved.html">async/await: The Hero JavaScript Deserved</a></li> </ul> </div> </div> </section> </div> <script src="https://embed.runkit.com" type="text/javascript" charset="utf-8"></script> <script src="https://static.runkitcdn.com/assets/await.js" type="text/javascript" charset="utf-8" async defer></script> </div> </div> <footer> <div> <a href="https://twitter.com/runkitdev"><img src="https://static.runkitcdn.com/assets/images/integrations/twitter.svg" title="twitter" height="16" /></a> </div> <div id="copy"> © 2024 runkit • <a href="/s/privacy">privacy</a> · <a href="/s/terms">terms</a> · <a href="/s/acceptable-use">acceptable use</a> · <a href="/about">about</a> · <a href="/jobs">jobs</a> · <a href="http://blog.runkit.com">blog</a> · <a href="https://discuss.runkit.com">forum</a> </div> </footer> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-65519033-1', 'auto'); ga('send', 'pageview'); </script> </body> </html>

CINXE.COM

RunKit: Await Documentation