Promise 對象是一個代理對象,它允許你為異步操作的成功和失敗分別綁定相應的處理方法（handlers）。 這讓異步方法可以像同步方法那樣返回值，但并不是立即返回最終執(zhí)行結果，而是一個能代表未來出現(xiàn)的結果的promise對象

一個 Promise有以下幾種狀態(tài):

• pending: 初始狀態(tài)，既不是成功，也不是失敗狀態(tài)。
• fulfilled: 意味著操作成功完成。
• rejected: 意味著操作失敗。

參數(shù)

Promise 的構造器接收一個執(zhí)行函數(shù)(executor)

executor是帶有 resolve 和 reject 兩個參數(shù)的函數(shù) 。Promise構造函數(shù)執(zhí)行時立即調用executor 函數(shù)， resolve 和 reject 兩個函數(shù)作為參數(shù)傳遞給executor（executor 函數(shù)在Promise構造函數(shù)返回所建promise實例對象前被調用）。resolve 和 reject 函數(shù)被調用時，分別將promise的狀態(tài)改為fulfilled（完成）或rejected（失敗）。executor 內部通常會執(zhí)行一些異步操作，一旦異步操作執(zhí)行完畢(可能成功/失敗)，要么調用resolve函數(shù)來將promise狀態(tài)改成fulfilled，要么調用reject 函數(shù)將promise的狀態(tài)改為rejected。如果在executor函數(shù)中拋出一個錯誤，那么該promise 狀態(tài)為rejected。executor函數(shù)的返回值被忽略。

屬性

Promise.length

length屬性，其值總是為 1 (構造器參數(shù)的數(shù)目)

Promise.prototype

表示 Promise 構造器的原型

基本使用

怎樣擁有 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('嗨起來！') })

當 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) })

鏈式調用

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)
    // 當返回值不是一個 Promise 對象的時候
    // 默認包裝成 Promise 
    // 當 executor 沒有出現(xiàn)異常的時候會走到下一個 onFulfilled 函數(shù)
    return 4
}).then((body) => {
    console.log('success', body)
    // 當 executor 沒有出現(xiàn)異常的時候會走到下一個 onRejected 函數(shù)
    return a
}, (error) => {
    console.log('error', error)
}).then((body) => {
    console.log('success', body)
}, (error) => {
    console.log('error', error)
    // 當函數(shù)沒有顯示的設置返回值時
    // 默認返回一個 Promise 值為 undefined
}).then((body) => {
    console.log('success', typeof body)
}, (error) => {
    console.log('error', error)
})

Promise.all

并發(fā)操作 接收一個數(shù)組/string作為參數(shù)
當所有的結果成之后，才會走 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
})

// 當參數(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ù)組中最快返回結果的某一項的狀態(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'))

錯誤處理

鏈式調用時 只會找到最近的一個錯誤處理函數(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

緩存當前 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

至此我們已經基本了解了 Promise 的使用了， 接下來讓我們一起探討一下 Promise 的原理

【筆記不易，如對您有幫助，請點贊，謝謝】