手写Promise-链式调用

发布时间 2023-09-13 13:45:44作者: 菊子的别致生活园
   // excutor:可以理解为传入一个函数为执行器
        function myPromise(excutor) {
            // 1. 执行结构
            let self = this
            self.status = 'pending' // 状态
            self.value = null //成功的值
            self.reason = null //失败原因

            // 8. 添加缓存数组
            self.onFulfilledCallbacks = []
            self.onRejectedCallbacks = []

            // 成功 4.判断状态做相应处理
            function resolve(value) {
                if (self.status === 'pending') {
                    self.value = value //保存成功结果
                    self.status = 'fulfilled'
                    // 10. 状态改变,依次取出
                    self.onFulfilledCallbacks.forEach(item => item(value))
                }
            }
            // 失败
            function reject(reason) {
                if (self.status === 'pending') {
                    self.reason = reason //保存失败原因
                    self.status = 'rejected'
                    // 10. 状态改变,依次取出
                    self.onRejectedCallbacks.forEach(item => item(reason))
                }
            }
            // 3.执行一遍
            try {
                excutor(resolve, reject)
            } catch (error) {
                reject(error)
            }
        }
        //2. then 关联到原型链上
        myPromise.prototype.then = function (onFulfilled, onRejected) {
            // 5.状态改变,调用then方法
            onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : function (data) { resolve(data) }
            onRejected = typeof onRejected === 'function' ? onRejected : function (err) { throw err }

            let self = this
            //成功 
            if (self.status === 'fulfilled') {
                return new myPromise((resolve, reject) => {
                    try {
                        let x = onFulfilled(self.value)
                        // 判断传进来的self.value是不是promise,如果是就.then()返回promise,不是就直接抛出结果
                        x instanceof myPromise ? x.then(resolve, reject) : resolve(x)
                    } catch (error) {
                        reject(error)
                    }
                })
            }
            // 失败
            if (self.status === 'rejected') {
                return new myPromise((resolve, reject) => {
                    try {
                        let x = onRejected(self.reason)
                        // 判断传进来的self.value是不是promise,如果是就.then()返回promise,不是就直接抛出结果
                        x instanceof myPromise ? x.then(resolve, reject) : resolve(x)
                    } catch (error) {
                        reject(error)
                    }
                })
            }
            // 等待
            if (self.status === 'pending') {
                return new myPromise((resolve, reject) => {
                    // 9. 先添加进去
                    self.onFulfilledCallbacks.push(() => {
                        let x = onFulfilled(self.value)
                        // 判断传进来的self.value是不是promise,如果是就.then()返回promise,不是就直接抛出结果
                        x instanceof myPromise ? x.then(resolve, reject) : resolve(x)
                    })
                    self.onRejectedCallbacks.push(() => {
                        let x = onRejected(self.reason)
                        // 判断传进来的self.value是不是promise,如果是就.then()返回promise,不是就直接抛出结果
                        x instanceof myPromise ? x.then(resolve, reject) : resolve(x)
                    })
                })
            }
        }
        myPromise.prototype.catch = function (fn) {
            return this.then(null, fn)
        }

        // 异步
        let isForget = true
        let getlv = new myPromise((resolve, reject) => {
            if (isForget) {
                let lv = {
                    color: "pink",
                    price: 99
                }
                resolve(lv)
            } else {
                let err = new Error('不记得了')
                reject(err)
            }
        })
        let buyLip = (lv) => {
            let lip = {
                brand: "迪奥",
                color: "pink"
            }
            let msg = {
                message: '买了一个包,是' + lip.brand + ',颜色是' + lip.color,
                lip: lip,
                lv: lv
            }
            return new myPromise(function (y, n) {
                y(msg)
            })
        }

        let testData = () => {
            getlv
                .then(buyLip)
                .then((fulfilled) => {
                    console.log(fulfilled)
                }).catch(rejected => {
                    console.log(rejected.message)
                })
        }
        // 链式调用
        testData()

执行结果: