大前端学习1-1__深入javascript_手写Promise

最新推荐文章于 2024-04-04 15:48:33 发布
最新推荐文章于 2024-04-04 15:48:33 发布
阅读量115 收藏
点赞数
分类专栏： 大前端学习 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/socaicaicaicai/article/details/108877123
版权

手写Promise

手写Promise

分析：

  1. promise是一个类, 传入参数是回调函数(执行器),函数会立即执行
  2. promise有三种状态,分别是等待 PENDING 成功 FULFILLED 失败RJECKTED,且一旦由pending转为另外两种状态之后不得更改
  3. 在执行器中调用 resolve 和reject函数是用来更改状态的 从pending-> fulfilled 或者从pending-> rejected
  4. 传递给resolve 就是成功传递的值 ， 传给reject的就是失败的原因
  5. then 方法内部做的事情就是判断状态 成功的话调用成功的回调函数，失败的话调用失败的回调函数，另外then方法是promise原型对象上的方法
  6. 当前状态为等待就是异步的时候我们不知道执行失败还是成功 ，所以把失败和成功的回调函数保存起来，在 resolve和rekect中判断 失败回调和成功回调是否有，存在就执行并传参
  7. then方法的链式调用每个都要返回一个proimise对象， 和把上一个返回值给下一个then方法
  8. then中不能返回当前的promise对象,会导致promise对象的循环调用
// 5. 定义 promise的3中状态为常量  这三种状态的值不会改变了所以定义为常量
const PENDING = 'penging';
const FULFILLED = 'fulfilled';
const RJECKTED = 'rejected';

//  定义一个MyPromise的类
class MyPromise {
    //     接收执行器
    constructor(exector) {
        //  立即调用执行器,并传递两个回调函数的参数 resolve,reject
        exector(this.resolve, this.reject)
    }
    status = PENDING //  设置初始状态为PENDING
    // 定义成功的参数 和失败的原因
    value = undefined; // 成功后的值
    reason = undefined; // 失败后的值

    // successCallcack = undefined // 保存成功回调函数 
    // failCallback = undefined // 保存失败回调函数 

    successCallcack = [] // 链式保存成功回调函数数组
    failCallback = [] // 链式保存失败回调函数数组
    //  定义 resolve,reject 定义为箭头函数的原因是想让内部this的指向指向MyPromise对象 因为这两个函数是直接调用的
    resolve = value => {
        // 判断状态是否是等待 等待的话就return
        if (this.status ==== PENDING) return
        //更改为成功状态
        this.status = FULFILLED
        // 保存成功之后的值
        this.value = value
        // 判断成功是否保存了成功回调函数，保存了就执行并传参
        // this.successCallcack && this.successCallcack(this.value)

        // 当前成功的回调还有成功回调就继续执行并删除 直到数组中没有成功的回调函数
        while (this.successCallcack.length) this.successCallcack.shift()()
    }

    reject = (reason) => {
        //  判断状态是否是等待 等待的话就return
        if (this.status ==== PENDING) return
        //  更改为失败状态
        this.status = RJECKTED
        // 保存失败后的原因
        this.reason = reason
        // 判断失败是否保存了失败回调函数，保存了就执行并传参
        // this.failCallback = this.failCallback(this.reason)


        // 当前失败的回调还有成功回调就继续执行并删除 直到数组中没有失败的回调函数
        while (this.failCallback.length) this.failCallback.shift()(this.reason)


    }
    //  promise的实例上有一个then方法 接收两个参数 成功和失败的回调函数
    then(successCallcack, failCallback) {
        successCallcack = successCallcack ? successCallcack : value => value
        failCallback = failCallback ? failCallback : reason => {
            throw reason
        }
        // 返回promise对象实现链式调用
        let promise2 = new MyPromise((resolve, reject) => {
            if (this.status === FULFILLED) {
                // 13成功 调用成功回调 并传给函数成功的值
                setTimeout(() => {
                    try {
                        let x = successCallcack(this.value)
                        // 传递给下个then方法的回调函数
                        // 如果当前的x 是普通值就传给下个对象，如果是promise对象就查看返回结果 根据结果判断调用resolve还是reject
                        // resolve(x)
                        resolvePromise(promise2, x, resolve, reject)
                    } catch (error) {
                        reject(error)
                    }
                }, 0)
            } else if (this.status === RJECKTED) {
                //  失败 调用失败回调 并传给函数失败的原因
                setTimeout(() => {
                    try {
                        let y = failCallback(this.reason)
                        // 传递给下个then方法的回调函数
                        reject(y)
                    } catch (error) {
                        reject(error)
                    }
                }, 0)
            } else {
                // 处理异步 等待的状态的将失败或成功的回调保存起来
                // this.successCallcack = successCallcack
                // this.failCallback = failCallback

                // 多个异步then的链式编程所以successCallcack和failCallback应该是个数组
                // this.successCallcack.push(successCallcack)
                // this.failCallback.push(failCallback)

                //等待
                this.successCb.push(() => {
                    setTimeout(() => {
                        try {
                            let x = successCb(this.value)
                            resolvePromise(promise2, x, resolve, reject)
                        } catch (error) {
                            reject(error)
                        }
                    }, 0)
                });
                this.failCb.push(() => {
                    setTimeout(() => {
                        try {
                            let x = failCb(this.err)
                            resolvePromise(promise2, x, resolve, reject)
                        } catch (error) {
                            reject(error)
                        }
                    }, 0)
                });
            }
        })

        return promise2
        // . 链式编程中 then 中调用成功和失败的回调函数
    }


    // 其他方法

    catch (cb) {
        return this.then(undefined, cb)
    } finally(cb) {
        return this.then(value => {
            return MyPromise.resolve(cb()).then(() => value);
        }, err => {
            return MyPromise.resolve(cb()).then(() => {
                throw err
            })
        })
    }
    // 静态方法all
    static all(arr) {
        let result = [];
        let index = 0;

        return new MyPromise((resolve, reject) => {
            function addData(key, value) {
                result[key] = value;
                index++;
                if (index === arr.length) {
                    resolve(result)
                }
            }
            for (let i = 0; i < arr.length; i++) {
                let current = arr[i];
                if (current instanceof MyPromise) {
                    current.then(value => addData(i, value), err => reject(err))
                } else {
                    addData(i, arr[i])
                }
            }

        })
    }
    // 静态方法resolve
    static resolve(value) {
        // 判断传进来的value是不是属于MyPrimise对象 属于返回value 不属于返回一个新的MyPromise对象
        if (value instanceof MyPromise) {
            return value
        } else {
            return new MyPromise((resolve) => resolve(value))
        }
    }
}

function resolvePromise(promise2, x, resolve, reject) {
    // 返回重复引用的错误
    if (promise2 === x) {
        return reject(new TypeError('重复引用了'))
    }
    if (x instanceof MyPromise) {
        // x属于MyPromise对象调用then方法返回 resolve, reject
        // x.then(value => resolve(value), reason => reject(reason)))
        // 优化
        x.then(resolve, reject)
    } else {
        resolve(x)
    }

}




// module.export(MyPromise)
// 测试代码
let promise = new MyPromise((resolve, reject) => {
    // 正常调用传参
    resolve('成功')
    // reject('失败')

    //  处理异步
    // setTimeout(() => {
    //     resolve('成功')
    // }, 2000)

    // 处理多个then的异步
    // setTimeout(() => {
    //     resolve('成功')
    // }, 2000)
})
// 1. 可以成功的输出成功失败  也验证了状态一旦由pending更改为fulfilled之后不能改为rejected
// 2. 等待两秒后输出成功
// 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);
// })



// function other() {
//     return new MyPromise((resolve, reject) => {
//         resolve('other')
//     })
// }

// promise.then(value => {
//     console.log(value);
//     return other()
// }, reason => {
//     console.log(reason);
// })

// function p1() {
//     return new MyPromise((resolve) => {
//         setTimeout(() => {
//             resolve('p1')
//         }, 2000)
//     })
// }

// function p2() {
//     return new MyPromise((resolve) => {
//         resolve('p2')
//     })
// }

// p2().finally(()=>{
//     console.log('finally');

// }).then(res=>{
//     console.log(res);

// },err=>{
//     console.log(err);

// })
// MyPromise.all(['a', 'b', p1(), p2(), 'c']).then(res => {
//     console.log(res);

// })
// MyPromise.resolve(100).then(res => console.log(res))
// function other() {
//     return new MyPromise((resolve, reject) => {
//         resolve('other')
//     })
// }
// 当前promise对象重复调用
// let p1 = promise.then(value => {
//     // throw new Error('自定义then错误')
//     console.log(value);
//     // return p1;
// }, err => {
//     console.log(err);
//     return 1000
// })
不一般的菜瓜
关注
专栏目录
深入理解 JavaScript 中的 Promise ：从基础概念到进阶用法、手写promise
Allen-
07-10 3207
Promise是JavaScript中的一种对象，用于表示一个在未来某个时间点才会完成（或失败）的异步操作及其结果。它提供了一种处理异步操作的统一接口，使代码更加简洁和易于理解。与传统的回调函数相比，Promise能够更好地处理异步操作的结果和错误。Promise作为JavaScript中处理异步操作的一种重要机制，极大地简化了代码编写和异步流程控制。
web前端高级JavaScript - 基于原生JS及PromiseA+规范实现手写Promise（兼容IE8）
lixiaosenlin的专栏
12-01 5947
基于原生js实现Promise https://promisesaplus.com (function(){ function Promise(executor){ //要求传递的executor必须是一个函数 if(typeof executor !== "function") throw new TypeError("Promise resolver "+executor+" is not a function"); var self = this;//当前Promise实例 //.
js-Promise：手写系列手写promise，vue ..
02-21
js-Promise 手写一个简单的承诺无极初级核心发布订阅模式
js之手写promise
qq_42744920的博客
09-12 222
手写promise
js-手写Promise
qq_32644987的博客
06-12 1023
1、Promise 创建MyPromise.js文件，在里面进行MyPromise逻辑处理 我们先看原生Promise的使用： new Promise((resolve,reject) => { }) 有代码可以看出：原生Promise通过new创建Promise对象，然后传入两个函数resolve、reject参数用于后续执行； 好的，那我们从这方面开始手写MyPromise。 首先，需要通过new创建对象，那就需要在内部实现构造函数 其次构造函数需要传入两个函数作为执行者 Pormi
js手写promise
yuanqi3131的博客
12-28 496
JS手写Promise Promise是异步编程的一种解决方案，简单的来说，Promise作为一个容器，保存着某个未来才会结束的事件的结果。 Promise有两个特点： 1）对象的状态不受外界影响。Promise有三种状态：pengding（进行中），fulfilled（完成），rejected（失败），只有异步操作的结果，可以决定当前是哪一个状态。 2）一旦状态改变，就不再改变。 class MyPromise { static PENDING = 'pending'; static F
js 手写 Promise
weixin_30701521的博客
04-28 150
/* * pending:初始化成功 * fulfilled:成功 * rejected：失败 * */ function Promise(cback){ this.status = 'pending'; this.value = undefined this.reason = undefined this.fulfille...
前端-JavaScrip-Promise-手写Promise
最新发布
07-25
手写Promise源码 遵循Pormise/A+规范 适合学习Promise源码的同学
handwriting:前端手写码系列:beaming_face_with_smiling_eyes:
03-26
1. **JavaScript基础知识**：学习者可以期待理解JavaScript的基础语法，如变量声明、数据类型（字符串、数字、布尔、对象、数组等）、条件语句（if...else、switch）、循环（for、while）、函数定义与调用等。...
js 手写Promise
qq_44540152的博客
12-14 924
/* * 自定义Promise函数模块 */ (function (window){ /* * Promise构造函数 * excutor:执行器函数(同步执行) */ const PENDING = 'pending' const RESOLVED = 'resolved' const REJECTED = 'rejected' function Promise_(excutor) { this.status =
JS手写一个自定义Promise操作示例
10-15
主要介绍了JS手写一个自定义Promise操作,结合实例形式分析了JS自定义Promise的实现与使用相关操作技巧,需要的朋友可以参考下
JavaScript手写Promise
奋斗在路上
02-14 388
Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。 Promise 对象是一个代理对象（代理一个值），被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。 这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象 一个 Promise有...
js：手写一个promise
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
04-10 572
如何实现一个promise？
js手写方法之--Promise
Lawliet_Hero的博客
12-31 238
js手写方法之–Promise Promise与async/await是ES6中常用的异步操作方法，为了深刻理解Promise的用法，解读源码是一个很好的方案。其核心方法是Promise构造函数，以及.then方法，其他静态方法都是在此基础之上封装的 为了方便理解，以下代码经过了适当删减 // Promise状态常量值 // 状态还未变化 const PENDING = 0 // 成功 const FULLFILLED = 1 // 失败 const REJECTED = 2 function MyProm
Promise解析
Andrew_Lii的博客
09-18 266
Promise 的含义 Promise 是异步编程的一种解决方案，比起传统的解决方案如：事件的监听和回调函数，要更加强大。ES6 将其写进了语言标准中，统一了用法，原生提供了Promise对象。所谓 Promise，简单来说就是一个装载着在未来才会开始和结束的事件的容器，Promise 有以下两个特点： Promise 的状态不受外界影响。Promise 中装载着一个在未来才会开始和结束的事件...
JS手写一个简单的Promise实现
Blog沙漏在下雨
07-20 648
手写一个简单的promise
promise学习——js手写promise
老古懂的博客
01-04 2532
手写promise
【JavaScript】手写Promise
编码世界
05-15 4662
面试中经常会被问到你会手写Promise吗？本文带你手撸Promsie
JS详解-手写Promise！！！
IIIIIAN
04-04 1518
针对js的深入理解，作者学习并撰写以下文章，由于理解认知有限难免存在偏差，请大家指正！所有定义来自mdn。对象表示异步操作最终的完成（或失败）以及其结果值.描述：一个 Promise是一个代理，它代表一个在创建 promise 时不一定已知的值。它允许你将处理程序与异步操作的最终成功值或失败原因关联起来。这使得异步方法可以像同步方法一样返回值：异步方法不会立即返回最终值，而是返回一个promise，以便在将来的某个时间点提供该值。
手写JavaScript代码：实现new操作符与JSON.stringify
"本文主要介绍了两个中高级前端面试中常见的JavaScript手写代码题目：实现`new`操作符和`JSON.stringify`方法。通过理解和实践这些知识点，可以提升前端开发者的技能水平，为面试做好准备。" 在前端面试中，手写...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值