javascript:手写promise

LewisLJL

已于 2022-02-16 23:50:38 修改

阅读量325

点赞数

文章标签： javascript

于 2022-02-16 23:07:44 首次发布

本文链接：https://blog.csdn.net/weixin_39449738/article/details/122973777

版权

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>手写一个promise</h1>
    <script>
        //1.基本结构
        function myPromise(excutor) {
            let self = this;
            self.status = 'pending' //状态
            self.value = null //成功之后，返回的数据
            self.reason = null//失败的原因

            //7.解决异步问题 =>暂存区
            self.onFulfilledCallbacks = [];
            self.onRejectedCallbacks = [];


            //返回成功的结果
            function resolve(value) {
                //5.状态管理
                // 5.1 
                if (self.status == 'pending') {
                    self.value = value;  //保存成功结果
                    self.status = 'fulfilled';
                    //9.1状态变为成功 =>从暂存区依次取出执行
                    self.onFulfilledCallbacks.forEach(item => item(value))

                }
            }

            //返回失败的原因
            function reject(reason) {
                // 5.2 
                if (self.status == 'pending') {
                    self.reason = reason;  //保存成功结果
                    self.status = 'rejected';
                    //9.2状态变为失败 =>从暂存区依次取出执行
                    self.onRejectedCallbacks.forEach(item => item(reason))
                }
            }
            //4. excutor =>立即执行
            // excutor && excutor(resolve,reject);
            try {
                excutor(resolve, reject);
            } catch (error) {
                reject(error)
            }
        }

        //2.then() 通过原型 添加.then()方法 不管成功失败都会执行(fulfilled  rejected)
        myPromise.prototype.then = function (onFulfilled, onRejected) {
            //6. 确保传进来的是方法 如果不是则定义一个方法
            onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : function (data) { resolve(data) }
            onRejected = typeof onRejected === 'function' ? onRejected : function (err) { throw (err) }

            let self = this;

            //10.支持链式调用
            if (self.status === 'fulfilled') {
                return new myPromise((resolve, reject) => {
                    try {
                        let x = onFulfilled(self.value);
                        x instanceof myPromise ? x.then(resolve, reject) : resolve(x)
                    } catch (error) {
                        reject(error)
                    }
                })
            }

            if (self.status === 'rejected') {
                return new myPromise((resolve, reject) => {
                    try {
                        let x = onRejected(self.reason);
                        x instanceof myPromise ? x.then(resolve, reject) : resolve(x)
                    } catch (error) {
                        reject(error)
                    }
                })
            }
            //8.将回调函数暂存
            // if(self.status === 'pending'){
            //     self.onFulfilledCallbacks.push(onFulfilled)
            //     self.onRejectedCallbacks.push(onRejected)
            // }
            if (self.status === 'pending') {
                return new myPromise((resolve, reject) => {
                    self.onFulfilledCallbacks.push(() => {
                        let x = onFulfilled(self.value)
                        x instanceof myPromise ? x.then(resolve, reject) : resolve(x)
                    })
                })
            }

        }
        myPromise.prototype.catch = function(fn){
            return this.then(null,fn)
        }

        //3.初级调用
        // let demo = new myPromise((resolve, reject) => {
        //     console.log(111)
        //     setTimeout(() => {

        //         resolve(222)
        //     }, 2000)
        // })
        // console.log(demo)
        // demo.then(data => { console.log(data) })


        let remember = true
        let getLv = new myPromise((resolve,reject)=>{
            if(remember){
                let lv = {
                    color:'orange',
                    price:19999
                }
                resolve(lv)
            }else{
                let err = new Error('忘记了不好意思')
                reject(err)
            }
        })
        let testFn = function(){
            getLv.then((fulfilled)=>{
                console.log(fulfilled)
            }).catch((rejected)=>{
                console.log(rejected.message)
            })
        }
        testFn();

         let buyLip = (lv)=>{
             let lip = {
                 brand:'MAC',
                 color:'pink'
             }
             let msg = {
                 message:lip.brand + lip.color + lv.color,
                 lip:lip,
                 lv:lv
             }
             return new myPromise(function(y,n){
                 y(msg)
             })
         }
         let testFn2 = () =>{
             getLv.then(buyLip).then((fulfilled)=>{
                console.log(fulfilled)
             }).catch((rejected)=>{
                console.log(rejected.message)
             })
         }
         testFn2()

    </script>

</body>

</html>

测试


        let remember = true
        let getLv = new myPromise((resolve,reject)=>{
            if(remember){
                let lv = {
                    color:'orange',
                    price:19999
                }
                resolve(lv)
            }else{
                let err = new Error('忘记了不好意思')
                reject(err)
            }
        })
        let testFn = function(){
            getLv.then((fulfilled)=>{
                console.log(fulfilled)
            }).catch((rejected)=>{
                console.log(rejected.message)
            })
        }
        testFn();

         let buyLip = (lv)=>{
             let lip = {
                 brand:'MAC',
                 color:'pink'
             }
             let msg = {
                 message:lip.brand + lip.color + lv.color,
                 lip:lip,
                 lv:lv
             }
             return myPromise.resolve(msg)
         }
         let testFn2 = () =>{
             getLv.then(buyLip).then((fulfilled)=>{
                console.log(fulfilled)
             }).catch((rejected)=>{
                console.log(rejected.message)
             })
         }
         testFn2()

输出结果：

remember = true 将执行成功打印如下