摘要：本文參考了實(shí)踐教程實(shí)現(xiàn)這個(gè)視頻，并添加了自己的一些想法。三種狀態(tài)必須是函數(shù)初始狀態(tài)是返回值完成時(shí)調(diào)用的方法，這里做了容錯(cuò)拒絕時(shí)調(diào)用的方法再次運(yùn)行，正確打印出結(jié)果。

本文參考了Node.js 實(shí)踐教程 - Promise 實(shí)現(xiàn)這個(gè)視頻，并添加了自己的一些想法。

首先來(lái)看 Promise 的構(gòu)造：

// 這里用 Prometheus 代替 Promise
let p = new Prometheus((resolve, reject) => {
    resolve("hello")
})

下面我們來(lái)實(shí)現(xiàn)它：

// 三種狀態(tài)
const PENDING = Symbol()
const FULFILLED = Symbol()
const REJECTED = Symbol()

function Prometheus (fn) {
    // fn 必須是函數(shù)
    if (typeof fn !== "function") {
        throw new Error("fn must be a function!")
    }

    let state = PENDING // 初始狀態(tài)是 PENDING
    let value = null // 返回值

    function fulfill (result) {
        state = FULFILLED
        value = result
    }

    // 完成時(shí)調(diào)用的方法，這里做了容錯(cuò)
    function resolve (result) {
        try {
            fulfill(result)
        } catch (err) {
            reject(err)
        }
    }

    // 拒絕時(shí)調(diào)用的方法
    function reject (error) {
        state = REJECTED
        value = error
    }

    fn(resolve, reject)
}

第二步，實(shí)現(xiàn) then 方法：

let p = new Prometheus((resolve, reject) => {
    resolve("hello")
})

p.then(val => {
    console.log(val)
})

// 三種狀態(tài)
const PENDING = Symbol()
const FULFILLED = Symbol()
const REJECTED = Symbol()

function Prometheus (fn) {
    // fn 必須是函數(shù)
    if (typeof fn !== "function") {
        throw new Error("fn must be a function!")
    }

    let state = PENDING // 初始狀態(tài)是 PENDING
    let value = null // 返回值

    function fulfill (result) {
        state = FULFILLED
        value = result
    }

    // 完成時(shí)調(diào)用的方法，這里做了容錯(cuò)
    function resolve (result) {
        try {
            fulfill(result)
        } catch (err) {
            reject(err)
        }
    }

    // 拒絕時(shí)調(diào)用的方法
    function reject (error) {
        state = REJECTED
        value = error
    }

    this.then = function (onFulfill, onReject) {
        switch (state) {
            case FULFILLED:
                onFulfill(value)
                break
            case REJECTED:
                onReject(value)
                break
        }
    }

    fn(resolve, reject)
}

第三步，在 Promise 里使用異步

let p = new Prometheus((resolve, reject) => {
    setTimeout(() => {
        resolve("hello")
    }, 0)
})

p.then(val => {
    console.log(val)
})

直接運(yùn)行上面的代碼發(fā)現(xiàn)控制臺(tái)沒有打印出 hello，原因是 Prometheus 里的代碼是異步執(zhí)行，導(dǎo)致記下來(lái)執(zhí)行 then 方法的時(shí)候，state 是 PENDING，后面再執(zhí)行 resolve 的時(shí)候就不會(huì)走到 onFulfill 了，所以我們要在 then 方法里添加 state 為 PENDING 的分支判斷，把 onFulfill 和 onReject 存到一個(gè)變量中：

// 三種狀態(tài)
const PENDING = Symbol()
const FULFILLED = Symbol()
const REJECTED = Symbol()

function Prometheus (fn) {
    // fn 必須是函數(shù)
    if (typeof fn !== "function") {
        throw new Error("fn must be a function!")
    }

    let state = PENDING // 初始狀態(tài)是 PENDING
    let value = null // 返回值
    let hanler = {}

    function fulfill (result) {
        state = FULFILLED
        value = result
        handler.onFulfill(result)
    }

    // 完成時(shí)調(diào)用的方法，這里做了容錯(cuò)
    function resolve (result) {
        try {
            fulfill(result)
        } catch (err) {
            reject(err)
        }
    }

    // 拒絕時(shí)調(diào)用的方法
    function reject (error) {
        state = REJECTED
        value = error
        handler.onReject(error)
    }

    this.then = function (onFulfill, onReject) {
        switch (state) {
            case FULFILLED:
                onFulfill(value)
                break
            case REJECTED:
                onReject(value)
                break
            case PENDING:
                handler = { onFulfill, onReject }
        }
    }

    fn(resolve, reject)
}

異步實(shí)現(xiàn)了，我們?cè)倩剡^(guò)頭看看同步是否正常運(yùn)行：

let p = new Prometheus((resolve, reject) => {
  resolve("hello")
})

p.then(val => {
    console.log(val)
})

發(fā)現(xiàn)報(bào)錯(cuò)信息：

TypeError: handler.onReject is not a function

因?yàn)橥綀?zhí)行的時(shí)候，fulfill 里 handler 是 {}，所以會(huì)報(bào)錯(cuò)。

// 三種狀態(tài)
const PENDING = Symbol()
const FULFILLED = Symbol()
const REJECTED = Symbol()

function Prometheus (fn) {
    // fn 必須是函數(shù)
    if (typeof fn !== "function") {
        throw new Error("fn must be a function!")
    }

    let state = PENDING // 初始狀態(tài)是 PENDING
    let value = null // 返回值
    let handler = {}

    function fulfill (result) {
        state = FULFILLED
        value = result
        next(handler)
    }

    // 完成時(shí)調(diào)用的方法，這里做了容錯(cuò)
    function resolve (result) {
        try {
            fulfill(result)
        } catch (err) {
            reject(err)
        }
    }

    // 拒絕時(shí)調(diào)用的方法
    function reject (error) {
        state = REJECTED
        value = error
        next(handler)
    }

    function next({ onFulfill, onReject }) {
        switch (state) {
            case FULFILLED:
                onFulfill && onFulfill(value)
                break
            case REJECTED:
                onReject && onReject(value)
                break
            case PENDING:
                handler = { onFulfill, onReject }
        }
    }

    this.then = function (onFulfill, onReject) {
        next({onFulfill, onReject})
    }

    fn(resolve, reject)
}

現(xiàn)在同步也可以正常運(yùn)行了，接下來(lái)看看多個(gè) then 鏈?zhǔn)秸{(diào)用：

let p = new Prometheus((resolve, reject) => {
  resolve("hello")
})

p.then(val => {
    console.log(val)
    return "world"
}).then(val => {
    console.log(val)
})

執(zhí)行代碼會(huì)發(fā)現(xiàn)如下報(bào)錯(cuò)信息：

TypeError: Cannot read property "then" of undefined

原因是 then 方法沒有返回 Promise。

// 三種狀態(tài)
const PENDING = Symbol()
const FULFILLED = Symbol()
const REJECTED = Symbol()

function Prometheus (fn) {
    // fn 必須是函數(shù)
    if (typeof fn !== "function") {
        throw new Error("fn must be a function!")
    }

    let state = PENDING // 初始狀態(tài)是 PENDING
    let value = null // 返回值
    let handler = {}

    function fulfill (result) {
        state = FULFILLED
        value = result
        next(handler)
    }

    // 完成時(shí)調(diào)用的方法，這里做了容錯(cuò)
    function resolve (result) {
        try {
            fulfill(result)
        } catch (err) {
            reject(err)
        }
    }

    // 拒絕時(shí)調(diào)用的方法
    function reject (error) {
        state = REJECTED
        value = error
        next(handler)
    }

    function next({ onFulfill, onReject }) {
        switch (state) {
            case FULFILLED:
                onFulfill && onFulfill(value)
                break
            case REJECTED:
                onReject && onReject(value)
                break
            case PENDING:
                handler = { onFulfill, onReject }
        }
    }

    this.then = function (onFulfill, onReject) {
        return new Prometheus((resolve, reject) => {
            next({
                onFulfill: val => {
                    resolve(onFulfill(val))
                },
                onReject: err => {
                    reject(onReject(err))
                }
            })
        })
    }

    fn(resolve, reject)
}

再次運(yùn)行，正確打印出結(jié)果。

到此，一個(gè)非常簡(jiǎn)單的 Promise 就實(shí)現(xiàn)了，當(dāng)然，這里其實(shí)還有很多細(xì)節(jié)沒有考慮，具體還要參考 Promise/A+。