Promise對象文檔閱讀筆記-入門篇

前言:來源於MDN文檔,用自己的理解水平進行二次解讀,做以下筆記。

在這裏插入圖片描述

1. 語法

new Promise( function(resolve, reject) {...} /* executor */  );

resolve和reject這對孿生兄弟的作用就是更改Promise對象的狀態(fulfilled)(rejected)

觸發resolve要手動,觸發rejected可以直接拋出一個錯誤觸發。

什麼時候調用executor函數?答:Promise構造函數執行時,等價於executor函數。

2. 描述

2.1 代理能力:

Promise 對象是一個代理對象(或者說代理一個值),在Promise對象創建時被代理的對象可能是不確定的(pending狀態),即不確定執行成功或失敗。

2.2 異步能力:

Promise 對象允許你爲異步操作的成功和失敗分別回調調用(即綁定)相應的處理方法(handlers)。這麼一來你就不需要阻塞等待它的返回,所以Promise 對象是一個能代表未來出現的結果的對象。
2.3 狀態:
pending 狀態的 Promise 對象要麼變爲fulfilled 狀態然後再傳遞一個相應的狀態處理方法(如),要麼變爲失敗狀態(rejected)但只會傳遞失敗信息而不是方法。
無論是哪種狀態,Promise 對象的 then 方法綁定的處理方法(handlers 回調函數)就會被調用(then方法包含兩個參數:onfulfilled 和 onrejected,它們都是 Function 類型。當Promise狀態爲fulfilled時,調用 then 的 onfulfilled 方法,Promise then(function onfulfilled ,function onrejected)
當Promise狀態爲rejected時,調用 then 的 onrejected 方法, 所以在異步操作的完成和綁定處理方法之間不存在競爭)。
狀態概念解析:resolved狀態=Settled狀態=fulfilled狀態 +rejected狀態

2.4 鏈式調用

由於Promise.prototype.then 和 Promise.prototype.catch 方法返回的又是一個promise 對象, 所以,從某種意義上實現鏈式調用。
在這裏插入圖片描述

3. 屬性

3.1 Promise.length

記錄着構造器參數的數目,promise中的構造器默認總是一個

3.2 Promise.prototype

Promise 構造器的原型方法

4. 方法

4.1 Promise.all(iterable)

這個方法返回一個新的promise對象。
這個新的promise對象有一個觸發成功條件:在iterable參數對象裏所有的promise對象都成功時,一旦有任何一個iterable裏面的promise對象失敗則立即觸發該promise對象的失敗。這個新的promise對象在觸發成功狀態以後,成功回調返回什麼呢?返回一個數組。
有這麼一個數組:包含iterable裏所有promise返回值(自己設置,如布爾值)
數組裏面的順序跟iterable的順序保持一致;Iterable是一個對象,包含着好多promise對象。
如果這個新的promise對象觸發了失敗狀態,它會把iterable裏第一個觸發失敗的promise對象的錯誤信息作爲它的失敗錯誤信息。
Promise.all方法常被用於處理多個promise對象的狀態集合。

4.2 Promise.race(iterable)

當iterable參數裏的任意一個子promise被成功或失敗後,父promise馬上也會用子promise的成功返回值或失敗詳情作爲參數調用父promise綁定的相應句柄,並返回父promise對象。

4.3 Promise.reject(reason)

reject返回一個狀態爲失敗的Promise對象,並將給定的失敗信息傳遞給對應的處理方法,傳遞給誰呢?

4.4 Promise.resolve(value)

resolve返回一個Promise對象,一個狀態由value決定的Promise對象。
Value是promise對象:如果value是thenable(即,帶有then方法的對象,也就是,不一定只有promise對象纔有then),那麼所決定返回的Promise對象的最終狀態由then方法執行決定;
Value不是promise對象:否則的話(該value爲空,基本類型或者不帶then方法的對象),返回的Promise對象狀態爲fulfilled,並且將該value傳遞給對應的then方法。
通常用這個方法來判斷是不是promise對象。

5. Promise 原型

5.1 屬性

Promise.prototype.constructor
返回Promise的實例函數,Promise的默認實例函數就是Promise

5.2 方法——主要體現了新舊promise繼承機制:

5.2.1 Promise.prototype.catch(onRejected)

在當前 promise對象中添加一個拒絕(rejection) 回調函數, 再將這個已經添加拒絕回調函數的新的promise返回。所以這時候就出現了舊promise與新promise的關係:

  • 1.要麼是onRejected回調函數被調用 新promise的完成結果是resolve(onRejected()) 以onRejected的返回值來resolve—— “成功調用就hook了resolve,體現了catch的概念”
  • 2.要麼是onRejected回調函數沒有調用+舊的promise 進入fulfilled:新promise的完成結果是舊的promise的完成結果(即reject()) ——“無用就默認以舊promise
    reject”

結論:成功就要catch,不成就不理會了。

5.2.2 Promise.prototype.then(onFulfilled, onRejected)

返回以個新promise:
新promise.解決(fulfillment)回調=onFulfilled
新promise.拒絕(rejection)回調=onRejected
結論:Promise.prototype.then直接在老promise基礎上定製好它的成功回調、失敗回調 作爲新的promise返回。

5.2.3 Promise.prototype.finally(onFinally)

返回以個新promise:
onFinally回調會在promise運行完畢後被調用,無論當前promise的狀態是完成(fulfilled)還是失敗(rejected)
結論:Promise.prototype.then直接在老promise基礎上定製一個只要調用完畢就調用的hook.

6. 入門級helloworld:

需求: 異步3秒才能返回一串文本“helloPromise!” 指定一個函數,讓它去異步執行,完了就輸出“helloPromise!Promise is over!”

var helloPromise = new Promise((resolve,reject)=>{
	setTimeout(()=>{resolve("helloPromise!")},3000)
})

helloPromise.then((res)=>{
	console.log(res+"Promise is over!")
})
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章