js原理——手写promise

已于 2024-02-09 14:00:54 修改
阅读量263 收藏 4
点赞数 7
文章标签： javascript 前端 vue.js
于 2024-02-09 13:02:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dahuihuiya/article/details/136084912
版权

1.1 构造函数

        创建MyPromise并设置构造函数；

class MyPromise{
    constructor(func) {
        // 定义resolve/reject
        const resolve = (result) => {
            console.log('resolve执行',result)
        }
        const reject = (result) => {
            console.log('reject执行',result)
        }
        // 执行回调函数
        func(resolve,reject)
    }
}

1.2 状态与原因

        为MyPromise添加状态（pending：待定、fulfilled：已兑现、rejected：已拒绝）与原因；

// 状态
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class MyPromise{

    // 添加状态/原因
    state = PENDING
    result = undefined

    constructor(func) {
        // 修改状态pending -> fulfilled/rejected
        const resolve = (result) => {
            if(this.state === PENDING) {
                this.state = FULFILLED
                this.result = result
            }
        }
        const reject = (result) => {
            if(this.state === PENDING) {
                this.state = REJECTED
                this.result = result
            }
        }
        // 执行回调函数
        func(resolve,reject)
    }
}

1.3 .then方法

1.3.1 成功和失败的回调

......

class MyPromise{

    ......   

    then(onFulfilled,onRejected) {
        // 判断
        onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : x => x
        onRejected = typeof onRejected === 'function' ? onRejected : x => { throw x }
        
        // 执行回调
        if(this.state === FULFILLED) {
            onFulfilled(this.result)
        } else if (this.state === REJECTED) {
            onRejected(this.result)
        }
    }
}

1.3.2 异步与多次调用 

......

class MyPromise{

    ......

    // 定义实例属性
    #handlers = []

    constructor(func) {
        const resolve = (result) => {
            if(this.state === PENDING) {

                ......

                // 调用成功回调
                this.#handlers.forEach(({onFulfilled}) => {
                    onFulfilled(this.result)
                })
            }
        }
        const reject = (result) => {
            if(this.state === PENDING) {

                ......

                // 调用失败回调
                this.#handlers.forEach(({onRejected}) => {
                    onRejected(this.result)
                })
            }
        }
        // 执行回调函数
        func(resolve,reject)
    }

    then(onFulfilled,onRejected) {
        
        ......
        
        // 执行回调
        if(this.state === FULFILLED) {
            onFulfilled(this.result)
        } else if (this.state === REJECTED) {
            onRejected(this.result)
        } else if (this.state === PENDING) {
            // 保存回调函数 等待resolve()或reject()执行
            this.#handlers.push({
                onFulfilled,onRejected
            })
        }
    }
}

1.4 异步任务

        封装异步任务函数：

// 封装函数
function runAsynctask(callback) {
    if(typeof queueMicrotask === 'function') {
        queueMicrotask(callback)
    } else if (typeof MutationObserver === 'function') {
        const obs = new MutationObserver(callback)
        const divNode = document.createElement('div')
        obs.observe(divNode,{childList:true})
        divNode.innerText = 'huihui'
    } else {
        setTimeout(callback,0)
    }
}


......


class MyPromise{

    ......

    then(onFulfilled,onRejected) {
        
        ......
        
        // 执行回调
        if(this.state === FULFILLED) {
            runAsynctask(() => {
                onFulfilled(this.result)
            })
        } else if (this.state === REJECTED) {
            runAsynctask(() => {
                onRejected(this.result)
            })
        } else if (this.state === PENDING) {
            this.#handlers.push({
                onFulfilled:() => {
                    runAsynctask(() => {
                        onFulfilled(this.result)
                    })
                },onRejected:() => {
                    runAsynctask(() => {
                        onRejected(this.result)
                    })
                }
            })
        }
    }
}

1.5 链式编程

1.5.1 处理异常/普通内容

    then(onFulfilled,onRejected) {
        // 判断
        ...
        
        // 返回promise实例
        const p = new MyPromise((resolve,reject) => {
            if(this.state === FULFILLED) {
                runAsynctask(() => {
                    try {
                        const x = onFulfilled(this.result)
                        resolve(x)
                    } catch(error) {
                        reject(error)
                    }
                })
            } else if (this.state === REJECTED) {
                ...
            } else if (this.state === PENDING) {
                ...
            }
        })
        
        return p
    }

1.5.2 处理返回promise

if(this.state === FULFILLED) {
    runAsynctask(() => {
       try {
          const x = onFulfilled(this.result)
          // 返回promise
          if (x instanceof MyPromise) {
             x.then(res => resolve(res),err => reject(err))
          } else {
             resolve(x)
          }
      } catch(error) {
          reject(error)
      }
    })
}

        1.5.3 处理重复引用

if(this.state === FULFILLED) {
    runAsynctask(() => {
        try {
            const x = onFulfilled(this.result)

            // 处理重复引用
            if (x === p) {
            // 抛出错误
                 throw new TypeError('Chaining cycle detected for promise #<Promise>')
            }
            ......
        }
    })
}

1.5.4 rejected状态

//抽取函数
function resolvePromise(p,x,resolve,reject) {
    if(x === p) {
        throw new TypeError('Chaining cycle detected for promise #<Promise>')
    }
    if (x instanceof MyPromise) {
        x.then(res => resolve(res), err => reject(err))
    } else {
        resolve(x)
    }
}
if(this.state === FULFILLED) {
    runAsynctask(() => {
        try {
            const x = onFulfilled(this.result)

            // 调用函数
            resolvePromise(p, x, resolve, reject)
        } catch(error) {
            reject(error)
        }
    })
} else if (this.state === REJECTED) {
    runAsynctask(() => {
        const x = onRejected(this.result)

        // 调用函数
        resolvePromise(p,x,resolve,reject)
    })
}

1.5.5 pending状态

else if (this.state === PENDING) {
    this.#handlers.push({
        onFulfilled:() => {
            runAsynctask(() => {
                try {
                    const x = onFulfilled(this.result)
                    resolvePromise(p,x,resolve,reject)
                } catch (error) {
                    reject(error)
                }
            })
        },onRejected:() => {
            runAsynctask(() => {
                try {
                    const x = onRejected(this.result)
                    resolvePromise(p,x,resolve,reject)
                } catch (error) {
                    reject(error)
                }
            })
        }
   })
}

1.6 实例方法

1.6.1 catch方法

class MyPromise{

    ......

    constructor(func) { ...... }

    then(onFulfilled,onRejected) { ...... }

    catch(onRejected) {
        return this.then(undefined,onRejected)
    }
}

1.6.2 finally方法

class MyPromise{

    ......

    constructor(func) { ...... }
    then(onFulfilled,onRejected) { ...... }
    catch(onRejected) {...... }

    finally(onFinally) {
        return this.then(onFinally,onFinally)
    }
}

1.7 静态方法

1.7.1 resolve 方法

    // resolve方法返回已完成状态的promise对象
    static resolve(value) {
        if(value instanceof MyPromise) {
            return value
        }
        return new MyPromise((resolve) => {
            resolve(value)
        })
    }

 1.7.2 reject 方法

    // 返回rejected状态的Promise
    static reject(value) {
        return new MyPromise((undefined, reject) => {
          reject(value)
        })
    }

1.7.3 race方法

    // race方法等待任意一个请求完成后进行响应
    static race(promises) {
        return new MyPromise((resolve,reject) => {
            // 判断是否是数组
            if(!Array.isArray(promises)) {
                return reject(new TypeError('Argument is not iterable'))
            }
            promises.forEach(p => {
                MyPromise.resolve(p).then(res => { resolve(res) },err => { reject(err) })
            })
        })
    }

1.7.4 all方法

    static all(promises) {
        return new MyPromise((resolve,reject) => {
            if(!Array.isArray(promises)) {
                return reject(new TypeError('Argument is not iterable'))
            }
            promises.length === 0 && resolve(promises)
            const results = []
            let count = 0
            promises.forEach((p,index) => {
                MyPromise.resolve(p).then(res => {
                    results[index] = res
                    count++
                    // 处理所有兑现
                    count === promises.length && resolve(results)
                },err => {
                    // 处理第一个拒绝
                    reject(err)
                })
            })
        })
    }

1.7.5 allSettled方法

    // allSettled方法返回promise状态全部敲定的结果
    static allSettled(promises) {
        return new MyPromise((resolve,reject) => {
            if(!Array.isArray(promises)) {
                return reject(new TypeError('Argument is not iterable'))
            }
            promises.length === 0 && resolve(promises)

            // 等待全部敲定
            const results = []
            let count = 0
            promises.forEach((p,index) => {
                MyPromise.resolve(p).then(res => {
                    results[index] = {status:FULFILLED,value:res}
                    count++
                    count === promises.length && resolve(results)
                },err => {
                    results[index] = {status:REJECTED,reason:err}
                    count++
                    count === promises.length && resolve(results)
                })
            })
        })
    }

1.7.6 any 方法

    static any(promises) {
        return new MyPromise((resolve,reject) => {
            if(!Array.isArray(promises)){
                return reject(new TypeError('Argument is not iterable'))
            }
            promises.length === 0 && reject(new AggregateError(promises, 'All promises were rejected'))

            const errors = []
            let count = 0
            promises.forEach((p,index) => {
                MyPromise.resolve(p).then(res => {
                    // 第一个兑现
                    resolve(res)
                },err => {
                    // 全部拒绝
                    errors[index] = err
                    count++
                    count === promises.length && reject(new AggregateError(errors, 'All promises were rejected'))
                })
            })
        })
    }

2. 完整写法


// 封装函数
function runAsynctask(callback) {
    if(typeof queueMicrotask === 'function') {
        queueMicrotask(callback)
    } else if (typeof MutationObserver === 'function') {
        const obs = new MutationObserver(callback)
        const divNode = document.createElement('div')
        obs.observe(divNode,{childList:true})
        divNode.innerText = 'huihui'
    } else {
        setTimeout(callback,0)
    }
}

// 抽取函数
function resolvePromise(p, x, resolve, reject) {
    if (x === p) {
        throw new TypeError('Chaining cycle detected for promise #<Promise>')
    }
    if (x instanceof MyPromise) {
        x.then(res => resolve(res), err => reject(err))
    } else {
        resolve(x)
    }
}

// 状态
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class MyPromise{

    // 添加状态/原因
    state = PENDING
    result = undefined

    // 定义实例属性
    #handlers = []

    constructor(func) {
        // 修改状态pending -> fulfilled/rejected
        const resolve = (result) => {
            if(this.state === PENDING) {
                this.state = FULFILLED
                this.result = result
                // 调用成功回调
                this.#handlers.forEach(({onFulfilled}) => {
                    onFulfilled(this.result)
                })
            }
        }
        const reject = (result) => {
            if(this.state === PENDING) {
                this.state = REJECTED
                this.result = result
                // 调用失败回调
                this.#handlers.forEach(({onRejected}) => {
                    onRejected(this.result)
                })
            }
        }
        // 执行回调函数
        func(resolve,reject)
    }

    then(onFulfilled,onRejected) {
        // 判断
        onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : x => x
        onRejected = typeof onRejected === 'function' ? onRejected : x => { throw x }
        
        // 返回promise实例
        const p = new MyPromise((resolve,reject) => {
            if(this.state === FULFILLED) {
                runAsynctask(() => {
                    try {
                        const x = onFulfilled(this.result)

                        // 调用函数
                        resolvePromise(p, x, resolve, reject)
                    } catch(error) {
                        reject(error)
                    }
                })
            } else if (this.state === REJECTED) {
                runAsynctask(() => {
                    const x = onRejected(this.result)

                    // 调用函数
                    resolvePromise(p,x,resolve,reject)
                })
            } else if (this.state === PENDING) {
                this.#handlers.push({
                    onFulfilled:() => {
                        runAsynctask(() => {
                            try {
                                const x = onFulfilled(this.result)
                                resolvePromise(p,x,resolve,reject)
                            } catch (error) {
                                reject(error)
                            }
                        })
                    },onRejected:() => {
                        runAsynctask(() => {
                            try {
                               const x = onRejected(this.result)
                               resolvePromise(p,x,resolve,reject)
                            } catch (error) {
                                reject(error)
                            }
                        })
                    }
                })
            }
        })
        
        return p
    }

    catch(onRejected) {
        return this.then(undefined,onRejected)
    }

    finally(onFinally) {
        return this.then(onFinally,onFinally)
    }

    // resolve方法返回已完成状态的promise对象
    static resolve(value) {
        if(value instanceof MyPromise) {
            return value
        }
        return new MyPromise((resolve) => {
            resolve(value)
        })
    }

    // 返回rejected状态的Promise
    static reject(value) {
        return new MyPromise((undefined, reject) => {
          reject(value)
        })
    }

    // race方法等待任意一个请求完成后进行响应
    static race(promises) {
        return new MyPromise((resolve,reject) => {
            // 判断是否是数组
            if(!Array.isArray(promises)) {
                return reject(new TypeError('Argument is not iterable'))
            }
            promises.forEach(p => {
                MyPromise.resolve(p).then(res => { resolve(res) },err => { reject(err) })
            })
        })
    }

    static all(promises) {
        return new MyPromise((resolve,reject) => {
            if(!Array.isArray(promises)) {
                return reject(new TypeError('Argument is not iterable'))
            }
            promises.length === 0 && resolve(promises)
            const results = []
            let count = 0
            promises.forEach((p,index) => {
                MyPromise.resolve(p).then(res => {
                    results[index] = res
                    count++
                    // 处理所有兑现
                    count === promises.length && resolve(results)
                },err => {
                    // 处理第一个拒绝
                    reject(err)
                })
            })
        })
    }

    // allSettled方法返回promise状态全部敲定的结果
    static allSettled(promises) {
        return new MyPromise((resolve,reject) => {
            if(!Array.isArray(promises)) {
                return reject(new TypeError('Argument is not iterable'))
            }
            promises.length === 0 && resolve(promises)

            // 等待全部敲定
            const results = []
            let count = 0
            promises.forEach((p,index) => {
                MyPromise.resolve(p).then(res => {
                    results[index] = {status:FULFILLED,value:res}
                    count++
                    count === promises.length && resolve(results)
                },err => {
                    results[index] = {status:REJECTED,reason:err}
                    count++
                    count === promises.length && resolve(results)
                })
            })
        })
    }

    static any(promises) {
        return new MyPromise((resolve,reject) => {
            if(!Array.isArray(promises)){
                return reject(new TypeError('Argument is not iterable'))
            }
            promises.length === 0 && reject(new AggregateError(promises, 'All promises were rejected'))

            const errors = []
            let count = 0
            promises.forEach((p,index) => {
                MyPromise.resolve(p).then(res => {
                    // 第一个兑现
                    resolve(res)
                },err => {
                    // 全部拒绝
                    errors[index] = err
                    count++
                    count === promises.length && reject(new AggregateError(errors, 'All promises were rejected'))
                })
            })
        })
    }
}

dahuihuiya
关注
  • 7
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JS——手写Promise
GoodLuck_wu5的博客
08-07 163
目录前言Promise的大体框架Promise构造函数实现Promise.then()方法和catch()方法的实现完整代码 另一篇文章：JS——Promise题目篇幅过长，这篇需要了解东西也多，因此分离出来。 前言 深入了解过 Promise 的人都知道，Promise 所说的异步执行，只是将 Promise 构造函数中 resolve，reject 方法和注册的 callback 转化为 eventLoop的 microtask/Promise Job，并放到 Event Loop 队列中等待执行，也就
前端知识点——手写Promise
AeoRus的博客
06-10 113
写在前面 笔记内容大多出自于拉勾教育大前端高薪训练营的教程，因此也许会和其他文章雷同较多，请担待。 Promise核心逻辑实现 Promise就是一个类，在执行这个类的时候需要传递一个执行器出去，执行器会立即执行 Promise有三种状态 -> pending fulfilled rejected Promise一旦状态改变，则不会再改变 then方法内部就是判断状态，根据状态调用不同的回调 /* 简单版本-1 不支持异步情况 */ const PENDING = 'pending' const
JavaScript——手写Promise
weixin_63712639的博客
09-03 189
JavaScript——手写Promise。
前端手写(四)——手写promise系列
weixin_47450807的博客
03-27 473
一、写在前面 之前就已经手写过promise，本次手写就是为了加强记忆。 二、手写源码 // 定义三个常量 const PROMISE_STATUS_FULFILLED = 'fulfilled' const PROMISE_STATUS_PENDDING = 'pendding' const PROMISE_STATUS_REJECTED = 'rejected' function execFunc(func, value, resolve, reject) { try { let res
JS手写——手写Promise中的then、all、race等方法
ZKH129的博客
06-17 298
手写Promise
promise学习——js手写promise
老古懂的博客
01-04 2497
手写promise
JS手写——实现Promise的最大并发数控制
ZKH129的博客
07-04 1175
实现Promise的最大并发数控制
前端必须学会的经典面试题场景之一 —— 手写Promise
weixin_46709512的博客
06-06 2389
手写Promise的正确姿势~ 前端面试涨薪必学，从0实现Promise
手写promise原理——高阶函数实现——函数柯里化原理——实现通用柯里化函数——函数订阅发布模式实现——手写观察者模式
qq_44984407的博客
12-07 567
1. 高阶函数 // 高阶函数： 如果一个函数的参数是一个函数（回调函数也是高阶函数的一种） // 如果一个函数返回 一个函数 当前函数也是一个 高阶函数 // 扩展当前业务代码 function say(a,b){ console,log("say",a,b); } // 给某个方法添加方法 在执行之前调用 Function.prototype.before = function(callback){ // let _this = this; // 让this 指向say //ret
js代码-利用promise 手写一个限制最大并发的类
07-14
本主题聚焦于如何利用Promise来手写一个类，这个类可以限制并发执行的任务数量，这对于优化资源利用和防止服务器过载来说至关重要。 首先，让我们了解Promise的基本概念。Promise代表一个异步操作的最终完成或失败...
js代码-手写Promise
07-15
手写Promise是一项挑战性的任务，它可以帮助我们深入理解Promise的工作原理以及其背后的机制。本文将围绕“js代码-手写Promise”这一主题，详细解析Promise的核心概念和实现过程。 Promise有三种状态：pending...
js代码-手写 promise A+
07-16
以上就是关于手写Promise A+的一些基础知识。通过理解Promise的工作原理和A+规范，你可以更好地理解和使用Promise，同时也能为自己的JavaScript库贡献一份力量。在阅读`main.js`和`README.txt`中的代码时，可以深入...
js代码-状态模式 手写promise
07-15
手写Promise可以帮助我们深入理解其工作原理，以下将详细介绍Promise的核心概念以及如何通过JavaScript实现状态模式来构建Promise。 1. Promise的基本结构： Promise构造函数接收一个执行器函数，该函数接收两个...
ES6 新特性有哪些
weixin_64684095的博客
07-06 913
1. 拥有块级作用域，这意味着在 if 语句、for 循环、while 循环等代码块中声明的 let 变量，只在该代码块内有效。2. 不允许在同一作用域内重复声明同一个变量1. 也具有块级作用域。2. 声明时必须进行初始化赋值，且赋值后不能再重新赋值修改其值。3. 如果 const 声明的是一个对象或数组，虽然不能重新赋值整个对象或数组，但可以修改对象的属性值或数组的元素值。
Vue前端打包
weixin_63680330的博客
07-04 352
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
最新发布
Vinca@的博客
07-08 834
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
Vue 3集成krpano 全景图展示
Mr丶GUO
07-06 409
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 167
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。
js 手写promise
09-02
当你需要手写一个 Promise 的时候，你可以按照以下步骤进行： 1. 创建 Promise 构造函数，并传入一个执行器函数作为参数： ```javascript function MyPromise(executor) { // TODO: 实现 Promise 的状态和值的存储...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值