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("開始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)文章
JS實(shí)現(xiàn)的自定義右鍵菜單實(shí)例二則
這篇文章主要介紹了JS實(shí)現(xiàn)的自定義右鍵菜單,以兩則實(shí)例形式分析了javascript自定義右鍵菜單效果的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
JavaScript設(shè)計(jì)模式發(fā)布訂閱模式
這篇文章主要介紹了JavaScript設(shè)計(jì)模式發(fā)布訂閱模式,發(fā)布訂閱設(shè)計(jì)模式是和觀察者設(shè)計(jì)模式基本上相同,但是他們兩個(gè)設(shè)計(jì)模式不同的是發(fā)布訂閱者擁有一個(gè)事件處理中心而觀察者并沒(méi)有2022-06-06
el表達(dá)式 寫入bootstrap表格數(shù)據(jù)頁(yè)面的實(shí)例代碼
這篇文章主要介紹了el表達(dá)式 寫入bootstrap表格數(shù)據(jù)頁(yè)面的實(shí)例代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下吧2017-01-01
Taro?小程序持續(xù)集成實(shí)現(xiàn)及原理
這篇文章主要為大家介紹了Taro?小程序持續(xù)集成實(shí)現(xiàn)及原理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04
簡(jiǎn)單了解微信小程序 e.target與e.currentTarget的不同
這篇文章主要介紹了微信小程序 e.target與e.currentTarget的區(qū)別詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
JavaScript 通過(guò)模式匹配實(shí)現(xiàn)重載
昨天rank同學(xué)向我提出一個(gè)問(wèn)題,在實(shí)際應(yīng)用中有些接口需要提供類似于函數(shù)重載的功能,以方便開發(fā)者組織代碼邏輯,簡(jiǎn)化使用者調(diào)用。2010-08-08
JavaScript前后端數(shù)據(jù)交互工具ajax使用教程
Ajax(Asynchronous?Javascript?And?XML),即是異步的JavaScript和XML,Ajax其實(shí)就是瀏覽器與服務(wù)器之間的一種異步通信方式2022-10-10
Vue之vue-tree-color組件實(shí)現(xiàn)組織架構(gòu)圖案例詳解
這篇文章主要介紹了Vue之vue-tree-color組件實(shí)現(xiàn)組織架構(gòu)圖案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09

