JS中的Promise 物件記錄

jingxin_123發表於2020-09-25

有時候非同步請求較多時,資料無法及時獲取到,或者希望等上一個請求完成在執行其他操作,可以使用Promise 物件

ECMAscript 6 原生提供了 Promise 物件。
Promise 物件代表了未來將要發生的事件,用來傳遞非同步操作的訊息。

Promise 物件有以下兩個特點:

1、物件的狀態不受外界影響。Promise 物件代表一個非同步操作,有三種狀態:

pending: 初始狀態,不是成功或失敗狀態。
fulfilled: 意味著操作成功完成。
rejected: 意味著操作失敗。
只有非同步操作的結果,可以決定當前是哪一種狀態,任何其他操作都無法改變這個狀態。這也是 Promise 這個名字的由來,它的英語意思就是「承諾」,表示其他手段無法改變。

2、一旦狀態改變,就不會再變,任何時候都可以得到這個結果。Promise 物件的狀態改變,只有兩種可能:
從 Pending 變為 Resolved 和從 Pending 變為 Rejected。只要這兩種情況發生,狀態就凝固了,不會再變了,會一直保持這個結果。就算改變已經發生了,你再對 Promise 物件新增回撥函式,也會立即得到這個結果。這與事件(Event)完全不同,事件的特點是,如果你錯過了它,再去監聽,是得不到結果的。

Promise 優缺點
有了 Promise 物件,就可以將非同步操作以同步操作的流程表達出來,避免了層層巢狀的回撥函式。此外,Promise 物件提供統一的介面,使得控制非同步操作更加容易。

Promise 也有一些缺點
首先,無法取消 Promise,一旦新建它就會立即執行,無法中途取消。其次,如果不設定回撥函式,Promise 內部丟擲的錯誤,不會反應到外部。第三,當處於 Pending 狀態時,無法得知目前進展到哪一個階段(剛剛開始還是即將完成)。
例子:

var myFirstPromise1 = new Promise(function(resolve, reject){
	resolve("成功")
})
//使用:
myFirstPromise1.then(res=>{
	console.log(111,res) //輸出成功
})

var myFirstPromise2 = new Promise(function(resolve, reject){
	reject("失敗")
})
//使用:
myFirstPromise2.then(res=>{
	console.log(220,res) //不輸出
}).catch(err=>{
	console.log(222,err) //輸出失敗
})

let result = [myFirstPromise1,myFirstPromise2]  //promise物件的陣列
let p = Promise.all(result).then(res =>{
	//只有result陣列全部執行成功,完成後p才算成功,所有資料組成一個陣列,返回成功後的陣列
}).catch(err=>{
	//有一個失敗p都算失敗,返回第一個失敗的資料
})

相關文章