Blog Eleven Labs - Async / await

相关文章推荐

逃跑的生菜 · 10個有用的jQuery編寫技巧 - iT ...· 1 年前 ·

细心的苹果 · 数据库er图设计_数据库er图_mysql数 ...· 3 年前 ·

眼睛小的大葱 · LocalDateTime格式化日期年份错误 ...· 3 年前 ·

至今单身的橙子 · NodeJs中的stream（流）- ...· 3 年前 ·

</noscript><div id="root"><div class="flex-column@xs display-flex@xs min-height-screen@xs"><header class="bg-azure header"><div class="items-center@xs justify-between@xs display-flex@xs py-s@xs px-m@xs px-l@md"><a hreflang="fr" class="color-white" href="/fr/"><div class="items-center@xs justify-center@xs display-flex@xs logo header__logo"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 41 36" height="1em"><g fill="currentColor" fill-rule="evenodd"><path d="M29.22 13.78a.947.947 0 0 1-1.334-.092.947.947 0 0 1 .092-1.332l3.89-3.298a.947.947 0 0 1 1.332.092c.341.392.3.991-.09 1.332l-3.89 3.298zm-.156 6.345a2.86 2.86 0 0 1 .947-1.72c.357-.31 1.726-1.49 1.76-1.52 2.194-1.914 5.91-8.042 8.101-11.837.627-1.085-.446-2.358-1.62-1.924-4.122 1.518-10.8 4.155-13.014 6.04-.034.027-1.405 1.207-1.763 1.514a2.87 2.87 0 0 1-1.842.683c-5.946.07-7.7 2.397-7.7 2.397l.773.806s3.451-.5 5.402 1.768l-1.645 1.407.992 1.151-1.143.985 2.136 2.562.222-.276-.987-2.693 2.47 2.837.58-.499-.727-3.136s1.235 1.338 1.967 2.184c1.953 2.264.897 5.648.897 5.648l.684.884s2.561-1.39 3.51-7.26z"/><path d="M18.775 34.14c-5.796.313-10.983-2.426-14.105-6.751-.16-.221.109-.493.334-.34 3.956 2.727 10.24 1.913 14.299-5.48C-1.168 27.268 1.372 1.358 17.879 1.594c5.779.082 10.86 3.028 13.752 7.579l.056-.048c.339-.294.844-.336 1.203-.068a.948.948 0 0 1 .066 1.467l-.385.333a16.21 16.21 0 0 1 1.59 7.408c-.197 8.447-6.948 15.422-15.386 15.877M17.879 0C8.019 0 0 8.02 0 17.879c0 9.858 8.019 17.878 17.878 17.878 9.858 0 17.878-8.02 17.878-17.878S27.737-.001 17.879-.001"/></g></svg><div class="logo__blog">Eleven LabsLe blog</div></div></a><button class="header__icon-button" aria-label="Open search"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" class="icon color-white" height="1em" width="1em" style="font-size:28px"><path fill="currentColor" d="M15.006 13.805h-.633l-.224-.216a5.18 5.18 0 0 0 1.257-3.386 5.203 5.203 0 1 0-5.203 5.203 5.18 5.18 0 0 0 3.386-1.257l.216.224v.633L17.807 19 19 17.807l-3.994-4.002Zm-4.803 0a3.597 3.597 0 0 1-3.602-3.602 3.597 3.597 0 0 1 3.602-3.602 3.597 3.597 0 0 1 3.602 3.602 3.597 3.597 0 0 1-3.602 3.602Z"/></svg></button></div></header><main class="flex-1@xs"><div class="container container--global"><div class="container container--content"><a data-internal-link="back" class="color-amaranth items-center@xs display-flex@xs text-m link" href="/fr/"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" class="icon" height="1em" width="1em"><path fill="currentColor" d="M19 11.125H8.351l4.891-4.891L12 5l-7 7 7 7 1.234-1.234-4.883-4.891H19v-1.75Z"/></svg>Retour</a><div class="mt-s@xs mt-xl@md text-xs"><h1 class="heading-xl">Async / await</h1><div class="flex-column@xs flex-row@md display-flex@xs mt-xxs-3@md"><div class="color-dark-grey items-center@xs display-flex@xs mt-xxs@xs mt-0@md"><div class="items-center@xs display-flex@xs"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" class="icon" height="1em" width="1em" style="font-size:24px"><path fill="currentColor" d="M17.6 6.273h-.7V5h-1.4v1.273h-7V5H7.1v1.273h-.7c-.77 0-1.4.572-1.4 1.272v10.182c0 .7.63 1.273 1.4 1.273h11.2c.77 0 1.4-.573 1.4-1.273V7.545c0-.7-.63-1.272-1.4-1.272Zm0 11.454H6.4V9.455h11.2v8.272Z"/></svg>6 nov. 2019</div><div class="items-center@xs display-flex@xs ml-s@xs"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" class="icon" height="1em" width="1em" style="font-size:24px"><path fill="currentColor" d="M11.993 5A6.997 6.997 0 0 0 5 12c0 3.864 3.129 7 6.993 7A7.004 7.004 0 0 0 19 12c0-3.864-3.136-7-7.007-7ZM12 17.6A5.598 5.598 0 0 1 6.4 12c0-3.094 2.506-5.6 5.6-5.6s5.6 2.506 5.6 5.6-2.506 5.6-5.6 5.6Z"/><path fill="currentColor" d="M12 9h-1v4l3.5 2.1.5-.82-3-1.78V9Z"/></svg>11mn</div></div><div class="color-dark-grey items-center@xs display-flex@xs mt-xxs-2@xs mt-0@md ml-xxs-3@md"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" class="icon" height="1em" width="1em" style="font-size:24px"><path fill="currentColor" d="M12 12c1.934 0 3.5-1.566 3.5-3.5S13.934 5 12 5a3.499 3.499 0 0 0-3.5 3.5c0 1.934 1.566 3.5 3.5 3.5Zm0 1.75c-2.336 0-7 1.172-7 3.5V19h14v-1.75c0-2.328-4.664-3.5-7-3.5Z"/></svg><a hreflang="fr" data-internal-link="author" class="color-amaranth items-center@xs display-flex@xs ml-xxs-3@xs link" href="/fr/authors/mehdidr/">Mehdi Druon</a></div></div></div><hr class="bg-light-grey mt-xs@xs divider divider--s"/><div class="items-center@xs justify-end@xs gap-xs@xs display-flex@xs my-m@xs share-links"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" class="icon color-black share-links__copy-icon" tabindex="0" role="button" data-button="copyLink" height="1em" width="1em" style="font-size:26"><path fill="currentColor" d="M8.445 16.463a2.172 2.172 0 0 1 0-3.069l1.98-1.98-.94-.94-1.98 1.98a3.501 3.501 0 0 0 4.949 4.95l1.98-1.98-.94-.94-1.98 1.98a2.172 2.172 0 0 1-3.07 0Zm2.524-1.534 3.96-3.96-.99-.99-3.96 3.96.99.99Zm1.485-7.425-1.98 1.98.94.94 1.98-1.98a2.172 2.172 0 0 1 3.07 0 2.172 2.172 0 0 1 0 3.07l-1.98 1.98.94.94 1.98-1.98a3.501 3.501 0 0 0 0-4.95 3.501 3.501 0 0 0-4.95 0Z"/></svg><button data-share-link="true" data-sharing="twitter" aria-label="twitter" class="react-share__ShareButton" style="background-color:transparent;border:none;padding:0;font:inherit;color:inherit;cursor:pointer"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 22 22" class="icon share-links__social-media-icon" height="1em" width="1em" style="font-size:26px"><path fill="#50abf1" d="M0 0h22v22H0z"/><path fill="#fff" d="M2.914 16.309a9.419 9.419 0 0 0 5.063 1.464c5.23 0 9.472-4.238 9.472-9.468 0-.133-.004-.262-.008-.39.188-.15 1.36-1.087 1.645-1.692 0 0-.95.398-1.879.488-.004 0-.004.004-.008.004l.004-.004c.086-.059 1.285-.875 1.45-1.844 0 0-.673.356-1.614.672-.156.05-.32.102-.488.149a3.323 3.323 0 0 0-5.664 3.023c-.254-.012-4.16-.23-6.82-3.45 0 0-1.587 2.169.949 4.4 0 0-.774-.032-1.438-.427 0 0-.242 2.625 2.625 3.297 0 0-.562.215-1.465.063 0 0 .504 2.12 3.055 2.32 0 0-2.016 1.82-4.879 1.395Zm0 0"/></svg></button><button data-share-link="true" data-sharing="facebook" aria-label="facebook" class="react-share__ShareButton" style="background-color:transparent;border:none;padding:0;font:inherit;color:inherit;cursor:pointer"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 22 22" class="icon share-links__social-media-icon" height="1em" width="1em" style="font-size:26px"><path fill="#3b5998" d="M20.719 21.926c.668 0 1.207-.54 1.207-1.203V1.28c0-.668-.54-1.207-1.207-1.207H1.28A1.207 1.207 0 0 0 .074 1.281v19.442c0 .664.54 1.203 1.207 1.203Zm0 0"/><path fill="#fff" d="M15.152 21.926v-8.461h2.84l.426-3.3h-3.266V8.058c0-.954.266-1.606 1.633-1.606h1.746v-2.95a24.05 24.05 0 0 0-2.543-.128c-2.52 0-4.242 1.535-4.242 4.36v2.43H8.898v3.3h2.848v8.46Zm0 0"/></svg></button><button data-share-link="true" data-sharing="linkedIn" aria-label="linkedin" class="react-share__ShareButton" style="background-color:transparent;border:none;padding:0;font:inherit;color:inherit;cursor:pointer"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 22 22" class="icon share-links__social-media-icon" height="1em" width="1em" style="font-size:26px"><path fill="#0084b1" d="M0 0h22v22H0z"/><path fill="#fff" d="M5.176 3.34a1.857 1.857 0 0 1 1.84 1.848c-.004 1.058-.883 1.859-1.852 1.835-.98.02-1.84-.8-1.84-1.843a1.85 1.85 0 0 1 1.852-1.84ZM6.25 18.656H4.09a.507.507 0 0 1-.508-.508v-9.21c0-.278.227-.504.508-.504h2.16c.277 0 .504.226.504.504v9.21a.506.506 0 0 1-.504.508Zm12.426-6.988a3.495 3.495 0 0 0-3.496-3.496h-.555a3.109 3.109 0 0 0-2.719 1.605c-.02-.004-.027-.004-.027-.004V8.645a.213.213 0 0 0-.211-.211H8.973a.21.21 0 0 0-.211.21v9.801a.21.21 0 0 0 .21.211h2.755c.113 0 .21-.093.21-.21V12.78c0-.976.778-1.789 1.758-1.8.5-.008.953.195 1.282.519.32.324.52.77.52 1.262v5.687a.21.21 0 0 0 .21.207l2.758.004c.117 0 .21-.098.21-.21Zm0 0"/></svg></button></div><section class="text-s"><div class="">Après avoir vu en profondeur comment fonctionnent les promesses et comment les utiliser, nous allons nous pencher sur une fonctionnalité arrivée avec l'ES7 : <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">async/await</code>. <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">Async</code> await nous permet de résoudre un problème né de l'utilisation de code asynchrone en javascript : le <a href="http://callbackhell.com/" rel="nofollow noreferrer" style="overflow-wrap:anywhere" class="color-amaranth items-center@xs display-flex@xs link">callback hell</a>, récurrent lorsque l'on cherche à faire de l'asynchrone de manière séquentielle. <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">Async/await</code> n'est globalement que du sucre syntaxique, qui nous permet de lire du code asynchrone comme s'il était synchrone. ⚠️ Il est important de connaître et de comprendre les promesses pour maîtriser <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">async/await</code>. Si ce n'est pas votre cas, je vous conseille de lire mon précédent <a href="https://blog.eleven-labs.com/fr/lespromessesenjavascript/" rel="nofollow noreferrer" style="overflow-wrap:anywhere" class="color-amaranth items-center@xs display-flex@xs link">article</a> qui traite justement des promesses. <h2 class="mt-l@xs mt-xl@md mb-xxs@xs mb-l@md heading-l">Définition</h2> <h3 class="mt-xs@xs mt-l@md mb-xxs@xs mb-s@md heading-m">async</h3> Mettre le mot <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">async</code> devant une fonction lui donne l'instruction de retourner une promesse. Si une erreur apparaît pendant l'exécution, la promesse est rejetée. Si la fonction retourne une valeur, la promesse est résolue avec cette valeur. Et si une promesse est retournée, elle reste inchangée. <pre class="text-xs"><div style="display:block;background:white;padding:var(--spacing-s);color:#333333;overflow-x:auto;background-color:var(--color-ultra-light-grey);border-radius:4px"><code class="language-javascript" style="white-space:pre">async function asyncFunction() { // équivaut à : return Promise.resolve('résultat'); return 'résultat'; asyncFunction().then(console.log) // "résultat"</code></div></pre> les fonctions async rendent le code beaucoup plus concis que l'utilisation de promesses normales : <pre class="text-xs"><div style="display:block;background:white;padding:var(--spacing-s);color:#333333;overflow-x:auto;background-color:var(--color-ultra-light-grey);border-radius:4px"><code class="language-javascript" style="white-space:pre">// Utilisation du then const makeRequest = () =&gt; getJSON() .then(data =&gt; { console.log(data) return "done" makeRequest() // Utilisation d'async const makeRequest = async () =&gt; { console.log(await getJSON()) return "done" makeRequest()</code></div></pre> <h3 class="mt-xs@xs mt-l@md mb-xxs@xs mb-s@md heading-m">await</h3> Le mot-clé <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">await</code> ne peut être utilisé qu'à l'intérieur d'une fonction async. Il nous permet d'attendre que la promesse retourne son résultat (ou une erreur) pour continuer l'exécution du code. <pre class="text-xs"><div style="display:block;background:white;padding:var(--spacing-s);color:#333333;overflow-x:auto;background-color:var(--color-ultra-light-grey);border-radius:4px"><code class="language-javascript" style="white-space:pre">async function getAsyncNumber1() // renvoie une promesse avec comme valeur un nombre async function getAsyncNumber2() // même chose que ligne du dessus const getAsyncAddition = async () =&gt; { const number1 = await getAsyncNumber1(); const number2 = await getAsyncNumber2(); return number1 + number2; Pour avoir le même résultat sans <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">await</code>, il faudrait <li class="mb-xxs@xs">soit imbriquer un <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">then()</code> dans un autre :</li> <pre class="text-xs"><div style="display:block;background:white;padding:var(--spacing-s);color:#333333;overflow-x:auto;background-color:var(--color-ultra-light-grey);border-radius:4px"><code class="language-javascript" style="white-space:pre">const getAsyncAddition = () =&gt; getAsyncNumber1().then(number1 =&gt; getAsyncNumber2().then(number2 =&gt; number1 + number2));</code></div></pre> Ce qui, vous en conviendrez, est difficile à lire. <li class="mb-xxs@xs">soit déclarer une variable dans le scope de la fonction :</li> <pre class="text-xs"><div style="display:block;background:white;padding:var(--spacing-s);color:#333333;overflow-x:auto;background-color:var(--color-ultra-light-grey);border-radius:4px"><code class="language-javascript" style="white-space:pre">const getAsyncAddition = () =&gt; { let number; return getAsyncNumber1() .then(vnumber =&gt; { number1 = vnumber1; return getAsyncNumber2(); .then(number2 =&gt; number1 + number2); Voici une liste de règles importantes à retenir sur async await : <li class="mb-xxs@xs">les fonctions async retournent une promesse.</li> <li class="mb-xxs@xs">les fonctions async utilisent une <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">Promise</code> implicite pour retourner un résultat. Même si une promesse n'est pas retournée explicitement, la fonction async fait en sorte que le code soit passé par une promesse.</li> <li class="mb-xxs@xs"><code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">await</code> bloque l'exécution du code à l'intérieur d'une fonction async. Il permet de s'assurer que la prochaine ligne soit exécutée quand la promesse est résolue. Donc si du code asynchrone est déjà en train de s'exécuter, <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">await</code> n'aura pas d'effet sur lui.</li> <li class="mb-xxs@xs">il peut y avoir plusieurs <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">await</code> à l'intérieur d'une fonction async.</li> <li class="mb-xxs@xs">Il faut bien faire attention lors de l'utilisation d'<code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">await</code> dans une boucle, car le code peut facilement s'exécuter de manière séquentielle au lieu d'être executé en parallèle.</li> <li class="mb-xxs@xs"><code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">await</code> est toujours utilisé pour une seule promesse.</li> <h2 class="mt-l@xs mt-xl@md mb-xxs@xs mb-l@md heading-l">Pourquoi utiliser async await ?</h2> On pourrait se demander pourquoi utiliser cette fonctionnalité, alors que les promesses existent déjà en JS. <li class="mb-xxs@xs">Comme vous l'avez vu avec les exemples ci-dessus, <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">async/await</code> nous permet d'avoir un code beaucoup plus concis et nous évite le callback hell.</li> <li class="mb-xxs@xs">L'utilisation d'<code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">async/await</code> permet d'améliorer la gestion d'erreur, car il est possible de gérer les erreurs synchrones et asynchrones en même temps (ce qui n'était pas le cas auparavant), notamment grâce à l'utilisation d'un <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">try/catch</code>.</li> <pre class="text-xs"><div style="display:block;background:white;padding:var(--spacing-s);color:#333333;overflow-x:auto;background-color:var(--color-ultra-light-grey);border-radius:4px"><code class="language-javascript" style="white-space:pre">const makeRequest = () =&gt; { try { getJSON() .then(result =&gt; { // this parse may fail const data = JSON.parse(result) console.log(data) // décommenter ce bloc pour gérer les erreurs asynchrones // .catch((err) =&gt; { // console.log(err) // }) } catch (err) { console.log(err) Dans cet exemple, le <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">try/catch</code> va casser si le <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">JSON.parse</code> casse car il se passe à l'intérieur d'une promesse. Il est nécessaire d'utiliser un <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">.catch()</code> sur la promesse et donc dupliquer la gestion d'erreur. Voici le même code avec <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">async/await</code> : <pre class="text-xs"><div style="display:block;background:white;padding:var(--spacing-s);color:#333333;overflow-x:auto;background-color:var(--color-ultra-light-grey);border-radius:4px"><code class="language-javascript" style="white-space:pre">const makeRequest = async () =&gt; { try { // this parse may fail const data = JSON.parse(await getJSON()) console.log(data) } catch (err) { console.log(err) Mais il est aussi possible d'utiliser un catch à l'appel de la fonction avec async/await : <pre class="text-xs"><div style="display:block;background:white;padding:var(--spacing-s);color:#333333;overflow-x:auto;background-color:var(--color-ultra-light-grey);border-radius:4px"><code class="language-javascript" style="white-space:pre">const doSomethingAsync = async () =&gt; { let result = await someAsyncCall(); return result; doSomethingAsync(). .then(successHandler) .catch(errorHandler);</code></div></pre> <li class="mb-xxs@xs">Il arrive assez souvent d'appeler une promesse (qu'on va appeler promesse1) et d'utiliser sa valeur de retour pour appeler une deuxième promesse (qui s'appelle sans surprise promesse2), pour ensuite utiliser le résultat de ces deux promesses pour appeler promesse3. Le code ressemble donc à ceci :</li> const makeRequest = () =&gt; { return promise1() .then(value1 =&gt; { // Du code return promise2(value1) .then(value2 =&gt; { // Du code return promise3(value1, value2) Il est possible ici d'englober les promesses 1 et 2 dans un <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">Promise.all</code> pour éviter d'avoir à imbriquer les promesses : <pre class="text-xs"><div style="display:block;background:white;padding:var(--spacing-s);color:#333333;overflow-x:auto;background-color:var(--color-ultra-light-grey);border-radius:4px"><code class="language-javascript" style="white-space:pre">const makeRequest = () =&gt; { return promise1() .then(value1 =&gt; { // Du code return Promise.all([value1, promise2(value1)]) .then(([value1, value2]) =&gt; { // Du code return promise3(value1, value2) Le problème de cette approche est qu'elle sacrifie la sémantique au profit de la lisibilité. Il n'y a aucune raison de mettre les promesses 1 et 2 dans un tableau, excepté pour éviter l'imbriquation de promesses. Ce qui est rendu beaucoup plus simple grâce à <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">async/await</code> : <pre class="text-xs"><div style="display:block;background:white;padding:var(--spacing-s);color:#333333;overflow-x:auto;background-color:var(--color-ultra-light-grey);border-radius:4px"><code class="language-javascript" style="white-space:pre">const makeRequest = async () =&gt; { const value1 = await promise1() const value2 = await promise2(value1) return promise3(value1, value2) Le debugging est rendu beaucoup plus simple grâce à l'utilisation d'<code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">async/await</code>. On peut mettre des points d'arrêts contrairement à l'utilisation de promesses. Il est possible d'utiliser <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">await</code> sur des opérations synchrones et asynchrones. Par exemple, écrire <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">await 5</code> revient à écrire <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">Promise.resolve(5)</code>. <h2 class="mt-l@xs mt-xl@md mb-xxs@xs mb-l@md heading-l">Top-level await</h2> Avant de passer à la conclusion, j'aimerais aborder un sujet qui est encore en draft (au stage 3, donc probablement bientôt disponible !) au moment où j'écris ces lignes : le top-level <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">await</code>. Le top-level <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">await</code> permet aux modules d'agir comme des fonctions async. Il était possible auparavant d'importer un module dans une fonction async, mais un problème se posait : l'<code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">export</code> de ce module pouvait être accessible avant que la fonction async soit résolue. Cela pouvait poser problème car si un autre module importe le module présent dans la fonction async, le résultat était potentiellement <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">undefined</code>. Un article écrit par Rich Harris a cependant mis en avant certaines craintes à propos de cette nouvelle proposition, notamment: <li class="mb-xxs@xs">Top-level <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">await</code> pourrait bloquer l'exécution du code.</li> <li class="mb-xxs@xs">Top-level <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">await</code> pourrait bloquer le <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">fetch</code> des ressources.</li> <li class="mb-xxs@xs">Top-level <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">await</code> pourrait créer des problèmes d'intéropérabilité avec les modules <a href="https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/ch11s03.html" rel="nofollow noreferrer" style="overflow-wrap:anywhere" class="color-amaranth items-center@xs display-flex@xs link">CommonJS</a>.</li> Pour résoudre ces problématiques, la version en stage 3 propose ces solutions : <li class="mb-xxs@xs">Top-level <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">await</code> ne bloque pas les exécutions en parralèle.</li> <li class="mb-xxs@xs">Top-level <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">await</code> se produit durant la phase d'execution du module (qui correspond à la dernière phase, après l'initialization et la configuration), ce qui signifie qu'il se produit après que les ressources soient <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">fetch</code>.</li> <li class="mb-xxs@xs">Top-level <code class="bg-ultra-light-grey color-ultra-dark-grey px-xxs-2@xs text-xs">await</code> se limite aux modules, il ne supportera pas les scripts ou les modules CommonJS.</li> Une solution qui permettrait donc d'utiliser dynamiquement les modules en JavaScript mais qui soulève malgré tout plusieurs questions, car les imports impératifs sont plus lents et mauvais pour les performances d'une application que les imports déclaratifs. Pour ceux qui aimeraient avoir plus d'informations sur ces deux sujets, voici quelques ressources : <a href="https://github.com/tc39/proposal-top-level-await" rel="nofollow noreferrer" style="overflow-wrap:anywhere" class="color-amaranth items-center@xs display-flex@xs link">La proposition top-level await</a> <a href="https://gist.github.com/Rich-Harris/0b6f317657f5167663b493c722647221" rel="nofollow noreferrer" style="overflow-wrap:anywhere" class="color-amaranth items-center@xs display-flex@xs link">L'article écrit par Rich Harris: Top-level await is a footgun</a>