簡單理解promise

九酒發表於2019-02-25

含義

非同步程式設計的一種解決方案。是一個構造物件,代表一個非同步操作。有3種狀態:

pending(進行中)、fulfilled(已成功)、rejected(已失敗)。

狀態變更: pending -> fulfilled、pending -> rejected。

狀態變更後就永久保持這個結果。

基本用法

const p = new Promise((resolved, rejected) => {
    if(/*非同步操作成功*/) {
        resolved(value);
    }else{
        rejected(error);
    }
});
p.then((value) => console.log(`非同步執行成功:` + value),  //非同步呼叫回撥寫法1
    (error) => console.log(`非同步執行失敗:` + error))

p.then((value) => console.log(`非同步執行成功:` + value))  //非同步呼叫回撥寫法2
    .catch((error) => console.log(`非同步執行失敗:` + error))
複製程式碼

pending -> fulfilled執行的結果是resolved,

pending -> rejected執行的結果是rejected。

用法

then() catch()

基本用法中的寫法1和寫法2的效果一樣,主要是因為promise.prototype.then()
有兩個引數,第一個引數是 resolved 的回撥,第二個引數(可選)是
rejected 的回撥。

而promise.prototype.catch()主要用來捕獲非同步操作丟擲的錯誤,與try{}catch(){}中的catch功能一樣。promise.prototype.catch()除了能夠捕獲非同步操作中的錯誤外,還能捕獲.then()回撥中的錯誤。

const p = new Promise((resolved, rejected)=>resolved(`resolved`)).then((value) => {
    throw new Error(value);
}, (error) => {})
.catch((error) => console.log(error))
複製程式碼

輸出結果為

簡單理解promise

另外,當Promise狀態已變成resolved之後再丟擲錯誤,丟擲的錯誤是無效的,同樣以上面的例子為例。

const p = new Promise((resolved, rejected) => {
    resolved(`resolved`);
    throw new Error(`hhh`);
}).then((value) => {
    throw new Error(value);
}, (error) => {})
.catch((error) =>console.log(error))
複製程式碼

輸出結果

簡單理解promise

與上面的結果一致。原因:
Promise的狀態變更後就永久保持這個結果,不會再變化了。
.catch()返回的仍是一個Promise物件,在執行.catch之後,仍可以繼續呼叫。

const p = new Promise((resolved, rejected) => {
    resolved(`hhh`);
}).then((value) => { 
    throw new Error(value);
})
.catch((error) =>console.log(error))
.then(() => console.log(`hhhhh`))
複製程式碼

輸出結果:

簡單理解promise

錯誤捕獲

.catch()具有冒泡的性質,會一直向後傳遞,直到被捕獲為止,也就是說錯誤總會被下一個catch捕獲。.catch()也能捕獲前一個.catch()丟擲的錯誤。

const p = new Promise((resolved, rejected) => {
    resolved(`hhh`);
}).then((value) => { 
    throw new Error(value);
})
.catch((error) =>{
    console.log(r)})
    throw new Error(`hhhh`)
.catch((error) => console.log(error))
複製程式碼

輸出結果:

簡單理解promise

注意:一般不要使用.then()的第二個引數

舉例:

p.then((value) => { //寫法1
    throw new Error(value);
}).catch((error) =>console.log(error))

p.then((value) => { //寫法2
    throw new Error(value);
}, (error) => console.log(error))
複製程式碼

寫法1能夠捕獲前面then()中丟擲的錯誤,但寫法2不行

由於.catch()的冒泡性質,當一個promise函式體未對錯誤進行捕獲並進行處理,執行後不會有任何輸出,但是瀏覽器會列印報錯。

簡單理解promise

Node有一個事件unhandledRejection,專門用來監聽未捕獲的reject錯誤。

process.on(`unhandledRejection`, (err, p) => {})
複製程式碼

unhandledRejection有兩個引數:

err:錯誤物件

p:報錯的Promise例項

Promise.all([])

Prmise.all()用於將多個Promise例項包裝成一個新的promise例項。

語法: var p = Promise.all([p1,p2,p3])

p1,p2,p3必須都是Promise例項。若其引數不是Promise例項,則會通過Promise.resolve()將其轉為Promise例項再傳給Promise.all()

p的狀態由p1,p2,p3決定:

1、p1,p2,p3狀態都變為Fulfilled,p的狀態才變為Fulfilled。

2、p1,p2,p3中有任一個狀態變為Rejected,p的狀態就變為Rejected。

注意:若作為引數的Promise例項自身定義了catch,則它被rejected並不會觸發Promise.all()的catch()。

const p1 = new Promise((resolved) => {
    resolved(`hhh`);
}).then((value) => value)
.catch((error) => error);

const p2 = new Promise(() => {
    throw new Error(`hhhhh`);
}).then((value) => value)
.catch((error) => error);

Promise.all([p1, p2]).then((result) => console.log(result))
.catch((error) => console.log(error));
複製程式碼
簡單理解promise

輸出:走到了Promise的then(),正常輸出

Promise.race()

跟上面的Promise.all()一樣,都是將多個Promise例項包裝成一個新的Promise例項
Promise.resolve()

語法: var p = Promise.race([p1,p2,p3])

p的狀態由p1,p2,p3中最先改變狀態的例項決定。

Promise.resolve()

作用: 將先有的物件轉為Promise物件。

let foo = () => console.log(`foo`)
Promise.resolve(foo)
複製程式碼

等價於

new Promise((resolve) => resolve(foo));
複製程式碼

引數:

1、Promise例項:不做任何修改,直接返回該例項

2、帶有then()的物件:將這個物件轉為Promise物件並立即執行then方法。

let foo ={
    then : (resolve) => resolve(`foo`)
}
let p1 = Promise.resolve(foo)
p1.then((value) => console.log(value))
複製程式碼

這裡會輸出`foo`,因為p1會立即執行foo的then方法,執行後p1的狀態才變為resolved。

這個用法比較常用,當非同步呼叫多個介面改變資料,但後面需要同時處理改變後的這些資料時,可結合Promise.all和Promise.resolve()來使用。

3、引數不是物件

Promise.resolve(`foo`);

該用法在Promise例項生成時狀態就為Resolved,所有回撥函式會立即執行,並將引數傳給Promise的回撥函式。

4、不帶引數:返回一個空Promise例項

注意:Promise.resolve()是在本輪”事件迴圈”結束時執行

簡單理解promise

因為setTimeout是在下輪“事件迴圈”開始時執行,console.log(3)立即執行,因此有了這樣的輸出結果。

Promise.reject()

返回一個新的Promise例項,狀態為rejected。

該方法的引數會被原封不動的傳給Promise.catch()作為引數。不區分該引數型別。

.done()

處於回撥鏈的低端,保證能夠接收丟擲的任何可能的錯誤。

.finally()

用於指定不管Promise物件最後狀態如何都會執行的操作。它接收的回撥函式作為引數。

比如:呼叫介面時會對介面做處理,不論介面呼叫成功還是失敗,都要做出提示,那麼就可以用這個方法用來做提示的回撥。

.try()

實際中會遇到不知道或者不想區分回撥函式是同步的還是非同步的,但是想用Promise

處理,因為這樣就可以不管回撥函式是同步還是非同步,都能使用then()指定下一步操作,用catch捕獲錯誤。

Promise.try()的作用就是解決上面的問題。

以上,屬於個人學習promise之後對promise的簡單理解。

相關文章