前期提要

最近在看jQuery的源码,里面有个deferred,延迟对象,和我们现在的promise挺像的,估计是借鉴了
jQuery里面的deferred设计的.那如何实现一个简易版的promise呢,就来试一试好了.

因为现在基本全面应用ES6了,所以下面的代码我会用ES6去书写,思想是一样的,es5也同样能实现,这个只是一个简易版,很多边界问题和错误判断都没实现,主要是理解其中的思想和原理

具体步骤

先实现一个最简单的

先来看看使用方法吧

new Promise((resolve, reject) => {
    setTimeout(() => {
        // resolve(1)
        reject(2)
    }, 1000);
}).then((value) => {
    console.log(value);
},(value) => {
    console.log(value);
})

这个是最简单的使用方法,传递给promise的函数有2个方法,一个是resolve,成功时调用,另外一个是reject,失败时调用,分别调用下面的then里传递的两个函数,先来实现这个功能吧

class MyPromise {
    constructor(callback) {
        //创建一个state属性,记录当前promise状态
        this.state = PENDING
        //resolve和reject的回调函数
        this.resolveList = []
        this.rejectList = []
        //传入到fn里面的resolve和reject
        const resolve = (arg) => {
            this.state = RESOLVED
            this.resolveList.forEach(fn => fn(arg))
        }
        const reject = (arg) => {
            this.state = REJECTED
            this.rejectList.forEach(fn => fn(arg))
        }
        //传入上面两个函数,执行fn,捕获错误
        try {
            callback(resolve, reject)
        } catch (error) {
            reject(error)
        }
    }
    //than 方法为那两个待处理数组添加函数
    then(callback1,callback2){
        this.resolveList.push(callback1)
        this.rejectList.push(callback2)
    }
}

核心思想大概就是创建了两个数组,给那两个数组添加then里面传入的将会发生的对调.resolve和reject是触发器,一旦触发了就会把待办里面的函数清空了

再来实现一个链式调用的

new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(1)
    }, 1000);
}).then((value) => {
    console.log(value);
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(++value)
        }, 1000);
    })
}).then((arg) => {
    console.log(arg)
})

promise再返回另外一个promise的链式调用

const PENDING = "pending"
const RESOLVED = "resolved"
const REJECTED = "rejected"


class MyPromise {
    constructor(callback) {
        //创建一个state属性,记录当前promise状态
        this.state = PENDING
        //resolve和reject的回调函数

        this.resolveList = []
        this.rejectList = []
        //传入到fn里面的resolve和reject
        const resolve = (arg) => {
            this.state = RESOLVED
            this.value = arg
            this.resolveList.forEach(fn => {
                this.value = fn(this.value)
            })
        }
        const reject = (arg) => {
            this.state = REJECTED
            this.value = arg
            this.rejectList.forEach(fn => fn(this.value))
        }
        //传入上面两个函数,执行fn,捕获错误
        try {
            callback(resolve, reject)
        } catch (error) {
            reject(error)
        }
    }
    //than 方法为那两个待处理数组添加函数
    then(callback1, callback2) {
        this.rejectList.push(callback2)
        return new Promise((resolve, reject) => {
            this.resolveList.push(callback1)
            this.value =
                this.resolveList.push(resolve)
        })
    }
}

这一块主要核心点在于,在旧的promise的队列里面把新的promise的resolve加进去,不断重复,旧的调用新的,形成一个闭环,就是promise的原理了