await原理 js_「速围」Node.js V14.3.0 发布支持顶级 Await 和 REPL 增强功能
本周，Nodejs v14.3.0 發布。這個版本包括添加頂級 Await、REPL 增強等功能。
REPL 增強
通過自動補全改進對 REPL 的預覽支持，例如，下圖中當輸入 process.ver 之后，不需要輸入剩下的實際內容，它幫我們生成了自動補全的輸入預覽。
頂級 Await 支持
不再需要更多的 "async await, async await..." 支持在異步函數之外使用 await 關鍵字。
REPL 環境下應用
在 REPL 環境下做了一個測試，似乎并沒有正常工作，得到了一些錯誤，這是為什么呢？
根據規范，僅支持在 ES Modules 模塊中可用，參考 tc39/proposal-top-level-awai
我們不能提供 “--input-type=module” 這樣的標志到 REPL 環境， 這一次在 node 后加上標志 --experimental-repl-await 看以下示例，現在它可以正常工作了。
ES Modules 下應用
Nodejs 在版本 v13.2.0 取消了標記 --experimental-module 可以直接使用 ES Modules。
一種使用方式是文件后綴名使用 .mjs，另一種使用方式是還使用原來的 .js 文件，但是要設置 package.json 的 type=module，詳情可以去官網查看 nodejs.org/api/esm.html
1. 創建 index.mjs
以下示例中我們使用 setTimeout 模擬了一個 sleep 函數，在指定的延遲時間下打印輸出。
const?sleep?=?(millisecond,?value)?=>?{??return?new?Promise(resolve?=>?setTimeout(()?=>?resolve(value),?millisecond));};const?val1?=?await?sleep(1000,?'Output?hello?after?1?second.');console.log(val1);const?val2?=?await?sleep(2000,?'Output?Nodejs?after?1?second.');console.log(val2);2. 運行 index.mjs
直接這樣執行，仍然會得到一個錯誤，但是看最新發布的 v14.3.0 說明，也沒有說明要提供什么標志，這一點產生了困惑。
Support for Top-Level Await
It's now possible to use the await keyword outside of async functions.
$?node?index.mjs???file:///index.mjs:5const?val1?=?await?sleep(1000,?'Output?hello?after?1?second.');?????????????^^^^^SyntaxError:?Unexpected?reserved?word在 Github issues Top-level await throws SyntaxError 上發現了一個同樣的問題，解釋了這個原因，在當前版本 v14.3.0 中運行時我們仍需要加上如下兩個標志:
--experimental_top_level_await?or?--harmony_top_level_await3. 再次運行 index.mjs
這一次運行結果是我們的期望值。
$?node?--experimental_top_level_await?index.mjsOutput?hello?after?1?second.Output?Nodejs?after?1?second.Top-level await 的用途
上面介紹了 Top-level await 該如何使用，這里說下它的用途，個人認為一個比較有用的是我們可以在文件的頭部做一些資源的初始化。
創建 initialize-mongo-instance.mjs
下面定義了一個初始化 MongoDB 實例的方法 initializeMongoInstance()
//?initialize-mongo-instance.mjsimport?mongodb?from?'mongodb';const?dbConnectionUrl?=?'mongodb+srv://:@cluster0-on1ek.mongodb.net/test?retryWrites=true&w=majority';const?{?MongoClient?}?=?mongodb;export?default?function?initializeMongoInstance?(dbName,?dbCollectionName)?{??return?MongoClient.connect(dbConnectionUrl,?{?useUnifiedTopology:?true?})????.then(dbInstance?=>?{??????const?dbObject?=?dbInstance.db(dbName);??????const?dbCollection?=?dbObject.collection(dbCollectionName);??????console.log("[MongoDB?connection]?SUCCESS");??????return?dbCollection;????}).catch(err?=>?{??????console.log(`[MongoDB?connection]?ERROR:?${err}`);??????throw?err;????});}index.mjs
例如，index.mjs 為我的啟動文件，在啟動時需要初始化上面定義的 initializeMongoInstance 方法，如果是之前只能寫在一個 async 聲明的異步函數中，現在有了 Top-level await 支持，可以直接像如下方式來寫：
import?initializeMongoInstance?from?'./initialize-mongo-instance.mjs';const?testCollection?=?await?initializeMongoInstance('dbName',?'test');Reference
- nodejs.org/en/blog/release/v14.3.0/
- github.com/tc39/proposal-top-level-await
推薦JavaScript經典實例學習資料文章
《深入細品瀏覽器原理「流程圖」》
《JavaScript 已進入第三個時代，未來將何去何從？》
《前端上傳前預覽文件 image、text、json、video、audio「實踐」》
《深入細品 EventLoop 和瀏覽器渲染、幀動畫、空閑回調的關系》
《推薦13個有用的JavaScript數組技巧「值得收藏」》
《前端必備基礎知識：window.location 詳解》
《不要再依賴CommonJS了》
《犀牛書作者：最該忘記的JavaScript特性》
《36個工作中常用的JavaScript函數片段「值得收藏」》
《Node + H5 實現大文件分片上傳、斷點續傳》
《一文了解文件上傳全過程(1.8w字深度解析)「前端進階必備」》
《【實踐總結】關于小程序掙脫枷鎖實現批量上傳》
《手把手教你前端的各種文件上傳攻略和大文件斷點續傳》
《字節跳動面試官：請你實現一個大文件上傳和斷點續傳》
《談談前端關于文件上傳下載那些事【實踐】》
《手把手教你如何編寫一個前端圖片壓縮、方向糾正、預覽、上傳插件》
《最全的 JavaScript 模塊化方案和工具》
《「前端進階」JS中的內存管理》
《JavaScript正則深入以及10個非常有意思的正則實戰》
《前端面試者經常忽視的一道JavaScript 面試題》
《一行JS代碼實現一個簡單的模板字符串替換「實踐」》
《JS代碼是如何被壓縮的「前端高級進階」》
《前端開發規范：命名規范、html規范、css規范、js規范》
《【規范篇】前端團隊代碼規范最佳實踐》
《100個原生JavaScript代碼片段知識點詳細匯總【實踐】》
《關于前端174道 JavaScript知識點匯總(一)》
《關于前端174道 JavaScript知識點匯總(二)》
《關于前端174道 JavaScript知識點匯總(三)》
《幾個非常有意思的javascript知識點總結【實踐】》
《都2020年了，你還不會JavaScript 裝飾器？》
《JavaScript實現圖片合成下載》
《70個JavaScript知識點詳細總結(上)【實踐】》
《70個JavaScript知識點詳細總結(下)【實踐】》
《開源了一個 JavaScript 版敏感詞過濾庫》
《送你 43 道 JavaScript 面試題》
《3個很棒的小眾JavaScript庫，你值得擁有》
《手把手教你深入鞏固JavaScript知識體系【思維導圖】》
《推薦7個很棒的JavaScript產品步驟引導庫》
《Echa哥教你徹底弄懂 JavaScript 執行機制》
《一個合格的中級前端工程師需要掌握的 28 個 JavaScript 技巧》
《深入解析高頻項目中運用到的知識點匯總【JS篇】》
《JavaScript 工具函數大全【新】》
《從JavaScript中看設計模式(總結)》
《身份證號碼的正則表達式及驗證詳解(JavaScript，Regex)》
《瀏覽器中實現JavaScript計時器的4種創新方式》
《Three.js 動效方案》
《手把手教你常用的59個JS類方法》
《127個常用的JS代碼片段，每段代碼花30秒就能看懂-【上】》
《深入淺出講解 js 深拷貝 vs 淺拷貝》
《手把手教你JS開發H5游戲【消滅星星】》
《深入淺出講解JS中this/apply/call/bind巧妙用法【實踐】》
《手把手教你全方位解讀JS中this真正含義【實踐】》
《書到用時方恨少，一大波JS開發工具函數來了》
《干貨滿滿!如何優雅簡潔地實現時鐘翻牌器(支持JS/Vue/React)》
《手把手教你JS 異步編程六種方案【實踐】》
《讓你減少加班的15條高效JS技巧知識點匯總【實踐】》
《手把手教你JS開發H5游戲【黃金礦工】》
《手把手教你JS實現監控瀏覽器上下左右滾動》
《JS 經典實例知識點整理匯總【實踐】》
《2.6萬字JS干貨分享，帶你領略前端魅力【基礎篇】》
《2.6萬字JS干貨分享，帶你領略前端魅力【實踐篇】》
《簡單幾步讓你的 JS 寫得更漂亮》
《恭喜你獲得治療JS this的詳細藥方》
《談談前端關于文件上傳下載那些事【實踐】》
《面試中教你繞過關于 JavaScript 作用域的 5 個坑》
《Jquery插件(常用的插件庫)》
《【JS】如何防止重復發送ajax請求》
《JavaScript+Canvas實現自定義畫板》
《Continuation 在 JS 中的應用「前端篇」》
作者：五月君 Nodejs技術棧
轉發鏈接：https://mp.weixin.qq.com/s/tNjbpD3paVKxHmo5bq5QIw
總結
以上是生活随笔為你收集整理的await原理 js_「速围」Node.js V14.3.0 发布支持顶级 Await 和 REPL 增强功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 扩张型心肌病预后差什么意思（扩张型心肌病
- 下一篇： easyx 备忘录_报到？上课？我被自己