学习Promise之前你必须理解的知识点:异步处理的通用模型
上一篇中提到了回調(diào)地獄的問題,ES6為了解決多層回調(diào),提高代碼的可閱讀性,提出了一套異步的通用模型,這一部分對理解promise很重要
1.兩個階段
該模型中,將一件可能發(fā)生異步操作的事情分為兩個階段:unsettled 和 settled
- unsettled:未解決階段,表示事情還在進行前期的處理,并沒有發(fā)生通向結(jié)果的那件事
- settled:已解決階段,事情已經(jīng)有了一個結(jié)果,不管這個結(jié)果是什么,整件事情無法逆轉(zhuǎn)
【注】事情總是從為解決階段逐步發(fā)展到以解決階段的,并且未解決階段擁有控制何時通向已解決階段
舉個例子來說明一下,某天小明去超市購物,選好商品以后,小明來到收銀臺,一邊掏出手機準備支付,一邊排隊等待結(jié)賬(異步),此時事件為未解決階段,且等待的時間控制著事件何時進入已解決階段。當小明之前的客人均結(jié)賬后,輪到小明結(jié)賬,此時會出現(xiàn)幾種結(jié)果:1)小明的余額充足,成功結(jié)賬,小明美滋滋;2)小明的余額不足,尷了個尬,小明表示我原本很快樂,是沒錢害了我;3)收銀臺的機器出現(xiàn)問題,小明不能買單(此時系統(tǒng)報錯,相當于將事件推向了rejected,后面詳細講)。接下來康康小明shopping的代碼吧
//小明去購物 function goShopping() {console.log('小明挑選商品');console.log('小明等待結(jié)賬');setTimeout(() => {console.log('小明開始結(jié)賬');if (Math.random()>0.5) { //表示小明的余額足夠結(jié)賬console.log('小明的余額充足,成功結(jié)賬,小明表示美滋滋');} else {console.log('小明的余額不足,尷了個尬,小明表示我原本很快樂,是沒錢害了我');}}, 1000); } goShopping();2.三種狀態(tài)
ES6將事情劃分為三種狀態(tài),pending,resolved,rejected
- pending:掛起,處于未解決階段,表示這件事情的最終結(jié)果還沒有出來
- resolved:已處理,以解決階段的一種狀態(tài),表示整件事情已經(jīng)出現(xiàn)結(jié)果,并且是一個可以按照正常邏輯進行下去的結(jié)果
- rejected:已拒絕,已解決階段的一種狀態(tài),表示整件事情已經(jīng)出現(xiàn)了結(jié)果,并且是一個無法按照正常邏輯進行下去的結(jié)果,通常用于表示有一個錯誤
【注】
1)未解決階段可以決定事情最終的狀態(tài);
2)我們把事情變?yōu)閞esolved狀態(tài)的過程叫做resolve,推向該狀態(tài)時可能會傳遞一些數(shù)據(jù);
3)我們把事情變?yōu)閞ejected狀態(tài)的過程叫做reject,推向該狀態(tài)時可能會傳遞一些數(shù)據(jù),通常為錯誤信息;
這里我們再來參照小明購物的例子,從小明開始購物開始,這件事情是一個未解決階段,是一個掛起過程,并且隨著小明挑選商品購物等等,開始逐步發(fā)展向已解決階段。當輪到小明買單時,會出現(xiàn)三種情況:余額充足成功支付,余額不足無法支付,系統(tǒng)報錯未建立連接。根據(jù)三種情況我們分析,前兩種屬于按照正常邏輯處理,即resolved狀態(tài),而第三種屬于未按照正常邏輯處理,系統(tǒng)拒絕給小明結(jié)賬,即rejected狀態(tài)。這里需要注意的點是,由于余額不足導致的未成功支付不屬于rejected,因為該情況是按照正常的邏輯執(zhí)行完的。
【注】無論是階段還是狀態(tài),都是不可逆的
3.后續(xù)處理
當事情達到已解決階段后,通常需要進行后續(xù)處理,不同的以解決狀態(tài)決定了不同的后續(xù)處理
- resolved狀態(tài):這是一個正常的以解決狀態(tài),后續(xù)處理表示為thenable
- rejected狀態(tài):這是一個非正常的以解決狀態(tài),后續(xù)處理表示為catchable
【注】后續(xù)處理可能有多個,因此形成作業(yè)隊列,這些后續(xù)處理會按照順序,當狀態(tài)到達后依次執(zhí)行
總結(jié)
以上是生活随笔為你收集整理的学习Promise之前你必须理解的知识点:异步处理的通用模型的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 原生JS封装自己的AJAX
- 下一篇: Promise第一篇:基本使用方法和串联