摘要:想閱讀更多優質文章請猛戳博客一年百來篇優質文章等著你引入的在的異步編程中是一個極好的改進。可能會產生誤導一些文章將與進行了比較,并聲稱它是下一代異步編程風格,對此作者深表異議。結論引入的關鍵字無疑是對異步編程的改進。
想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你!
ES8 引入的 async/await 在 JavaScript 的異步編程中是一個極好的改進。它提供了使用同步樣式代碼異步訪問 resoruces 的方式,而不會阻塞主線程。然而,它們也存在一些坑及問題。在本文中,將從不同的角度探討 async/await,并演示如何正確有效地使用這對兄弟。
前置知識 async 作用是什么從 MDN 可以看出:
async 函數返回的是一個 Promise 對象。async 函數(包含函數語句、函數表達式、Lambda表達式)會返回一個 Promise 對象,如果在函數中 return 一個直接量,async 會把這個直接量通過 Promise.resolve() 封裝成 Promise 對象。
如果 async 函數沒有返回值, 它會返回 Promise.resolve(undefined)。
await 作用是什么從 MDN 了解到:
await 等待的是一個表達式,這個表達式的計算結果是 Promise 對象或者其它值(換句話說,await 可以等任意表達式的結果)。
如果它等到的不是一個 Promise 對象,那 await 表達式的運算結果就是它等到的東西。
如果它等到的是一個 Promise 對象,await 就忙起來了,它會阻塞后面的代碼,等著 Promise 對象 resolve,然后得到 resolve 的值,作為 await 表達式的運算結果。
這就是 await 必須用在 async 函數中的原因。async 函數調用不會造成阻塞,它內部所有的阻塞都被封裝在一個 Promise 對象中異步執行。async/await 的優點
async/await 帶給我們的最重要的好處是同步編程風格。讓我們看一個例子:
很明顯,async/await 版本比 promise 版本更容易理解。如果忽略 await 關鍵字,代碼看起來就像任何其他同步語言,比如 Python。
最佳的地方不僅在于可讀性。async/await 到今天為止,所有主流瀏覽器都完全支持異步功能。
本地瀏覽器的支持意味著你不必轉換代碼。更重要的是,它便于調試。當在函數入口點設置斷點并跨過 await 行時,將看到調試器在 bookModel.fetchAll() 執行其任務時暫停片刻,然后它將移動到下一個.filter 行,這比 promise 代碼要簡單得多,在 promise 中,必須在 .filter 行上設置另一個斷點。
另一個不太明顯的優點是 async 關鍵字。 async聲明 getBooksByAuthorWithAwait()函數返回值確保是一個 promise,因此調用者可以安全地使用 getBooksByAuthorWithAwait().then(...) 或await getBooksByAuthorWithAwait()。 想想下面的例子(不好的做法!):
在上述代碼中,getBooksByAuthorWithPromise 可能返回 promise(正常情況下)或 null 值(異常情況下),在異常情況下,調用者不能調用 .then()。有了async 聲明,這種情況就不會出現了。
async/await 可能會產生誤導一些文章將 async/wait 與 Promise 進行了比較,并聲稱它是 JavaScript 下一代異步編程風格,對此作者深表異議。async/await 是一種改進,但它只不過是一種語法糖,不會完全改變我們的編程風格。
從本質上說,async 函數仍然是 promise。在正確使用 async 函數之前,你必須先了解 promise,更糟糕的是,大多數時候你需要在使用 promises 的同時使用 async 函數。
考慮上面示例中的 getBooksByAuthorWithAwait() 和getbooksbyauthorwithpromise() 函數。請注意,它們不僅功能相同,而且具有完全相同的接口!
這意味著 getbooksbyauthorwithwait() 將返回一個 promise,所以也可以使用 .then(...)方式來調用它。
嗯,這未必是件壞事。只有 await 的名字給人一種感覺,“哦,太好了,可以把異步函數轉換成同步函數了”,這實際上是錯誤的。
async/await那么在使用 async/await 時可能會犯什么錯誤呢?下面是一些常見的例子。
太過串行化盡管 await 可以使代碼看起來像是同步的,但實際它們仍然是異步的,必須小心避免太過串行化。
上述代碼在邏輯上看似正確的,然而,這是錯誤的。
await bookModel.fetchAll() 會等待 fetchAll() 直到 fetchAll() 返回結果。
然后 await authorModel.fetch(authorId) 被調用。
注意,authorModel.fetch(authorId) 并不依賴于 bookModel.fetchAll() 的結果,實際上它們可以并行調用!然而,用了 await,兩個調用變成串行的,總的執行時間將比并行版本要長得多得多。
下面是正確的方式:
更糟糕的是,如果你想要一個接一個地獲取項目列表,你必須依賴使用 promises:
簡而言之,你仍然需要將流程視為異步的,然后使用 await 寫出同步的代碼。在復雜的流程中,直接使用 promise 可能更方便。
錯誤處理在 promise中,異步函數有兩個可能的返回值: resolved 和 rejected。我們可以用 .then() 處理正常情況,用 .catch() 處理異常情況。然而,使用 async/await方式的,錯誤處理可能比較棘手。
try…catch最標準的(也是作者推薦的)方法是使用 try...catch 語法。在 await 調用時,在調用 await 函數時,如果出現非正常狀況就會拋出異常,await 命令后面的 promise 對象,運行結果可能是 rejected,所以最好把await 命令放在 try...catch 代碼塊中。如下例子:
在捕捉到異常之后,有幾種方法來處理它:
處理異常,并返回一個正常值。(不在 catch 塊中使用任何 return 語句相當于使用 return undefined,undefined 也是一個正常值。)
如果你想讓調用者處理它,你可以直接拋出普通的錯誤對象,如 throw errorr,它允許你在 promise 鏈中使用 async getBooksByAuthorWithAwait() 函數(也就是說,可以像getBooksByAuthorWithAwait().then(...).catch(error => ...) 處理錯誤); 或者可以用 Error 對象將錯誤封裝起來,如 throw new Error(error),當這個錯誤在控制臺中顯示時,它將給出完整的堆棧跟蹤信息。
拒絕它,就像 return Promise.reject(error) ,這相當于 throw error,所以不建議這樣做。
使用 try...catch 的好處:
簡單,傳統。只要有Java或c++等其他語言的經驗,理解這一點就不會有任何困難。
如果不需要每步執行錯誤處理,你仍然可以在一個 try ... catch 塊中包裝多個 await 調用來處理一個地方的錯誤。
這種方法也有一個缺陷。由于 try...catch 會捕獲代碼塊中的每個異常,所以通常不會被 promise 捕獲的異常也會被捕獲到。比如:
運行此代碼,你將得到一個錯誤 ReferenceError: cb is not defined。這個錯誤是由console.log()打印出來的的,而不是 JavaScript 本身。有時這可能是致命的:如果 BookModel 被包含在一系列函數調用中,其中一個調用者吞噬了錯誤,那么就很難找到這樣一個未定義的錯誤。
讓函數返回兩個值另一種錯誤處理方法是受到Go語言的啟發。它允許異步函數返回錯誤和結果。詳情請看這篇博客文章:
How to write async await without try-catch blocks in Javascript
簡而言之,你可以像這樣使用異步函數:
[err, user] = await to(UserModel.findById(1));
作者個人不喜歡這種方法,因為它將 Go 語言的風格帶入到了 JavaScript 中,感覺不自然。但在某些情況下,這可能相當有用。
使用 .catch這里介紹的最后一種方法就是繼續使用 .catch()。
回想一下 await 的功能:它將等待 promise 完成它的工作。值得注意的一點是 promise.catch() 也會返回一個 promise ,所以我們可以這樣處理錯誤:
這種方法有兩個小問題:
它是 promises 和 async 函數的混合體。你仍然需要理解 是promises 如何工作的。
錯誤處理先于正常路徑,這是不直觀的。
結論ES7引入的 async/await 關鍵字無疑是對J avaScrip t異步編程的改進。它可以使代碼更容易閱讀和調試。然而,為了正確地使用它們,必須完全理解 promise,因為 async/await 只不過是 promise 的語法糖,本質上仍然是 promise。
原文:
https://hackernoon.com/javasc...
你的點贊是我持續分享好東西的動力,歡迎點贊!
交流干貨系列文章匯總如下,覺得不錯點個Star,歡迎 加群 互相學習。
https://github.com/qq44924588...
我是小智,公眾號「大遷世界」作者,對前端技術保持學習愛好者。我會經常分享自己所學所看的干貨,在進階的路上,共勉!
關注公眾號,后臺回復福利,即可看到福利,你懂的。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/100635.html
摘要:普通的回調函數調用執行后續邏輯使用了以后的復雜邏輯獲取到正確的結果輸出兩個文件拼接后的內容雖說解決了的問題,不會出現一個函數前邊有二三十個空格的縮進。所以直接使用關鍵字替換原有的普通回調函數即可。 從今年過完年回來,三月份開始,就一直在做重構相關的事情。 就在今天剛剛上線了最新一次的重構代碼,希望高峰期安好,接近半年的Node.js代碼重構。 包含從callback+async.w...
摘要:到目前為止,表達這種流程的基本形式是課程。按鈕依次響應并更改獲取更新的文本。事實證明不能從返回一個。可以在組件中使用本地狀態,而無需使用類。替換了提供統一,和。另一方面,跟蹤中的狀態變化確實很難。 備注:為了保證的可讀性,本文采用意譯而非直譯。 在這個 React鉤子 教程中,你將學習如何使用 React鉤子,它們是什么,以及我們為什么這樣做! showImg(https://segm...
摘要:前言對于這門語言,其實我更喜歡稱它為,從一開始我們就已經涉及到異步編程,但是多數開發者從來沒有認真思考過自己程序中的異步,到底是怎么實現的,以及為什么會出現。 前言 對于JavaScript這門語言,其實我更喜歡稱它為ECMAScript,從一開始我們就已經涉及到異步編程,但是多數JavaScript開發者從來沒有認真思考過自己程序中的異步,到底是怎么實現的,以及為什么會出現。但是由于...
摘要:原文地址原文作者翻譯作者是在版本中引入的,它對于中的異步編程而言是一個巨大的提升??赡軙a生誤導一些文章把和進行了比較,同時說它是異步編程演變過程中的下一代解決方案,對此我不敢茍同。結論在中引入的關鍵字無疑是對異步編程的一大加強。 原文地址: https://hackernoon.com/javasc...原文作者: Charlee Li 翻譯作者: Xixi20160512 asy...
閱讀 1000·2021-11-22 13:52
閱讀 1441·2021-11-19 09:40
閱讀 3122·2021-11-16 11:44
閱讀 1263·2021-11-15 11:39
閱讀 3893·2021-10-08 10:04
閱讀 5333·2021-09-22 14:57
閱讀 3096·2021-09-10 10:50
閱讀 3177·2021-08-17 10:13