0x000 概述
Promise
是一個異步編程的解決方案,他經常和ajax
一起出現,導致很多人以爲Promise
是一種新的網絡請求技術,其實不然。Promise
是一種思考方式、編程方式。
0x000 栗子
先寫一個栗子
setTimeout(()=>{
console.log('here')
},3000)
很簡單,3s之後將會打印出here
,現在換成Promise
:
new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve()
}, 3000)
}).then(()=>{
console.log('here')
})
執行結果也是一樣,3s之後將會輸出here
,還可以這麼寫
let proxy=new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve()
}, 3000)
})
setTimeout(()=>{
proxy.then(()=>{
console.log('here')
})
}, 10000)
13s後才輸出here
0x002 初始化
-
語法
new Promise(executor)
-
參數:
- executor:處理器函數,函數的完整簽名是
(resolve, reject)=>{}
- executor:處理器函數,函數的完整簽名是
- 返回值:一個
Promise
實例
-
-
栗子
let promise=new Promise((resolve, reject)=>{ setTimeout(()=>{ resolve() }, 3000) }) console.log(promise) // Promise {<pending>}
-
說明:
使用new Promise
實例化一個Promise
之後,將它輸出出來,可以看到他有一個pending
,這是說明這個promise
的狀態,稱爲PromiseStatus
,promise
一共有3種狀態,一個promise
必定處於下面三個狀態之一:-
pending
:初始狀態 -
fulfilled
:操作成功 -
rejected
:操作失敗
-
0x003 then
-
語法:
promise.then(onFulfilled, onRejected)
-
onFulfilled
:操作成功的回調 -
onRejected
:操作失敗的回調
-
-
栗子1:
let promise=new Promise((resolve, reject)=>{ setTimeout(()=>{ resolve() }, 3000) }) console.log(promise) // Promise {<pending>} promise.then(()=>{ console.log(promise) // Promise {<resolved>: undefined} })
-
說明1:
當調用resolve
之後,then
函數執行了,同時promise
的PromiseStatus
變成了resolved
。onFulfilled
同時接受一個變量,稱之爲PromiseValue
:let promise=new Promise((resolve, reject)=>{ setTimeout(()=>{ resolve(1) }, 3000) }) promise.then((value)=>{ console.log(value) // 1 })
-
栗子2:
let promise=new Promise((resolve, reject)=>{ setTimeout(()=>{ reject() }, 3000) }) console.log(promise) // Promise {<pending>} promise.then(()=>{},()=>{ console.log(promise) // Promise {<rejected>: undefined} })
當調用
reject
之後,then
執行了,此時promise
的PromiseStatus
變成了rejected
,同時,onRejected
回調接受一個reason
,作爲操作失敗的原因說明:let promise=new Promise((resolve, reject)=>{ setTimeout(()=>{ reject('nothing') }, 3000) }) promise.then(()=>{},(reason)=>{ console.log(reason) // nothing })
0x004 catch
-
語法:
promise.catch(onRejected)
-
onRejected
:回調
-
-
栗子:
let promise=new Promise((resolve, reject)=>{ setTimeout(()=>{ resolve() }, 3000) }).then(()=>{ throw 'error' }).catch((e)=>{ console.log(`i catch you: ${e}`) // i catch you error })
-
注意1:在異中的錯誤不會執行catch
let promise=new Promise((resolve, reject)=>{ setTimeout(()=>{ throw 'error' }, 3000) }).catch((e)=>{ console.log(`i catch you: ${e}`) // Uncaught error })
-
注意2:
resolve
之後會被忽略let promise=new Promise((resolve, reject)=>{ resolve() throw 'error' }).catch((e)=>{ console.log(`i catch you: ${e}`) // 不會輸出 })
0x005 finally
-
語法:
p.finally(onFinally)
-
onFainally
:回調
-
-
栗子:
let promise=new Promise((resolve, reject)=>{ setTimeout(()=>{ resolve() }, 3000) }).then(()=>{ console.log('resolve') throw 'error' }).catch((e)=>{ console.log(`i catch you: ${e}`) }).finally(()=>{ console.log('finally') }) // resolve // i catch you error // finally