zoukankan      html  css  js  c++  java
  • 简易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之后的值

    请看下一章

  • 相关阅读:
    一个比较日期大小的javascript函数
    导出Excel(利用xml标记)
    Oracle 数据库的备份与恢复
    总是浮在页面底部的广告DIV
    实用批处理文件 (IP设置.bat, 清理系统垃圾.bat, atc.)
    【转:来源不详】几家IT公司面试全揭秘
    二级联动(javascript Array)
    JS实现定时循环上翻
    ORACLE函数大全 [转]
    C#中Timer类与线程
  • 原文地址:https://www.cnblogs.com/anxiaoyu/p/10625439.html
Copyright © 2011-2022 走看看