JS中如何優(yōu)雅的使用async await詳解
jQuery的$.ajax
在開始之前我們先來聊聊我的js異步之路。在我還在學(xué)校的時候,那時候還是 jQuery 的天下,我直接接觸到并且經(jīng)常使用的異步操作就是網(wǎng)絡(luò)請求,一手 $.ajax 走天下,伴我過了大二到畢業(yè)后差不多大半年的時間。
$.ajax( "/xxx" ) .done(function() { // success !!! do something... }) .fail(function() { // fail !!! do something... }) .always(function() { // loading finished.. });
不可否認(rèn),$.ajax 這個東西還是挺好使的,在面對大部分場景只有一個請求的情況下,完全勝任甚至覺得很棒
但是有個大大的問題,那就是面對請求鏈的時候就會特別特別的糟心,比如一個請求依賴于另一個請求的結(jié)果,兩個可能還無所謂,要是五個八個的,可能想要直接自殺。。。
$.ajax('/xxx1') .done(function() { // success !!! do something... $.ajax('/xxx2') .done(function() { // success !!! do something... $.ajax('/xxx3') .done(function() { // success !!! do something... $.ajax('/xxx4') .done(function() { // success !!! do something... $.ajax('/xxx5') .done(function() { // success !!! do something... // more... }) .fail(function() { // fail !!! do something... }) .always(function() { // loading finished.. }); }) .fail(function() { // fail !!! do something... }) .always(function() { // loading finished.. }); }) .fail(function() { // fail !!! do something... $.ajax('/xxx6') .done(function() { // success !!! do something... $.ajax('/xxx7') .done(function() { // success !!! do something... // more.... }) .fail(function() { // fail !!! do something... }) .always(function() { // loading finished.. }); }) .fail(function() { // fail !!! do something... }) .always(function() { // loading finished.. }); }) .always(function() { // loading finished.. }); }) .fail(function() { // fail !!! do something... }) .always(function() { // loading finished.. }); }) .fail(function() { // fail !!! do something... }) .always(function() { // loading finished.. });
抱歉,我不知道你可以套這么多層。。。,但事實就是TM經(jīng)常出現(xiàn)這樣的流程,大伙兒說說,這不能怪產(chǎn)品吧???只能怪自己學(xué)藝不精
像這樣鏈?zhǔn)讲僮?,我覺得吧,是個人可能都是奔潰的,先不說代碼的可讀性,就拿天天在變化的產(chǎn)品需求來說,也許先前是 請求1 結(jié)束之后緊接著 請求2 、 請求3 ,后面產(chǎn)品大手一揮,我覺得這個流程不大對,后面就變成了 請求2、 請求3 、 請求1,這尼瑪套娃怎么改?可能有人會有疑問,為啥不用 axios 、 await 、async 呢?這個就不得不提項目代碼是08年開寫的JSP了。。。。在整了大半年的屎上拉屎以后,迎來了大大的轉(zhuǎn)機(jī),新寫的項目開始往 Vue 上面轉(zhuǎn),并且放棄一部分兼容性,我TM直接起飛。。。
Webpack時代的開始
新的項目直接Vue + Webpack,我直接就給安排上 axios 、 await 、async ,現(xiàn)在代碼非常好使,嵌套N層的代碼沒了
const r1 = await doSomthing1(); if (r1.xxx === 1) { const r2 = await doSomthing2(r1); const r3 = await doSomthing3(r2); // do something.... } else { const r4 = await doSomthing4(r1); const r5 = await doSomthing5(r4); // do something.... } // do something....
但是上面的代碼存在一個問題,如果某個任務(wù)報錯,那么代碼直接就終止了。。。這樣不符合我們的預(yù)期啊,那我們加上 try catch
let r1; try { r1 = await doSomthing1(); } catch (e) { // do something... return; } if (r1) { if (r1.xxx === 1) { let r2; try { r2 = await doSomthing2(r1); } catch (e) { // do something... return; } if (r2) { let r3; try { r3 = await doSomthing3(r2); } catch (e) { // do something... return; } // do something... } } else { let r4; try { r4 = await doSomthing4(r1); } catch (e) { // do something... return; } if (r4) { let r5; try { r5 = await doSomthing5(r4); } catch (e) { // do something... return; } } // do something... } // do something... }
???
優(yōu)化了,等于沒優(yōu)化。。。
這時候我想聰明的小伙伴可能會說了,這是啥煎餅玩意兒。而呆滯的小伙伴已經(jīng)開始想怎么解決這樣的問題了。。。
深入了解Promise
我們來看一下 Promise 的定義
/** * Represents the completion of an asynchronous operation */ interface Promise<T> { /** * Attaches callbacks for the resolution and/or rejection of the Promise. * @param onfulfilled The callback to execute when the Promise is resolved. * @param onrejected The callback to execute when the Promise is rejected. * @returns A Promise for the completion of which ever callback is executed. */ then<TResult1 = T, TResult2 = never>(onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | undefined | null): Promise<TResult1 | TResult2>; /** * Attaches a callback for only the rejection of the Promise. * @param onrejected The callback to execute when the Promise is rejected. * @returns A Promise for the completion of the callback. */ catch<TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | undefined | null): Promise<T | TResult>; }
then 和 catch 都會返回一個新的 Promise ,我相信很多小伙伴都已經(jīng)想到了怎么解決方法,需要使用 try catch 是因為它會報錯,那我們返回一個 永遠(yuǎn)不會報錯的結(jié)果 不就行了?說干就干
消滅嵌套
function any(promise) { return promise.then((v) => v).catch((_) => null); }
這樣就完全解決了啊???通過判斷是否有值來判斷是否成功,就不用再寫 try catch 了,但是這樣的代碼有點不大好使,如果 then 返回的是一個 void 那么就完犢子了,一個 undefined 一個 null ,這還判斷個錘子,我們再來改進(jìn)一下
function any(promise) { return promise .then((v) => ({ ok: v, hasErr: false })) .catch((e) => ({ err: e, hasErr: true })); }
使用的話
const r = await any(doSomething()); if (r.hasErr) { console.log(r.err); return; } console.log(r.ok);
現(xiàn)在看起來是不是很完美呢,趕緊和小伙伴推銷一下。
小伙伴:???這啥煎餅玩意兒,不用不用。
我:這個我寫的,在異步中用起來很好使的,告別嵌套 try catch ,巴拉巴拉。。。
小伙伴:好的,下次一定用。
大家肯定有遇到過這樣的情況,大家寫的代碼互相看不起,只要不是三方庫,大家都是能不用同事寫的就不用。。。
await-to-js
我都以為只有我一人欣賞,這一份優(yōu)雅。事情出現(xiàn)轉(zhuǎn)機(jī),某天我正在刷github,發(fā)現(xiàn)了一個和我差不多異曲同工之妙的東西 await-to-js ,幾行代碼透露了和我一樣的執(zhí)著
// 下面是最新的代碼 /** * @param { Promise } promise * @param { Object= } errorExt - Additional Information you can pass to the err object * @return { Promise } */ export function to<T, U = Error> ( promise: Promise<T>, errorExt?: object ): Promise<[U, undefined] | [null, T]> { return promise .then<[null, T]>((data: T) => [null, data]) .catch<[U, undefined]>((err: U) => { if (errorExt) { Object.assign(err, errorExt); } return [err, undefined]; }); } export default to;
再貼上使用示例
import to from 'await-to-js'; // If you use CommonJS (i.e NodeJS environment), it should be: // const to = require('await-to-js').default; async function asyncTaskWithCb(cb) { let err, user, savedTask, notification; [ err, user ] = await to(UserModel.findById(1)); if(!user) return cb('No user found'); [ err, savedTask ] = await to(TaskModel({userId: user.id, name: 'Demo Task'})); if(err) return cb('Error occurred while saving task'); if(user.notificationsEnabled) { [ err ] = await to(NotificationService.sendNotification(user.id, 'Task Created')); if(err) return cb('Error while sending notification'); } if(savedTask.assignedUser.id !== user.id) { [ err, notification ] = await to(NotificationService.sendNotification(savedTask.assignedUser.id, 'Task was created for you')); if(err) return cb('Error while sending notification'); } cb(null, savedTask); } async function asyncFunctionWithThrow() { const [err, user] = await to(UserModel.findById(1)); if (!user) throw new Error('User not found'); }
是不是感覺回來了,嵌套不再。。。
為了讓小伙伴用上一行的代碼,我只能忍痛推薦 await-to-js ,發(fā)上github地址,小伙伴:八百多star (ps: 現(xiàn)在2K+) 質(zhì)量可靠,看了一下示例,嗯嗯,很不錯,很完美,后面。。。后面的事不用我多說了,我自己寫的也全換成了 await-to-js 。。。
我待世界如初戀,初戀卻傷我千百遍
總結(jié)
我實現(xiàn)的版本其實存在著一點點問題的,在JS這樣 靈活 的語言中,我改了返回值,別人就能直接抄我的家,類型不夠嚴(yán)謹(jǐn),要是放TS里,那就只能說一點小毛病,新加了 ok 、 err 、 hasErr 增加了一小點點case,但并不致命
await-to-js 中一點點的設(shè)計哲學(xué),為啥把錯誤放在數(shù)組的第一個位置,而不是把成功放在第一個位置,就很明示:永遠(yuǎn)謹(jǐn)記錯誤,把錯誤放在第一位,而不是很 自信 成功,就忘記錯誤的慘痛。
const [, result] = await to(iWillSucceed());
參考資料
到此這篇關(guān)于JS中如何優(yōu)雅的使用async await的文章就介紹到這了,更多相關(guān)JS優(yōu)雅使用async await內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序模板消息限制實現(xiàn)無限制主動推送的示例代碼
這篇文章主要介紹了微信小程序模板消息限制實現(xiàn)無限制主動推送的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08Webpack實現(xiàn)按需打包Lodash的幾種方法詳解
這篇文章主要給大家介紹了關(guān)于Webpack實現(xiàn)按需打包Lodash的幾種方法,文中介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。2017-05-05webpack5的entry和output配置小白學(xué)習(xí)
這篇文章主要為大家介紹了webpack5的entry和output使用配置小白學(xué)習(xí)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05基于javascript實現(xiàn)按圓形排列DIV元素(二)
本篇文章主要介紹基于javascript實現(xiàn)按圓形排列DIV元素的方法,此文著重于介紹怎樣實現(xiàn)的按圓形排列DIV元素的運(yùn)動原理和實現(xiàn)效果代碼,需要的朋友來看下吧2016-12-12js中json對象和字符串的理解及相互轉(zhuǎn)化操作實現(xiàn)方法
這篇文章主要介紹了js中json對象和字符串的理解及相互轉(zhuǎn)化操作實現(xiàn)方法,結(jié)合實例形式分析了json對象與字符串的功能以及相互轉(zhuǎn)換操作實現(xiàn)技巧,需要的朋友可以參考下2017-09-09