davidbgk
/
larlet-fr-david-cache
Следить 1
В избранное 0
Форкнуть 0
Код Релизы 0 Активность
A place to cache linked articles (think custom and personal wayback machine)
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
126 коммитов
1 ветка
Дерево: bda0c3ac86
Ветки Теги
${ item.name }
Создать ветку ${ searchTerm }
из 'bda0c3ac86'
${ noResults }
larlet-fr-david-cache/cache/bfebf03c42d9609fef758bfc9a3.../index.html

index.html 31KB
Исходник Blame История

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>Why I’m Not Waiting On ‘await’ (part 1) (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="https://blog.getify.com/not-awaiting-1/">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   Why I’m Not Waiting On ‘await’ (part 1) (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="https://blog.getify.com/not-awaiting-1/">Source originale du contenu</a></h3>

  463.     <div>

  464. <p>Two-part series on the highs and lows of the coming <code>async..await</code> in JS:</p>

  465. <ul>

  466. <li><a href="https://blog.getify.com/not-awaiting-1">Part 1</a>: what <code>async..await</code> is and why it’s awesome</li>

  467. <li><a href="https://blog.getify.com/not-awaiting-2">Part 2</a>: why <code>async..await</code> falls short compared to generators+promises</li>

  468. </ul>

  469. </div>

  470. 

  471. <p><hr/>

  472. <hr/>

  473. <p>The hype is strong for the <code>async..await</code> syntax that’s likely getting official spec approval for ES2017, but has already <a href="https://chromium.googlesource.com/v8/v8.git/+/d08c0304c5779223d6c468373af4815ec3ccdb84">landed in v8</a> and <a href="https://blogs.windows.com/msedgedev/2015/09/30/asynchronous-code-gets-easier-with-es2016-async-function-support-in-chakra-and-microsoft-edge/">Microsoft Edge</a>, at least. And in some ways, <code>async await</code> is very promising and the hype is well deserved.</p>

  474. <p>In fact, it seems even before we got Promises in ES6, most developers were already desperately pining for <code>async function</code> so they could escape some the vagaries of the Promise API and promise chain hell. There’s no doubt that a lot of code will be improved as we move callbacks to promises, and then from promises to promise-driven <code>async function</code>s.</p>

  475. <p>But is <code>async..await</code> our long-awaited white knight? Is it really the only <em>future</em> of async flow control programming in JavaScript?</p>

  476. <p>I like the pattern that <code>async..await</code> signals. Really, I do. It’s a pattern I’ve been advocating for several years now, since even before ES6 landed. But the substance of <code>async..await</code> leaves me hanging in a few places.</p>

  477. <h3 id="why-the-hype">Why The Hype?</h3>

  478. <p>Put simply, an <code>async function</code> promotes inside it a synchronous-looking style of flow control (value resolution, error handling).</p>

  479. <p>Each asynchronous step — usually the retrieval of a value or waiting for an action to finish — is modeled with a Promise. But instead of having to <code>.then(..)</code> the promise and provide a function to receive this value/completion, the <code>await</code> keyword is able to locally block while waiting to unwrap the promise.</p>

  480. <p>It’s better to illustrate with code. Here’s three versions of the same (fictional) code, one with callbacks, one with promise chains, and the final with <code>async..await</code>.</p>

  481. <p>First, callbacks:</p>

  482. <pre class="code">

  483. function getOrderDetails(orderID,cb) {

  484.   db.find( "orders", orderID, function(err,order){

  485.     if (!err) {

  486.       db.find(

  487.         "customers",

  488.         order.customerID,

  489.         function(err,customer){

  490.           if (!err) {

  491.             order.customer = customer;

  492.             cb( null, order );

  493.           }

  494.           else cb(err);

  495.         }

  496.       );

  497.     }

  498.     else cb(err);

  499.   });

  500. }</p>

  501. <p>getOrderDetails( 1234, function(err,order){

  502.   if (!err) {

  503.     displayOrder(order);

  504.   }

  505.   else showError(err);

  506. });

  507. </pre>

  508. <hr/>

  509. <hr/>

  510. <div id="inline-vs-declaration">

  511. <p><strong>Update:</strong> Some readers expressed disdain at the usage of nested function expressions here, since it’s putting the worst light on the visual aesthetic of callbacks. That’s not actually <em>my</em> argument in this post — that they’re ugly — but I can see why it would be distracting to my overall points for those who prefer more readable callback style code.</p>

  512. <p><a href="https://gist.github.com/getify/28c586cff83516cbd2dca573eb4cb194">Here’s a comparison</a> between this version and using separate function declarations for each. I think the readability is definitely better. But, that’s just an aside; <a href="https://github.com/getify/You-Dont-Know-JS/blob/master/async%20&amp;%20performance/ch2.md#trust-issues">the virtues of promises are about far more than just nesting/indentation/readability</a>. That discussion is for <a href="https://blog.getify.com/promises-part-2/">another post</a>.</p>

  513. </div>

  514. <hr/>

  515. <hr/>

  516. <p>No sense in belaboring explanation of this code too much. That’s not really the point of the post. But do notice that error handling is intertwined with and cluttering up the flow control of data, and that we have to nest functions to express their temporal dependence (one has to start after the other finishes, etc).</p>

  517. <p>OK, now the promises version:</p>

  518. <pre class="code">

  519. function getOrderDetails(orderID) {

  520.   return db.find( "orders", orderID )

  521.     .then(function(order){

  522.       return db.find( "customers", order.customerID )

  523.         .then(function(customer){

  524.           order.customer = customer;

  525.           return order;

  526.         });

  527.     });

  528. }</p>

  529. <p>getOrderDetails( 1234 )

  530. .then( displayOrder, showError );

  531. </pre>

  532. <p>Phew! That’s a lot better.</p>

  533. <p>Crucially, we see here that the error handling part of the flow control becomes implicit (and thus hidden), which declutters the code. If any error happens at any depth of this promise chain, it’ll propagate out and get handled by <code>showError(..)</code> — we don’t need to manually push it out.</p>

  534. <p>We still have to use functions to unwrap our promises, though. And indeed, we also still have some unfortunate nesting going on. The reason the <code>then(function(customer)..</code> has to be nested instead of chained off the top-level promise chain in <code>getOrderDetails(..)</code> is because we need lexical scope access to <code>order</code> so we can combine <code>order</code> and <code>customer</code> into a single value to pass along.</p>

  535. <p>OK, so what’s <code>async..await</code> going to do for us?</p>

  536. <pre class="code">

  537. async function getOrderDetails(orderID) {

  538.   var order = await db.find( "orders", orderID );</p>

  539. <p>var customer = await db.find( "customers", order.customerID );</p>

  540. <p>order.customer = customer;

  541.   return order;

  542. }</p>

  543. <p>getOrderDetails( 1234 )

  544. .then( displayOrder, showError );

  545. </pre>

  546. <p>Wow. Just wow.</p>

  547. <p>The <code>await</code> keyword locally blocks to <em>wait</em> on the promise that <code>db.find(..)</code> gives us, meaning once it resolves, we’ll get the order we can then synchronously assign to <code>order</code>; same for <code>customer</code>.</p>

  548. <p>If either of those results in a rejected promise (generally, an error), a synchronous exception is thrown at that point in the flow of <code>getOrderDetails(..)</code>, and the rest of that function body won’t run.</p>

  549. <p>And, since <code>getOrderDetails(..)</code> is an <code>async function</code>, it makes its promise. Any uncaught exception inside it becomes a rejection of <em>that</em> promise, so we route either to <code>displayOrder(..)</code> or <code>showError(..)</code> implicitly.</p>

  550. <p>If the <code>getOrderDetails( 1234 )</code> call was itself inside an <code>async function</code>, it would use the same <code>await</code> unwrapping trick along with the ol’ synchronous, familiar <code>try..catch</code>:</p>

  551. <pre class="code">

  552. async function main() {

  553.   try {

  554.     showOrder( await getOrderDetails( 1234 ) );

  555.   }

  556.   catch (err) {

  557.     showError( err );

  558.   }

  559. }

  560. </pre>

  561. <p>The <code>await</code> unwrapping magic is nice to facilitate asynchronous function composition.</p>

  562. <p>Is the implicit error routing of the former snippet better than the explicit form here in the latter? I prefer the explicit handling at the end of the path. I like that promises implicitly pass along rejections, but at the end of the line when it’s time to handle the error, I think that explicit <code>try..catch</code> is much clearer.</p>

  563. <h3 id="have-we-seen-this-before">Have We Seen This Before?</h3>

  564. <p>Are you sold on <code>async..await</code> yet? I think they’re pretty cool.</p>

  565. <p>But as I’m a true blooded hipster, I liked this pattern before the rest of you thought it was cool.</p>

  566. <p><em>Way back in ES6</em>, we could actually do this same pattern, just with slightly different vocabulary: <strong>Generators</strong> and <strong><code>yield</code></strong> (with promises):</p>

  567. <pre class="code">

  568. function *getOrderDetails(orderID) {

  569.   var order = yield db.find( "orders", orderID );</p>

  570. <p>var customer = yield db.find( "customers", order.customerID );</p>

  571. <p>order.customer = customer;

  572.   return order;

  573. }</p>

  574. <p>run( getOrderDetails( 1234 ) )

  575. .then( displayOrder, showError );

  576. </pre>

  577. <p>What’s different from <code>async..await</code>? Well, we see that ugly <code>*</code> there instead of the prettier <code>async</code> word. We also see <code>yield</code> instead of <code>await</code>. And lastly, we see usage of <code>run(..)</code> — where the heck does that come from?</p>

  578. <p>I’ve <a href="https://github.com/getify/You-Dont-Know-JS/blob/master/es6%20&amp;%20beyond/ch4.md#generators--promises">written</a> extensively <a href="https://davidwalsh.name/async-generators">before</a> about using generators and promises to facilitate this synchronous-async pattern before, and about why that’s so important. Read those if you’re not sure what is going on in that above snippet.</p>

  579. <p>The short version is that generators don’t come out-of-the-box with knowing how to receive a <code>yield</code>ed promise and how to resume when it finishes. So we conjure a <code>run(..)</code> function that is smart enough. I won’t show the implementation of it here, but it’s listed in the first of those two links, and it’s only about 25 LoC even with comments — not too difficult, but not a detail to get tripped up on here.</p>

  580. <p>The point is, <code>run(..)</code> is a known-quantity, and can be (and is!) easily provided by various async-helper libraries so you don’t have to worry about it, but just use it.</p>

  581. <p>Of course, I think you <em>should</em> eventually learn how it works, and that’s what those other readings will teach you. But for now, let’s just use it as-is.</p>

  582. <h3 id="a-rose-by-any-other-name">A Rose By Any Other Name…</h3>

  583. <p>Is an <code>async function</code> just nicer syntactic sugar for a generator with a <code>run(..)</code> utility driving it?</p>

  584. <p><strong>No.</strong> But I can see why most people find that natural/comforting to assume.</p>

  585. <p>Let’s start with <code>yield</code> and <code>await</code>. I think it’s fair to claim that <code>yield</code> is imperative while <code>await</code> is declarative, but that may take a bit more explanation to convince you.</p>

  586. <p><code>yield</code> is inexorably connected to the process of locally pausing to <em>yield</em> control to some external facility, and, if appropriate, eventually resume the generator. The sending of a value, and the receiving of a value back, are entirely optional; the return of control is all that <em>really</em> matters. We’re imperatively saying “yield control to somewhere else and wait until its given back”. <code>yield</code> is primarily a control-transfer mechanism.</p>

  587. <p>With <code>await</code>, we’ve covered up all the mechanics and semantics of any external control involved; the engine itself does that <code>run(..)</code> work for us. As far as we’re concerned, semantically, control never leaves our local function, we just sort of sit and a<em>wait</em> for processing to finish so we can move on to the next line.</p>

  588. <p>Also, the usage of <code>await</code> seems to be a bit more focused on value semantics than <code>yield</code>. “What is this line waiting on?”” It’s waiting on a value. Would you use <code>await</code> just for pausing and not capturing any return value? I don’t think that’d be as natural, because the whole notion of transfer of control is hidden, conceptually and syntactically.</p>

  589. <p>Taking promises out of the equation for a moment, you could use <code>yield;</code> in a generator to just simply transfer control elsewhere for awhile, and neither have a value you’re sending out nor have a value you’re expecting back.</p>

  590. <p>But you can’t <code>await;</code>.</p>

  591. <p>The <code>await</code> keyword has to always explicitly be awaiting on a promise. Even if you did <code>await undefined</code> or <code>await 3</code>, those immediate values are implicitly wrapped in an already-resolved promise, which is then <code>await</code>ed.</p>

  592. <p>In other words, <code>await</code> is declarative in that it’s saying “await on this value until it’s ready”. The <em>how</em> of that is entirely hidden so we aren’t even thinking about it. Even if under the covers, the browser did exactly the same steps with <code>await</code> that would be done with a <code>yield</code>, the mental models and the syntax surface area are declarative for <code>await</code> and imperative for <code>yield</code>.</p>

  593. <p>We all like declarative forms, though. So that seems like a clear win, right?</p>

  594. <p>The downside is when a declarative form removes important functional characteristics.</p>

  595. <h3 id="just-use-both">Just Use Both?</h3>

  596. <p>In <a href="https://blog.getify.com/not-awaiting-2">part two</a> of this blog post, I’m going to explain my specific reservations of <code>async function</code>s.</p>

  597. <p>But to conclude this post, let me address the most obvious question floating in the air right now: if <code>async function</code> is nice for syntactic sugar, and generators+promises can do more powerful things when needed, why not just use both?</p>

  598. <p>We wouldn’t need a <a href="https://blog.getify.com/not-awaiting-2">part two</a> blog post if I felt the world was that easy!</p>

  599. <p>The concern I have with mixing <code>async function</code> and generator is that the composition of the two is more awkward. It’s easy from a generator to <code>yield foo()</code> if <code>foo()</code> is an <code>async function</code>, but it’s weirder from an <code>async function</code> to <code>await run( foo() )</code> if <code>foo()</code> is a generator.</p>

  600. <p>By “weirder”, I mean that it pushes that extra <code>run(..)</code> tax out to every call-site of <code>foo()</code>, but if most of your code is based around <code>async function</code>, you’re pretty likely to forget that you need to put <code>run(..)</code> in there.</p>

  601. <p>Unfortunately, you won’t necessarily detect this error like you’d expect. Since <code>await</code> automatically promise-wraps any non-promise values, it’ll just promise-wrap the iterator that comes back from your generator invocation, never having run any of the code in the generator at all! And since the value is a non-promise, the wrapped promise will immediately resolve, meaning <code>await</code> unwraps it right away.</p>

  602. <p>The take-away is that mixing the two in the same code base is going to be error-prone. I’m not just predicting… I’ve tried it, and made these mistakes. Many times.</p>

  603. <p>Check out <a href="https://blog.getify.com/not-awaiting-2">part two</a> where I explain the reasons I plan to stick with generators+promises instead of jumping on the <code>async function</code> bandwagon.</p></p>

  604.   </article>

  605. </section>

  606. 

  607. 

  608. <nav id="jumpto">

  609.   <p>

  610.     <a href="/david/blog/">Accueil du blog</a> |

  611.     <a href="https://blog.getify.com/not-awaiting-1/">Source originale</a> |

  612.     <a href="/david/stream/2019/">Accueil du flux</a>

  613.   </p>

  614. </nav>

  615. 

  616. <footer>

  617.   <div>

  618.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  619.     <p>

  620.       Bonjour/Hi!

  621.       Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>

  622.       Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).

  623.     </p>

  624.     <p>

  625.       Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.

  626.     </p>

  627.     

  628.     <p>

  629.       Voici quelques articles choisis :

  630.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  631.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  632.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  633.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  634.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  635.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  636.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  637.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  638.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  639.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  640.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  641.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  642.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  643.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  644.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  645.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  646.     </p>

  647.     <p>

  648.       On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.

  649.     </p>

  650.     <p>

  651.       Je ne traque pas ta navigation mais mon

  652.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  653.       conserve des logs d’accès.

  654.     </p>

  655.   </div>

  656. </footer>

  657. <script type="text/javascript">

  658.   ;(_ => {

  659.     const jumper = document.getElementById('jumper')

  660.     jumper.addEventListener('click', e => {

  661.       e.preventDefault()

  662.       const anchor = e.target.getAttribute('href')

  663.       const targetEl = document.getElementById(anchor.substring(1))

  664.       targetEl.scrollIntoView({behavior: 'smooth'})

  665.     })

  666.   })()

  667. </script>