• 简易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之后的值

    请看下一章

  • 相关阅读:
    16. Vue 登录存储
    JS 10位、13位时间戳转日期
    14.Vue 定义全局函数
    13.Vue+Element UI实现复制内容
    12.Vue+Element UI 获取input的值
    11.Vue安装Axios及使用
    Layui入手
    MongoDB自启动设置
    sql数据统计
    sql查询总结
  • 原文地址:https://www.cnblogs.com/anxiaoyu/p/10625439.html
Copyright © 2020-2023  润新知