手写Promise源码

最新推荐文章于 2023-02-01 16:11:15 发布
最新推荐文章于 2023-02-01 16:11:15 发布
阅读量558 收藏
点赞数
分类专栏： 前端 文章标签： 前端 javascript 源码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46652769/article/details/122317354
版权

从简单到复杂一步步实现自己的Promise

因为不好拆解，如果想直接看最终版，请跳转到文章末尾最后一个代码块

在手写源码的之前，首先需要知道Promise是什么，都做了哪些操作

  1. Promise是一个类,在执行这个类的时候，需要传递一个执行器进去，执行器会立即执行

  2. Promise中有三种状态，分别为 成功(fulfilled) 、失败(rejected)、等待(pending)。只能从等待到成功或者失败，且一旦状态确定就不可更改

  3. resolve和reject函数是用来更改状态的

  4. then方法做的事情就是判断状态，根据不同的状态调用不同的回调函数，then方法是被定义在原型对象上的

  5. then成功和失败时都会有一个参数，来表示成功或失败后的值或原因

  6. 同一个promise对象下面的then方法是可以被调用多次的

  7. then方法是可以被链式调用的, 后面then方法的回调函数拿到值的是上一个then方法的回调函数的返回值

Promise类核心逻辑实现

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

class MyPromise {
    constructor (executor) {
        executor(this.resolve, this.reject)
    }
    // promise 状态
    status = PENDING
    // 成功之后的值
    value = undefined
    // 失败之后的原因
    reason = undefined
    resolve = value => {
        // 因为状态一旦确定就不可以更改，所以需要有一层判断
        if (this.status !== PENDING) return
        // 状态更改为成功
        this.status = FULFILLED
        // 保存成功之后的值
        this.value = value
    }
    reject = reason => {
        // 因为状态一旦确定就不可以更改，所以需要有一层判断
        if (this.status !== PENDING) return
        // 状态更改为失败
        this.status = REJECTED
        // 保存失败后的原因
        this.reason = reason
    }
    then (successCallback, failCallback) {
        if (this.status === FULFILLED) {
            successCallback(this.value)
        } else if (this.status === REJECTED) {
            failCallback(this.reason)
        }
    }
}
module.exports = MyPromise

至此，我们实现了一个最简单版本的 Promise

// 实现功能
const MyPromise = require('./MyPromise')
let promise = new MyPromise(function(resolve, reject){
    console.log('promise')
    resolve('success')
    reject('error')
})
promise.then(value => console.log(value), reason => console.log(reason))
// promise
// success

加入异步逻辑

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

class MyPromise {
    constructor (executor) {
        executor(this.resolve, this.reject)
    }
    // promise 状态
    status = PENDING
    // 成功之后的值
    value = undefined
    // 失败之后的原因
    reason = undefined
    // 成功之后的回调
    successCallback = undefined
    // 失败之后的回调
    failCallback = undefined
    resolve = value => {
        // 因为状态一旦确定就不可以更改，所以需要有一层判断
        if (this.status !== PENDING) return
        // 状态更改为成功
        this.status = FULFILLED
        // 保存成功之后的值
        this.value = value
        // 判断成功回调是否存在，存在则调用
        this.successCallback && this.successCallback(this.value)
    }
    reject = reason => {
        // 因为状态一旦确定就不可以更改，所以需要有一层判断
        if (this.status !== PENDING) return
        // 状态更改为失败
        this.status = REJECTED
        // 保存失败后的原因
        this.reason = reason
        // 判断失败回调是否存在，存在则调用
        this.failCallback && this.failCallback(this.reason)
    }
    then (successCallback, failCallback) {
        if (this.status === FULFILLED) {
            successCallback(this.value)
        } else if (this.status === REJECTED) {
            failCallback(this.reason)
        } else {
            // 状态是等待
            // 此时需要将callback存储起来
            this.successCallback = successCallback
            this.failCallback = failCallback

        }
    }
}
module.exports = MyPromise

// 实现功能
const MyPromise = require('./MyPromise')
let promise = new MyPromise(function(resolve, reject){
    setTimeout(() => {
        console.log('promise')
        resolve('success')
    }, 2000)
    // reject('error')
})
promise.then(value => console.log(value), reason => console.log(reason))
// 2秒后输出 promise    success

实现 then 方法多次调用添加多个处理函数

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

class MyPromise {
    constructor (executor) {
        executor(this.resolve, this.reject)
    }
    // promise 状态
    status = PENDING
    // 成功之后的值
    value = undefined
    // 失败之后的原因
    reason = undefined
    // 成功之后的回调
    successCallback = []
    // 失败之后的回调
    failCallback = []
    resolve = value => {
        // 因为状态一旦确定就不可以更改，所以需要有一层判断
        if (this.status !== PENDING) return
        // 状态更改为成功
        this.status = FULFILLED
        // 保存成功之后的值
        this.value = value
        // 判断成功回调是否存在，存在则调用
        // this.successCallback && this.successCallback(this.value)
        while (this.successCallback.length) this.successCallback.shift()(this.value)
    }
    reject = reason => {
        // 因为状态一旦确定就不可以更改，所以需要有一层判断
        if (this.status !== PENDING) return
        // 状态更改为失败
        this.status = REJECTED
        // 保存失败后的原因
        this.reason = reason
        // 判断失败回调是否存在，存在则调用
        // this.failCallback && this.failCallback(this.reason)
        while (this.failCallback.length) this.failCallback.shift()(this.reason)
    }
    then (successCallback, failCallback) {
        if (this.status === FULFILLED) {
            successCallback(this.value)
        } else if (this.status === REJECTED) {
            failCallback(this.reason)
        } else {
            // 状态是等待
            // 此时需要将callback存储起来
            this.successCallback.push(successCallback)
            this.failCallback.push(failCallback)
        }
    }
}
module.exports = MyPromise

// 实现功能
const MyPromise = require('./MyPromise')
let promise = new MyPromise(function(resolve, reject){
    setTimeout(() => {
        console.log('promise')
        resolve('success')
    }, 2000)
    // reject('error')
})
promise.then(value => console.log(value), reason => console.log(reason))
promise.then(value => console.log(value), reason => console.log(reason))
promise.then(value => console.log(value), reason => console.log(reason))
// 2秒后输出 promise success success success

实现then方法的链式调用

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

class MyPromise {
    constructor (executor) {
        executor(this.resolve, this.reject)
    }
    // promise 状态
    status = PENDING
    // 成功之后的值
    value = undefined
    // 失败之后的原因
    reason = undefined
    // 成功之后的回调
    successCallback = []
    // 失败之后的回调
    failCallback = []
    resolve = value => {
        // 因为状态一旦确定就不可以更改，所以需要有一层判断
        if (this.status !== PENDING) return
        // 状态更改为成功
        this.status = FULFILLED
        // 保存成功之后的值
        this.value = value
        // 判断成功回调是否存在，存在则调用
        // this.successCallback && this.successCallback(this.value)
        while (this.successCallback.length) this.successCallback.shift()(this.value)
    }
    reject = reason => {
        // 因为状态一旦确定就不可以更改，所以需要有一层判断
        if (this.status !== PENDING) return
        // 状态更改为失败
        this.status = REJECTED
        // 保存失败后的原因
        this.reason = reason
        // 判断失败回调是否存在，存在则调用
        // this.failCallback && this.failCallback(this.reason)
        while (this.failCallback.length) this.failCallback.shift()(this.reason)
    }
    then (successCallback, failCallback) {
        // then 方法返回的是一个 promise
        return new MyPromise((resolve, reject) => {
            // 判断状态
            if (this.status === FULFILLED) {
                let v = successCallback(this.value)
                // 判断 v 的值是普通值还是promise对象
                // 如果是普通值，直接调用 resolve
                // 如果是 promise 对象，查看promise对象返回的结果
                // 再根据promise对象返回的结果，决定调用resolve还是reject
                resolvePromise(v, resolve, reject)
            } else if (this.status === REJECTED) {
                failCallback(this.reason)
            } else {
                // 状态是等待
                // 此时需要将callback存储起来
                this.successCallback.push(successCallback)
                this.failCallback.push(failCallback)
            }
        })

    }
}

function resolvePromise (v, resolve, reject) {
    if (v instanceof MyPromise) {
        // v.then(value => resolve(value), reason => reject(reason))
        v.then(resolve, reject)
    } else {
        resolve(v)
    }
}

module.exports = MyPromise

// 实现功能
const MyPromise = require('./MyPromise')
let promise = new MyPromise(function(resolve, reject){
    resolve('success')
})
function other() {
    return new MyPromise(resolve => {
        resolve('other')
    })
}
promise.then(value => {
    console.log(value)
    return other()
}).then(value => {
    console.log(value)
})
// success
// other

*终版 (针对一些异常情况并没有做处理)

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

class MyPromise {
    constructor(executor) {
        // 如果在执行执行器的时候报错了，需要捕获错误情况
        try {
            // 传入立即执行的执行器
            executor(this.resolve, this.reject)
        } catch (e) {
            this.reject(e)
        }
    }
    // promise 状态
    status = PENDING
    // 成功之后的值
    value = undefined
    // 失败之后的原因
    reason = undefined
    // 成功之后的回调
    successCallback = []
    // 失败之后的回调
    failCallback = []
    resolve = value => {
        // 因为状态一旦确定就不可以更改，所以需要有一层判断
        if (this.status !== PENDING) return
        // 状态更改为成功
        this.status = FULFILLED
        // 保存成功之后的值
        this.value = value
        // 判断成功回调是否存在，存在则调用
        // this.successCallback && this.successCallback(this.value)
        // 当使用 then 方法多次调用时，添加多个处理函数
        while (this.successCallback.length) this.successCallback.shift()()
    }
    reject = reason => {
        // 因为状态一旦确定就不可以更改，所以需要有一层判断
        if (this.status !== PENDING) return
        // 状态更改为失败
        this.status = REJECTED
        // 保存失败后的原因
        this.reason = reason
        // 判断失败回调是否存在，存在则调用
        // this.failCallback && this.failCallback(this.reason)
        // 当使用 then 方法多次调用时，添加多个处理函数
        while (this.failCallback.length) this.failCallback.shift()()
    }
    then(successCallback, failCallback) {
        // 实现 .then() 参数可选
        successCallback = successCallback ? successCallback : value => value
        failCallback = failCallback ? failCallback : reason => { throw reason }
        // then 方法返回的是一个 promise，实现链式调用
        let promise2 = new MyPromise((resolve, reject) => {
            // 判断状态
            // 判断当状态为成功时，调用成功回调
            if (this.status === FULFILLED) {
                setTimeout(() => {
                    // 如果 then 方法在执行过程中报错，需要捕获到这个错误，并提示出来
                    try {
                        let v = successCallback(this.value)
                        // 判断 v 的值是普通值还是promise对象
                        // 如果是普通值，直接调用 resolve
                        // 如果是 promise 对象，查看promise对象返回的结果
                        // 再根据promise对象返回的结果，决定调用resolve还是reject
                        resolvePromise(promise2, v, resolve, reject) // 此时primise2还获取不到，所以需要将此编程异步代码
                    } catch (e) {
                        reject(e)
                    }
                }, 0)
            } else if (this.status === REJECTED) {
                setTimeout(() => {
                    // 如果 then 方法在执行过程中报错，需要捕获到这个错误，并提示出来
                    try {
                        // 当状态为失败时，调用失败回调
                        let v = failCallback(this.reason)
                        // 判断 v 的值是普通值还是promise对象
                        // 如果是普通值，直接调用 resolve
                        // 如果是 promise 对象，查看promise对象返回的结果
                        // 再根据promise对象返回的结果，决定调用resolve还是reject
                        resolvePromise(promise2, v, resolve, reject) // 此时primise2还获取不到，所以需要将此编程异步代码
                    } catch (e) {
                        reject(e)
                    }
                }, 0)
            } else {
                // 状态是等待，意味着是异步操作的时候
                // 此时需要将callback存储起来
                this.successCallback.push(() => {
                    setTimeout(() => {
                        // 如果 then 方法在执行过程中报错，需要捕获到这个错误，并提示出来
                        try {
                            let v = successCallback(this.value)
                            // 判断 v 的值是普通值还是promise对象
                            // 如果是普通值，直接调用 resolve
                            // 如果是 promise 对象，查看promise对象返回的结果
                            // 再根据promise对象返回的结果，决定调用resolve还是reject
                            resolvePromise(promise2, v, resolve, reject) // 此时primise2还获取不到，所以需要将此编程异步代码
                        } catch (e) {
                            reject(e)
                        }
                    }, 0)
                })
                this.failCallback.push(() => {
                    setTimeout(() => {
                        // 如果 then 方法在执行过程中报错，需要捕获到这个错误，并提示出来
                        try {
                            // 当状态为失败时，调用失败回调
                            let v = failCallback(this.reason)
                            // 判断 v 的值是普通值还是promise对象
                            // 如果是普通值，直接调用 resolve
                            // 如果是 promise 对象，查看promise对象返回的结果
                            // 再根据promise对象返回的结果，决定调用resolve还是reject
                            resolvePromise(promise2, v, resolve, reject) // 此时primise2还获取不到，所以需要将此编程异步代码
                        } catch (e) {
                            reject(e)
                        }
                    }, 0)
                })
            }
        })
        return promise2
    }
    // 实现 catch 方法
    catch (failCallback) {
        // catch 方式其实就是 then 方法，只是第一个参数传入 undefined 就ok了
        return this.then(undefined, failCallback)
    }
    // 谁先 finally 方法
    finally(callback) {
        // 如果成功失败都会执行，所以不依赖状态
        return this.then(value => {
            return MyPromise.resolve(callback()).then(() => value)
            // callback()
            // return value
        }, reason => {
            return MyPromise.resolve(callback()).then(() => { throw reason })
            // callback()
            // throw reason
        })
    }
    // 实现 all 方法，接收一个数组参数
    static all(array) { // 基础版，未考虑异常情况，没有对传入数据做校验，默认传值是正确的
        let result = [] // 返回值
        let index = 0 // 索引
        return new MyPromise((resolve, reject) => {
            // 添加数据h桉树，key 即索引
            function addData(key, value) {
                result[key] = value // 将结果传入返回值中
                index++ // 每次添加都自增 1
                // 因为可能内部存在异步代码，for循环是立即执行完成，所以，需要在判断全部相等之后，再去返回 resolve
                if (index === array.length) { // 判断，只有当所有的全部添加完成之后，返回 resolve
                    resolve(result)
                }
            }
            // 循环遍历传入的数组参数
            for (let i = 0; i < array.length; i++) {
                let current = array[i] // 拿到当前的值
                if (current instanceof MyPromise) {
                    // promise 对象
                    current.then(value => { addData(i, value) }, error => reject(error))
                } else {
                    // 普通值
                    addData(i, array[i])
                }
            }
        })
    }
    // 实现静态 resolve 方法， 传入参数
    static resolve(value) {
        // 判断参数是否为 promise，如果是，直接返回
        if (value instanceof MyPromise) return value
        // 如果是一个普通值，则返回 promise，在 resolve中传入 value
        return new MyPromise(resolve => resolve(value))
    }
}

function resolvePromise(promise2, v, resolve, reject) {
    // 如果返回的primise同当前的promise是同一个promise，则报错并return 阻止程序继续向下执行
    if (promise2 === v) {
        return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
    }
    if (v instanceof MyPromise) {
        // v.then(value => resolve(value), reason => reject(reason))
        v.then(resolve, reject)
    } else {
        resolve(v)
    }
}

module.exports = MyPromise
hh_self
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
手写Promise
liuj4 | 自娱自乐
07-16 122
1. 无链式then // 先定义三个常量表示状态 var PENDING = 'pending'; var FULFILLED = 'fulfilled'; var REJECTED = 'rejected'; function MyPromise(fn) { this.status = PENDING; // 初始状态为pending this.value = null; // 初始化value this.err = null; // 初始化e
Promise手写源码以及api详解-----学了就会学完就忘系列
杜杜的博客
06-09 287
/* 1、通过class关键字创建一个类 MyPromise 2、我们需要使用构造函数constructor 来接受这个构造函数,executor代表执行器(执行器是立即执行的,执行器就代表回调函数) */ const PENGDING = 'pending' const FULFILLED = 'fulfilled' const REJECTED = 'rejected' class MyPromise { constructor(executor) { // 当前
手写promise大致源码
weixin_45429409的博客
11-27 349
【代码】手写promise大概源码。 原生js大致实现promise源码
JS手写Promise源码
12-19
为什么要手写Promise？1、深入理解Promise的工作原理：手写Promise可以帮助我们更深入地理解Promise的工作原理和内部机制。通过手动实现Promise的核心功能，如异步调用、状态管理和回调处理，我们可以更好地理解...
手写Promise.js
11-13
Promise的手写代码，请配合博客《JavaScprit》异步编程（三）深入浅出Promise使用
Promise-A-Plus:纯 TypeScript 手写 Promise A+
05-29
手写 Promise A+ English： 术语 解决（fulfill） 指的是一个 promise 成功时进行的一系列操作，如状态的改变、回调的执行。虽然规范中使用 fulfill 来表示解决，但是目前常用 resolve 来取代。 拒绝（reject） 指的是一个 promise 失败时进行的操作。 终值（eventual value） 所谓终值，指的是 promise 被解决是传递给解决回调的值，由于 promise 有一次性的特征，因此当这个值被传递的时候，标志着 promise 等待态的结束，故称之为终值，也简称为值（value）。 据因（reason） 拒绝的原因，指的是 promise 被拒绝是传递给拒绝回调函数的值。 Promise 的状态 一个 Promise 的当前状态必须为以下三种状态中的一种 等待态（pending） 处于等待态时，promise 可以迁移至执行态
非常不错的手写输入法源码
01-22
手写输入法 完整的。有利于对输入法开发的入门和深入学习。
手写涂鸦源码.rar
05-09
简单的手写涂鸦源码，可以作为参考用
前端-JavaScrip-Promise-手写Promise
最新发布
07-25
手写Promise源码 遵循Pormise/A+规范 适合学习Promise源码的同学
fackAchieve:手写ES6高级函数，手写Promise，模拟数据结构 ,手写常用工具库函数及框架源码模拟实现
05-14
手写 es6 函数，Promise 特性，lodash 库的函数实现,模拟 vue,React 等前端框架的实现和原理的理解。 functions 文件夹 手动实现各种函数，包括不限于 ES6 等函数的方法 内容对应表 Array 方法名称(name) 位置...
【手写 Promise 源码】第十三篇 - Promise.allsettled 和 Promise.any 的实现
BraveWangDev
02-01 887
本篇，主要实现 Promise 静态 API：`Promise.allSettled` 和 `Promise.any`，主要涉及以下几个点：1，测试原生 Promise.allsettled 的使用；2，Promise.allsettled 原理分析、源码实现、功能测试；3，Promise.any 原理分析、源码实现、功能测试；
写给小白的手写promise源码
Lin__hr的博客
07-04 168
promise是解决异步编程的一种方案，可以解决回调地狱等问题，promise是有状态的，根据promise的状态采用不同的处理结果，promise在如今的前端领域应用是否广泛，所以作为前端学习者，一定要掌握promise及其内部原理，同时·，这也是面试的高频考点.........
前端进阶高薪必看-手写源码
青梅煮码
05-22 171
前言 此系列作为笔者之前发过的前端高频面试整理的补充 会比较偏向中高前端面试问题 当然大家都是从新手一路走过来的 感兴趣的朋友们都可以看哈 初衷 我相信不少同学面试的时候最怕的一个环节就是手写代码 大家一定听过这句话talk is cheap, show me the code没事 此文章不仅包含了前端经典的手写源码面试题 还包含了大量的分析和引导 ...
手写promise面试
01-08
手写Promise面试是一个通过手写代码来展示对Promise的理解和掌握程度的面试环节。在面试中，面试官往往会要求面试者用纸笔手写一个简单的Promise实现，或者是解答一些与Promise相关的问题。 首先，面试者需要熟悉Promise的基本概念和用法，包括Promise的三种状态（pending、fulfilled、rejected）、then方法的使用，以及Promise的错误处理等内容。 其次，在手写Promise的环节中，面试者需要能够清晰地表达出Promise的基本结构和实现方式，包括Promise的构造函数、resolve和reject方法的定义，以及then方法和catch方法的实现。 除此之外，面试者还需要展示出对Promise链式调用和异步操作的处理能力，以及如何正确地处理Promise中的错误和异常情况。 总的来说，手写Promise面试是一个考察面试者对Promise的理解程度、编码能力和解决问题能力的环节，通过这个环节，面试官可以更直观地了解面试者对Promise的掌握程度和工作实际能力。因此，在准备手写Promise面试时，面试者需要通过大量的练习和理解，确保自己能够熟练地手写出一个符合Promise规范的简单实现，并对相关问题进行正确的解答。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hh_self

您的鼓励将是我原创最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值