简易promise的实现

Posted 2021-11-23 anxiaoyu

最近在思考promise的实现原理

于是准备自己写一个简单的demo

一开始想到的问题有两个

1.链式调用

2.异步顺序执行

-------------------------------------------------

 

我们先声明一个异步操作的函数 来模拟异步请求

    function http(url){
        return new MyPromise(function(resolve,reject){
            setTimeout(function(){
                resolve(url);
            },1000)
        })
    }

 

下面就开始写一个简单的promise

有 then,resolve，reject方法

1.then里面会有一个回调方法，我们用callback存起来

2.then回调之后可能会 return，我们用 res保存 callback的返回值，丢到下一个then的resolve中，作为参数。

3.注意，有时候我们没写then方法，所以没有回调。这个时候就要判断了，不需要执行回调

 

    function MyPromise(fn) {
        var res = null,
　　　　　　　callback = null;
        function resolve(val) {
            if(typeof(callback) === ‘function‘){
                res = callback(val);
            }
        }

        function reject(val){
            if(typeof(callback) === ‘function‘){
                res = callback(val);
            }
        }
        
        this.then = function (cb) {
            callback = cb;
                return new MyPromise(function(resolve,reject){
                     setTimeout(() => {
                         resolve(res);
                    }, 3000);
                })
        };

        fn(resolve,reject);
    }

 

现在我们调用一下

    http(‘www.123.com‘).then(function(res){
        console.log(res)
        return 123132;
    }).then(function(res){
        console.log(res)
     })

 输出

和我们预期的一样，第一个 then里面的参数也传到第二个then方法中了

但是这样也有很多问题

 

1.第一个异步时间是1000ms,then方法里面的异步时间是 3000ms

加入第二个请求比第一个快，那个 前面的return 后面接收不到。结果输出undefiend

 

2.如果第一个 return一个异步请求，那么 第二个then收到的是一个promise对象，而不是 promise resolve之后的值

请看下一章