Promise 狀態

Promise 是一個物件，表示非同步操作的結果。它有一個 [[PromiseState]] 屬性，表示當前的狀態，狀態有兩種，即 pending 和 fulfilled 以及 rejected。

在非同步任務完成之前，Promise 的狀態是 pending，即等待狀態中。根據非同步任務完成的情況改變 fulfilled 或 rejected。

非同步任務成功時呼叫 resolve，並改變 Promise 的狀態為 fulfilled ；失敗時呼叫 reject，並改變 Promise 的狀態為 rejected 。

Promise 可以做什麼？請轉至[JS]回撥函式和回撥地獄 - 回撥地獄

resolve

resolve 即在非同步任務成功時呼叫。它還可以攜帶一條成功訊息給 then() 函式。

new Promise((resolve, reject) => {
    resolve('success')
}).then((r) => {
    console.log(r) // => 'success'
})

reject

reject 即在非同步任務失敗時呼叫。它可以攜帶一條錯誤訊息給 then() 或者 catch() 函式。

new Promise((resolve, reject) => {
    reject('failed')
}).then(
    (r) => {},
    (e) => {
        console.log(e) // => 'failed'
    }
)
 

Promise 鏈

Promise 允許鏈式非同步操作，無需把每個操作巢狀在前一個操作的回撥內部，因此 Promise 可以解決回撥地獄的問題。

function asyncFn() { 
    return new Promise((resolve, reject) => {
        resolve('success')
    })
}

asyncFn()
    .then((res) => {
        return asyncFn()
    })
    .then((res) => {
        return asyncFn()
    })
    .catch((error) => {
        console.log(error)
    })
 

並行 Promise

Promise 提供的靜態方法 all() 可以並行執行任意數量的 Promise。

function asyncFn() {
    return new Promise((resolve, reject) => {
        resolve('success')
    })
}

Promise.all([asyncFn(), asyncFn()])
    .then((res) => {
        console.log(res) // ["success", "success"]
    })
    .catch((error) => {
        console.log(error)
    })