手写实现Promise

最新推荐文章于 2025-10-11 16:17:31 发布
原创 最新推荐文章于 2025-10-11 16:17:31 发布 · 3.6k 阅读 · 37 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#promise #js #javascript #es6

个人主页原文链接

自己实现一个promise是前端常见的面试题之一（虽然我还没遇到过），同时也是深入理解promise的一种途径，通过自己实现，来更加深刻的理解其中的原理

要自己实现promise，首先得了解Promises/A+条例到底有哪些内容~

  • promise表示异步操作的最终结果。
  • 与promise进行交互的主要方式是通过其then方法，该方法注册回调以接收promise的value或无法履行promise的reason。
  • 该规范详细说明了该then方法的行为。

一、实现一个同步版的promise

同步版先不考虑其他的，直接实现能按照 promise --> then 的顺序执行

  • 先按照规范，定几个标记量
const PENDING = "pending"
const FULFILLED = "fulfilled"
const REJECTED = "rejected"
  • promise.then同步执行
function Promise(fn){
    let that = this
    this.status = PENDING
    this.value = undefined
    this.reason = undefined
    
    let resolve = function(value){
        that.value = value
        that.status = FULFILLED
    }
    let reject = function(reason){
        that.reason = reason
        that.status = REJECTED
    }
    
    try{
        fn(resolve,reject)
    }catch(e){
        reject(e)
    }
}

Promise.prototype.then = function(onFulfilled,onRejected){
    if(this.status === FULFILLED){
        onFulfilled(this.value)
    }
    if(this.status === REJECTED){
        onRejected(this.reason)
    }
}

二、实现异步

接下来在同步版的基础上再解决两个问题

  1. 同步版本在执行异步代码时什么都没有返回
new Promise((resolve,reject)=>{
    setTimeout(()=>{resolve(1)})
}).then(x=>console.log(x))
  • 这是因为在执行then时，resolve还没有执行，status还是PENDING的状态
  1. 如果then中的参数不是Function时的应该有一个默认的回调函数

因此如果执行到then时，需要如下操作：

  • 先判断 onFulfilled与onRejected是否是函数
  • 然后判断status的状态，如果status还是PENDING的话可以先将then中的两个回调函数存起来，待到执行resolve或者reject时再执行
function Promise(fn){
    let that = this
    this.status = PENDING
    this.value = undefined
    this.reason = undefined
    this.resolvedCb = []
    this.rejectedCb = []
    
    let resolve = function(value){
        that.value = value
        that.status = FULFILLED
        that.resolvedCb.forEach(cb=>cb(that.value))
    }
    let reject = function(reason){
        that.reason = reason
        that.status = REJECTED
        that.rejectedCb.forEach(cb=>cb(that.reason))
    }
    
    try{
        fn(resolve,reject)
    }catch(e){
        reject(e)
    }
}

Promise.prototype.then = function(onFulfilled,onRejected){
    onFulfilled = onFulfilled instanceof Function?onFulfilled:()=>{}
    onRejected = onRejected instanceof Function?onRejected:()=>{}

    if(this.status === FULFILLED){
        onFulfilled(this.value)
    }
    if(this.status === REJECTED){
        onRejected(this.reason)
    }
    if(this.status === PENDING){
        this.resolvedCb.push(onFulfilled)
        this.rejectedCb.push(onRejected)
    }
}

其中的关键代码如下：

  • 如果状态是PENDING，先保存回调函数
    if(this.status === PENDING){
        this.resolvedCb.push(onFulfilled)
        this.rejectedCb.push(onRejected)
    }
  • 异步的情况下resolve或者reject会在then之后执行，因此执行时，回调函数已经放入Cb数组中，可以遍历执行Cb中的回调函数
 that.resolvedCb.forEach(cb=>cb(that.value))
 that.rejectedCb.forEach(cb=>cb(that.reason))
  • 如果onFulfilled与onRejected不是函数，应该使用一个默认的函数
onFulfilled = onFulfilled instanceof Function?onFulfilled:()=>{}
onRejected = onRejected instanceof Function?onRejected:()=>{}

三、then的链式调用

根据Promises/A+协议，then也应该返回一个promise，同时这也是then链式调用的条件

  • 先考虑情况如下
Promise.prototype.then = function(onFulfilled,onRejected){
    onFulfilled = onFulfilled instanceof Function?onFulfilled:()=>{}
    onRejected = onRejected instanceof Function?onRejected:()=>{}

    if(this.status === FULFILLED){
        onFulfilled(this.value)
        return new Promise(()=>{})
    }
    if(this.status === REJECTED){
        onRejected(this.reason)
        return new Promise(()=>{})
    }
    if(this.status === PENDING){
        this.resolvedCb.push(onFulfilled)
        this.rejectedCb.push(onRejected)
        return new Promise(()=>{})
    }
}

然后FULFILLED与REJECTED状态下，then返回的内容会直接成为下一个then的回调函数的输入

  • return的内容是下一个then的onFulfilled的输入，应该用resolve包裹
  • throw的内容是下一个then的onRejected的输入，应该用reject包裹

首先要能够捕获throw，然后根据结果类型判断使用resolve还是reject

    if (this.status === FULFILLED) {
        return new Promise((resolve, reject) => {
            try {
                let res = onFulfilled(this.value)
                resolve(res)
            } catch (e) {
                reject(e)
            }
        })
    }

这样就实现了同步版的then链式调用

function Promise(fn) {
    ……
}

Promise.prototype.then = function (onFulfilled, onRejected) {
    onFulfilled = onFulfilled instanceof Function ? onFulfilled : () => {}
    onRejected = onRejected instanceof Function ? onRejected : () => {}

    if (this.status === FULFILLED) {
        return new Promise((resolve, reject) => {
            try {
                resolve(onFulfilled(this.value))
            } catch (e) {
                reject(e)
            }
        })
    }
    if (this.status === REJECTED) {
        return new Promise((resolve, reject) => {
            try {
                resolve(onRejected(this.reason))
            } catch (e) {
                reject(e)
            }
        })
    }
    if (this.status === PENDING) {
        this.resolvedCb.push(onFulfilled)
        this.rejectedCb.push(onRejected)
        return new Promise(() => {

        })
    }
}

接着考虑异步的情况下，异步的情况下，执行到then时状态还是PENDING，之后的then也是在PENDING状态下返回的promise的基础上调用的


考虑异步，没有链式调用时只需要把onFulfilled、onRejected放入回调数组中，链式调用的话，应该把FULFILLED、REJECTED状态的promise中的回调函数放入回调数组中(这里逻辑感觉挺复杂的，主要是保证执行resolvedCb或rejectedCb中内容执行时，有和FULFILLED或REJECTED中promise的回调执行相同的效果)

这里注意一点，onFulfilled和onRejected的输入是新promise的value或者reason属性，因此直接用this，但是整个回调是放在上一个promise的数组中的，因此用that标识原来的this

Promise.prototype.then = function (onFulfilled, onRejected) {
    onFulfilled = onFulfilled instanceof Function ? onFulfilled : () => {}
    onRejected = onRejected instanceof Function ? onRejected : () => {}
    
    let that = this
    ……
    if (this.status === PENDING) {
        return new Promise((resolve, reject) => {
            that.resolvedCb.push(() => {
                try {
                    resolve(onFulfilled(this.value))
                } catch (e) {
                    reject(e)
                }
            })
            that.rejectedCb.push(() => {
                try {
                    resolve(onRejected(this.reason))
                } catch (e) {
                    reject(e)
                }
            })
        })
    }
}

这一步的完整程序如下

const PENDING = "pending"
const FULFILLED = "fulfilled"
const REJECTED = "rejected"

function Promise(fn) {
    let that = this
    this.status = PENDING
    this.value = undefined
    this.reason = undefined
    this.resolvedCb = []
    this.rejectedCb = []

    let resolve = function (value) {
        that.value = value
        that.status = FULFILLED
        that.resolvedCb.forEach(cb => cb(that.value))
    }
    let reject = function (reason) {
        that.reason = reason
        that.status = REJECTED
        that.rejectedCb.forEach(cb => cb(that.reason))
    }

    try {
        fn(resolve, reject)
    } catch (e) {
        reject(e)
    }
}

Promise.prototype.then = function (onFulfilled, onRejected) {
    onFulfilled = onFulfilled instanceof Function ? onFulfilled : () => {}
    onRejected = onRejected instanceof Function ? onRejected : () => {}

    let that = this

    if (this.status === FULFILLED) {
        return new Promise((resolve, reject) => {
            try {
                resolve(onFulfilled(this.value))
            } catch (e) {
                reject(e)
            }
        })
    }
    if (this.status === REJECTED) {
        return new Promise((resolve, reject) => {
            try {
                resolve(onRejected(this.reason))
            } catch (e) {
                reject(e)
            }
        })
    }
    if (this.status === PENDING) {
        return new Promise((resolve, reject) => {
            that.resolvedCb.push(() => {
                try {
                    resolve(onFulfilled(this.value))
                } catch (e) {
                    reject(e)
                }
            })
            that.rejectedCb.push(() => {
                try {
                    resolve(onRejected(this.reason))
                } catch (e) {
                    reject(e)
                }
            })
        })
    }
}

这个版本基本上能和标准的promise一致了，但是还有一些细节问题，比如下面代码的执行结果

new Promise((resolve, reject) => {
    resolve(new Promise((rs, rj) => {rs(9)}))
}).then(res => {
    console.log(`res:${res}`)
},err => {
    console.log(`err:${err}`)
})
//res:9
new Promise((resolve, reject) => {
    resolve(new Promise((rs, rj) => {rj(9)}))
}).then(res => {
    console.log(`res:${res}`)
},err => {
    console.log(`err:${err}`)
})
//err:9

因此下一步就是解决resolve的内容是promise的情况

ps:下面代码效果是一致的，即只有resolve会解析内部promise的内容

new Promise((resolve, reject) => {
    reject(new Promise((rs, rj) => {rs(9)}))
}).then(res => {
    console.log(`res:${res}`)
},err => {
    console.log(`err:${err}`)
})
//err:[object Promise]
new Promise((resolve, reject) => {
    reject(new Promise((rs, rj) => {rj(9)}))
}).then(res => {
    console.log(`res:${res}`)
},err => {
    console.log(`err:${err}`)
})
//err:[object Promise]

同理then中return返回的promise也会解析，throw返回的promise不会解析

new Promise((resolve, reject) => {
    resolve(1)
}).then(res => {
    return new Promise(resolve=>resolve(res))
}).then(res => {
    console.log(`res:${res}`)
},err => {
    console.log(`err:${err}`)
})
//res:1

new Promise((resolve, reject) => {
    resolve(1)
}).then(res => {
    throw new Promise(resolve=>resolve(res))
}).then(res => {
    console.log(`res:${res}`)
},err => {
    console.log(`err:${err}`)
})
// err:[object Promise]

四、解决resolve的内容是promise的情况

只有resolve和return中的promise会被解析，即只用this.value会被解析，而this.reason则不会

因此只需要修改if (this.status === FULFILLED) {}和that.resolvedCb.push(() => {})中的内容

先考虑同步状态，执行到this.status === FULFILLED时，如果this.value是一个promise的话，相当于之后then的链式调用都是接到这个promise后面的，因此：

    if (this.status === FULFILLED) {
        return new Promise((resolve, reject) => {
            if (this.value instanceof Promise) {
                this.value.then(onFulfilled, onRejected)
            } else {
                try {
                    resolve(onFulfilled(this.value))
                } catch (e) {
                    reject(e)
                }
            }
        })
    }

再考虑异步的，直接和上面一步同理

    if (this.status === PENDING) {
        return new Promise((resolve, reject) => {
            that.resolvedCb.push(() => {
                if (this.value instanceof Promise) {
                    this.value.then(onFulfilled, onRejected)
                } else {
                    try {
                        resolve(onFulfilled(this.value))
                    } catch (e) {
                        reject(e)
                    }
                }
            })
            that.rejectedCb.push(() => {
                try {
                    resolve(onRejected(this.reason))
                } catch (e) {
                    reject(e)
                }
            })
        })
    }

完整版如下：

const PENDING = "pending"
const FULFILLED = "fulfilled"
const REJECTED = "rejected"

function Promise(fn) {
    let that = this
    this.status = PENDING
    this.value = undefined
    this.reason = undefined
    this.resolvedCb = []
    this.rejectedCb = []

    let resolve = function (value) {
        that.value = value
        that.status = FULFILLED
        that.resolvedCb.forEach(cb => cb(that.value))
    }
    let reject = function (reason) {
        that.reason = reason
        that.status = REJECTED
        that.rejectedCb.forEach(cb => cb(that.reason))
    }

    try {
        fn(resolve, reject)
    } catch (e) {
        reject(e)
    }
}

Promise.prototype.then = function (onFulfilled, onRejected) {
    onFulfilled = onFulfilled instanceof Function ? onFulfilled : () => {}
    onRejected = onRejected instanceof Function ? onRejected : () => {}

    let that = this

    if (this.status === FULFILLED) {
        return new Promise((resolve, reject) => {
            if (this.value instanceof Promise) {
                this.value.then(onFulfilled, onRejected)
            } else {
                try {
                    resolve(onFulfilled(this.value))
                } catch (e) {
                    reject(e)
                }
            }
        })
    }
    if (this.status === REJECTED) {
        return new Promise((resolve, reject) => {
            try {
                resolve(onRejected(this.reason))
            } catch (e) {
                reject(e)
            }
        })
    }
    if (this.status === PENDING) {
        return new Promise((resolve, reject) => {
            that.resolvedCb.push(() => {
                if (this.value instanceof Promise) {
                    this.value.then(onFulfilled, onRejected)
                } else {
                    try {
                        resolve(onFulfilled(this.value))
                    } catch (e) {
                        reject(e)
                    }
                }
            })
            that.rejectedCb.push(() => {
                try {
                    resolve(onRejected(this.reason))
                } catch (e) {
                    reject(e)
                }
            })
        })
    }
}

效果对比：
image

五、promise的部分API实现

Promise.resolve
Promise.resolve = function(value){
    return new Promise(resolve=>{
        resolve(value)
    })
}
Promise.reject
Promise.reject = function(reason){
    return new Promise((resolve,reject)=>{
        reject(reason)
    })
}
Promise.all

Promise.all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

const p = Promise.all([p1, p2, p3]);

p的状态由p1、p2、p3决定，分成两种情况。

  • 只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
  • 只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。
Promise.all = function (promises) {
    let resolveList = []
    return new Promise((resolve, reject) => {
        if(promises.length === 0){ //promises为空数组的情况下，会返回resolve([])
            resolve(resolveList)
        }
        promises.forEach(p => {
            Promise.resolve(p).then(re => {
                resolveList.push(re)
                if (promises.length === resolveList.length) {
                    //因为promise异步的原因，还是得放里面
                    resolve(resolveList)
                }
            }, rj => {
                reject(rj)
            })
        })
    })
}

ps:有个bug，如下

var a = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('3')
    },300)
})
var b = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('2')
    },200)
})
var c = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('1')
    },100)
})
var d = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('4')
    },400)
})

Promise.all([a, b, c, d]).then(res => console.log(res), res => console.log(res))

真正的promise.all返回是[3,2,1,4]，我的返回是[1,2,3,4]

Promise.race

Promise.race方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。

const p = Promise.race([p1, p2, p3]);

上面代码中，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。

Promise.race = function (promises) {
    let flag = true
    return new Promise((resolve, reject) => {
        promises.forEach(p => {
            Promise.resolve(p).then(re => {
                if (flag) {
                    flag = false
                    resolve(re);
                }
            }, rj => {
                if (flag) {
                    flag = false
                    reject(rj);
                }
            })
        })
    })
}
pma934
关注
手写Promise，一步步实现自己的Promise
小时候可呆了的博客
02-25 2059
手写promise，一步步实现自己的promise，从零到1实现promise
手写Promise（前端面试题）第一篇 ·基本功能实现
2301_76380626的博客
08-05 1463
手写Promise（前端面试题）第一篇 ·基本功能实现
超详细！一次性搞懂手写Promise全过程
qq_41852789的博客
12-30 1万+
手写promise超详细步骤，帮助大家理解每一步代码的含义
手写Promise的基本实现 （超详细）
qq_48554377的博客
09-22 8693
手写Promise的基本实现 （超详细） 面试必备！ 本文带大家实现一个基本的 promise 过多的边界情况就不在考虐,理解主要实现过程以及逻辑即可 对于一个个出现的问题我会逐步分析原因以及对应的解决思路
【JavaScript】手写Promise
编码世界
05-15 5410
面试中经常会被问到你会手写Promise吗？本文带你手撸Promsie
Promise.all和Promise.race的区别和使用
热门推荐
周家大小姐
06-07 1万+
目录 promise.all() promise.race() 使用场景: promise.all() 比如当数组里的P1，P2都执行完成时，页面才显示。 值得注意的是，返回的数组结果顺序不会改变，即使P2的返回要比P1的返回快，顺序依然是P1，P2 Promise.all成功返回成功数组, 失败返回失败数据,一但失败就不会继续往下走 let p1 = Promise.resolve('aaa') ...
手写实现promise以及promise.all和promise.race
qq_40619263的博客
05-15 3642
之前写的一个promise太多了，面试写下来的话。。。。emmm,所以在复习时又写一个简单的。 promise class Promsie { constructor(fn) { //三个状态 this.status = 'pending', this.resolve = undefined; this.reject = undefined; let resolve = value => {
Promise.race
liangshanbo1215的博客
01-28 927
对象的一个静态方法，用于将多个 Promise 实例包装成一个新的 Promise 实例。：返回一个新的 Promise 实例，其状态和结果由最先完成的 Promise 决定。：设置一个超时 Promise，如果某个操作在指定时间内未完成，则触发超时。的 Promise 完成时完成，并返回该 Promise 的结果或错误。是一个空数组，返回的 Promise 将永远处于 pending 状态。返回的 Promise 也会是 rejected 状态。用于从多个 Promise 中选择最先完成的一个。
Promise.race()
歌舞阿瓜的博客
10-12 1206
静态方法接受一个 promise 可迭代对象作为输入，并返回一个 Promise。这个返回的 promise 会随着第一个 promise 的敲定而敲定。
promise中all和race的区别
hexadecimal_001的博客
10-05 834
Promise.all和Promise.race是JavaScript中Promise API的两个重要方法，它们在处理多个Promise对象时表现出不同的行为。
【高频考点精讲】Promise.all和Promise.race的区别，90%的人都用错了
全栈老李的博客
06-17 1249
Promise.all和Promise.race是处理异步操作的利器，但要用对场景。all适合"全部都要"的场景，race适合"谁快用谁"的情况。all是"与"关系（所有成功才算成功）race是"或"关系（第一个完成的就是结果）我是全栈老李，下期我们聊聊async/await的底层实现原理，看看Generator和Promise是如何完美配合的。
手写Promise系列之Promise.race
lyxgoodLucky的博客
12-12 1733
手写promise系列之Promise.race Promise.race(iterable) 方法返回一个 promise 迭代器中的promise谁先执行完毕就用谁的结果，那个率先改变的 Promise 实例的返回值，就传递那个给p的回调函数。
ES6中的Promise.all和Promise.race
Army-海军的博客
04-22 1万+
一、Promise.all 这个方法返回一个新的promise对象，该promise对象在所有的promise对象都成功的时候才会触发成功，一旦有任何一个里面的promise对象失败则立即触发该promise对象的失败。这个新的promise对象在触发成功状态以后，会把一个包含所有promise返回值的数组作为成功回调的返回值，顺序跟参数的顺序保持一致；如果这个新的promise对象触发了失败状...
promise 中 race 方法的目的是什么
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-14 784
随着 JavaScript 生态的演进，Promise 作为解决回调地狱（Callback Hell）问题的关键抽象，已成为处理异步操作的事实标准。在需要“任一成功即可”的场景，应将失败的 Promise 转换为永不 resolve 的 Promise（如示例五所示），或使用。否则，抛出超时错误。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。的返回 Promise 仅关注第一个完成的 Promise，后续完成的 Promise 不会影响其状态。
promise.all和promise.race
无名之辈-_-
11-02 448
1.Promise.all可以将多个promise实例包装成一个新的promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。 Promise.all在处理多个异步的时候非常有用，比如当一个页面需要多个ajax的数据加载完成之后才显示，之前都只显示loading状态等等。 需要特别注意的是，Promise.all获取的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的。即function1接收的结果在前。
Promise.all和 race
weixin_63681863的博客
05-06 3194
不同的是，哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。方法有什么实际作用呢？一样，接受的参数是一个每项都是。，那自身的状态变成了。，那自身状态就会变成。
Promise.race实现超时检测
weixin_53135464的博客
02-13 943
Promise.race 是 JavaScript 中一个非常有用的工具，用于处理多个 Promise 对象中的第一个完成的 Promise。Promise.race 会返回第一个完成的 Promise 的结果，即 promise1 的结果。Promise.race 还可以用于实现超时机制。处理错误：如果第一个完成的 Promise 是被拒绝的，返回的 Promise 也会被拒绝，因此需要处理错误。并发控制：Promise.race 只关心第一个完成的 Promise，不等待其他 Promise。
Promise.race的用法
An_cf的博客
03-31 1856
最近做项目让增加一个功能，当接口请求超过5分钟后，做个处理页面增加错误提示，于是想到了Promise.race的方法，下面来记录一下~ let P1 = new Promise( resolve => { setTimeout(()=> { resolve('p1访问！') },4000) }); let P2 = n...
147.《手写实现 Promise.all 与 Promise.race》
最新发布
qq_44864082的博客
10-11 701
Promise.all 和 Promise.race 是 JavaScript 中处理多个异步任务的常用方法。它们分别代表了“与”和“或”的并发控制逻辑。为了真正理解其内部工作机制，本文将从零开始，手写实现这两个方法。通过代码实践，深入剖析其设计思想与核心原理
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值