Promise 對象是一個代理對象,它允許你為異步操作的成功和失敗分別綁定相應(yīng)的處理方法(handlers)簇搅。 這讓異步方法可以像同步方法那樣返回值习寸,但并不是立即返回最終執(zhí)行結(jié)果期吓,而是一個能代表未來出現(xiàn)的結(jié)果的promise對象
一個 Promise有以下幾種狀態(tài):
- pending: 初始狀態(tài)学搜,既不是成功位谋,也不是失敗狀態(tài)副签。
- fulfilled: 意味著操作成功完成遥椿。
- rejected: 意味著操作失敗。
參數(shù)
Promise 的構(gòu)造器接收一個執(zhí)行函數(shù)(executor)
executor是帶有 resolve 和 reject 兩個參數(shù)的函數(shù) 继薛。Promise構(gòu)造函數(shù)執(zhí)行時立即調(diào)用executor 函數(shù), resolve 和 reject 兩個函數(shù)作為參數(shù)傳遞給executor(executor 函數(shù)在Promise構(gòu)造函數(shù)返回所建promise實例對象前被調(diào)用)愈捅。resolve 和 reject 函數(shù)被調(diào)用時遏考,分別將promise的狀態(tài)改為fulfilled(完成)或rejected(失敗)蓝谨。executor 內(nèi)部通常會執(zhí)行一些異步操作灌具,一旦異步操作執(zhí)行完畢(可能成功/失敗)青团,要么調(diào)用resolve函數(shù)來將promise狀態(tài)改成fulfilled,要么調(diào)用reject 函數(shù)將promise的狀態(tài)改為rejected咖楣。如果在executor函數(shù)中拋出一個錯誤督笆,那么該promise 狀態(tài)為rejected。executor函數(shù)的返回值被忽略诱贿。
屬性
Promise.length
length屬性娃肿,其值總是為 1 (構(gòu)造器參數(shù)的數(shù)目)
Promise.prototype
表示 Promise
構(gòu)造器的原型
基本使用
怎樣擁有 Promise 功能
只需讓該函數(shù)返回一個 Promise 就可以了
function sleep(time) {
return new Promise(resolve => {
console.log('executor 函數(shù)立即執(zhí)行')
setTimeout(resolve, time)
})
}
console.log('1000 ms 之后醒來')
sleep(1000).then(() => { console.log('嗨起來!') })
當(dāng) executor 函數(shù)出異常的時候, Promise 狀態(tài)改變成 rejected,executor函數(shù)的返回值被忽略
function sleep(time) {
return new Promise(resolve => {
throw 12
// 這里將不會在執(zhí)行
setTimeout(resolve, time)
})
}
sleep(1000).then(null, (e) => { console.log('error', e) })
鏈?zhǔn)秸{(diào)用
Promise.resolve 返回成功狀態(tài)
Promise.reject 返回失敗狀態(tài)
// Promise.reject(1) 拋出了一個錯誤異常
// 會被最近的一個 onRejected 函數(shù)捕獲到
Promise.reject(1).then((body) => {
console.log('success', body)
return Promise.reject(2)
}, null).then((body) => {
console.log('success', body)
return 3
}, (error) => {
console.log('error', error)
// 當(dāng)返回值不是一個 Promise 對象的時候
// 默認(rèn)包裝成 Promise
// 當(dāng) executor 沒有出現(xiàn)異常的時候會走到下一個 onFulfilled 函數(shù)
return 4
}).then((body) => {
console.log('success', body)
// 當(dāng) executor 沒有出現(xiàn)異常的時候會走到下一個 onRejected 函數(shù)
return a
}, (error) => {
console.log('error', error)
}).then((body) => {
console.log('success', body)
}, (error) => {
console.log('error', error)
// 當(dāng)函數(shù)沒有顯示的設(shè)置返回值時
// 默認(rèn)返回一個 Promise 值為 undefined
}).then((body) => {
console.log('success', typeof body)
}, (error) => {
console.log('error', error)
})
Promise.all
并發(fā)操作 接收一個數(shù)組/string作為參數(shù)
當(dāng)所有的結(jié)果成之后珠十,才會走 onFulfilled ,否則走 onRejected
function sleep(time) {
return new Promise(resolve => {
console.log('executor 函數(shù)立即執(zhí)行')
setTimeout(resolve, time)
})
}
Promise.all([sleep(100), Promise.resolve(1), 2]).then(body => {
console.log('success', body) // success [undefined, 1, 2]
})
Promise.all([sleep(100), Promise.reject(1), 2]).then(body => {
console.log('success', body)
console.log(body)
}, (error) => {
console.log('error', error) // error 1
})
// 當(dāng)參數(shù)為一個空是 是同步操作
Promise.all([]).then(body => {
console.log('success', body) // success []
console.log(body)
})
Promise.all('').then(body => {
console.log('success', body) // success []
console.log(body)
})
Promise.race
接收一個數(shù)組作為參數(shù)
最后的狀態(tài)取決于數(shù)組中最快返回結(jié)果的某一項的狀態(tài)
Promise.race([sleep(100), Promise.reject(1), 2]).then(body => {
console.log('success', body)
console.log(body)
}, (error) => {
console.log('error', error) // error 1
})
Promise.race([Promise.reject(1), 2]).then(body => {
console.log('success', body)
console.log(body)
}, (error) => {
console.log('error', error) // error 1
})
Promise.race([sleep(100), sleep(0)]).then(body => {
console.log('success', body) // success 0
console.log(body)
}, (error) => {
console.log('error', error)
})
Promise.prototype.finally(onFinally) 不管成功失敗都會觸發(fā)
Promise.resolve(1).finally(() => console.log('finally'))
Promise.reject(1).finally(() => console.log('finally'))
錯誤處理
鏈?zhǔn)秸{(diào)用時 只會找到最近的一個錯誤處理函數(shù)執(zhí)行,即使監(jiān)聽了 catch 也不會觸發(fā)
Promise.reject(1)
.then()
.then(null, error => console.log('錯誤處理 then', error)) // '錯誤處理 then' 1
.catch(error => console.log('錯誤處理 catch', error))
.finally(() => console.log('finally')) // finally
緩存當(dāng)前 Promise 示例的情況下 所有的錯誤處理函數(shù)都會觸發(fā)
const p = Promise.reject(1)
p.then()
p.then(null, error => console.log('錯誤處理 then', error)) // '錯誤處理 then' 1
p.catch(error => console.log('錯誤處理 catch', error)) // '錯誤處理 catch' 1
p.finally(() => console.log('finally')) // finally
至此我們已經(jīng)基本了解了 Promise 的使用了料扰, 接下來讓我們一起探討一下 Promise 的原理
【筆記不易,如對您有幫助焙蹭,請點贊晒杈,謝謝】