简易promise的实现(一)

code

最近在思考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之后的值

请看下一章

转载于:https://www.cnblogs.com/anxiaoyu/p/10625439.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值