JS ES6異步解決方案
最初使用回調(diào)函數(shù)
由于最初j s官方?jīng)]有明確的規(guī)范,各種第三方庫(kù)中封裝的異步函數(shù)中傳的回調(diào)函數(shù)中的參數(shù)沒(méi)有明確的規(guī)范, 沒(méi)有明確各個(gè)參數(shù)的意義, 不便于使用。
但是node中有明確的規(guī)范
node中的的回調(diào)模式:
1. 所有回調(diào)函數(shù)必須有兩個(gè)參數(shù),第一個(gè)參數(shù)表示錯(cuò)誤,第二個(gè)參數(shù)表示結(jié)果
2. 所有回調(diào)函數(shù)必須作為函數(shù)最后的參數(shù)
3. 所有回調(diào)函數(shù)不能作為屬性出現(xiàn)
es6 異步處理模型
Es6 出現(xiàn)以后, 官方就提出了異步處理的規(guī)范, 提出了一種適用于所有異步場(chǎng)景的處理模型。該模型有:
- 兩個(gè)階段: 未決unsettled, 已決settled。
- 三個(gè)狀態(tài): pending掛起狀態(tài) , resolved成功, rejected失敗
- 總是從未決階段推向已決階段,且已決階段的狀態(tài)不再改變
任務(wù)已決狀態(tài)后可能需要后續(xù)處理,
- 針對(duì)resolved的后續(xù)處理我們稱之為thenable
- 針對(duì)rejected的后續(xù)處理我們稱之為catchable
為該異步模型量身打造的API : promise
如何使用promise
Copy
const task = new Promise((resolve, reject) => { // 任務(wù)未決階段代碼 // 立即執(zhí)行 console.log("開(kāi)始100米長(zhǎng)跑"); setTimeout(() => { if (Math.random() > 0.5) { // 成功: 跑完了 // 推向成功 resolve("跑完了"); } else { // 失?。?腿摔斷了 // 推向失敗 reject("腿摔斷了"); } }, 1000) }); task.then((result) => { console.log(result); }).catch((error) => { console.log(error); })
1s 后任務(wù)推向已決, 后續(xù)處理在then 或者 catch中 處理。
注意
pending狀態(tài) =》rejected狀態(tài) :
Copy
1. 調(diào)用reject
2. 代碼執(zhí)行報(bào)錯(cuò)
3. 手動(dòng)拋出錯(cuò)誤
后續(xù)處理函數(shù)一定是異步的,且會(huì)放到微隊(duì)列中,
j s執(zhí)行棧清空后會(huì)先執(zhí)行微隊(duì)列中的任務(wù),微隊(duì)列里任務(wù)清空后才會(huì)執(zhí)行宏隊(duì)列中的任務(wù)。
- 宏任務(wù)隊(duì)列有:setTimeout,setInterval,setImmediately,I/O,UI render
- 微任務(wù)隊(duì)列有:promise,process.nexttick,Object.observe(已經(jīng)不用了),Mutation.observe
Async await 是es7新增的promise的語(yǔ)法糖大家也可以了解下,本文只是對(duì)promise做了個(gè)概述,要掌握的其他細(xì)節(jié)還有很多
以上就是JS ES6異步解決方案的詳細(xì)內(nèi)容,更多關(guān)于ES6異步解決方案的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
jfinal與bootstrap的登出實(shí)戰(zhàn)詳解
這篇文章主要為大家詳細(xì)介紹了jfinal與bootstrap的登出實(shí)戰(zhàn),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11JavaScript函數(shù)及其prototype詳解
這篇文章主要介紹了JavaScript函數(shù)及其prototype詳解的相關(guān)資料,需要的朋友可以參考下2023-03-03countUp.js實(shí)現(xiàn)數(shù)字滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了countUp.js實(shí)現(xiàn)數(shù)字滾動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10簡(jiǎn)單實(shí)用的HTML到UBB轉(zhuǎn)換腳本工具實(shí)現(xiàn)說(shuō)明
你也許是位樂(lè)于分享的技術(shù)人員,盡管你算不上什么技術(shù)高手,但是你都希望把自己所知道的通過(guò)博客與網(wǎng)友分享。為了讓更多人知道你的經(jīng)驗(yàn),你可能會(huì)努力把博文發(fā)布到專業(yè)論壇。2009-11-11JavaScript+canvas實(shí)現(xiàn)七色板效果實(shí)例
這篇文章主要介紹了JavaScript+canvas實(shí)現(xiàn)七色板效果的方法,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript結(jié)合html5的canvas技術(shù)實(shí)現(xiàn)繪制七色板效果的相關(guān)技巧,需要的朋友可以參考下2016-02-02通過(guò)一次報(bào)錯(cuò)詳細(xì)談?wù)凱oint事件
這篇文章主要給大家介紹了關(guān)于如何通過(guò)一次報(bào)錯(cuò)詳細(xì)談?wù)凱oint事件的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-05-05HBuilderX開(kāi)發(fā)一個(gè)簡(jiǎn)單的微信小程序的實(shí)現(xiàn)步驟
本文主要介紹了HBuilderX開(kāi)發(fā)一個(gè)簡(jiǎn)單的微信小程序的實(shí)現(xiàn)步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02使用Promise解決多層異步調(diào)用的簡(jiǎn)單學(xué)習(xí)心得
下面小編就為大家?guī)?lái)一篇使用Promise解決多層異步調(diào)用的簡(jiǎn)單學(xué)習(xí)心得。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05使用bootstrap-paginator.js 分頁(yè)來(lái)進(jìn)行ajax 異步分頁(yè)請(qǐng)求示例
本篇文章主要介紹了使用bootstrap-paginator.js 分頁(yè)來(lái)進(jìn)行ajax 異步分頁(yè)請(qǐng)求示例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-03-03