资讯专栏INFORMATION COLUMN

promise源码库

魏明 / 2761人阅读

摘要:先直接上源码吧。阮一峰在基础篇提到过,阮一峰基础介绍,返回的是一个新的实例,不是原来的那个实例。同理绑定和的指向。秒后,是为了让在队列的最后执行。此时将中第一个回调函数执行的赋值给了。这就验证了阮一峰在基础介绍将的下面的代码逻辑。

先直接上源码吧。

if(!window.Promise) {
    function Promise(fn) {
        var self=this;
        this.status = "pending";
        this.thenCache = [];
        this.count = 0
        if(!(this instanceof Promise)) {
            throw "Defer is a constructor and should be called width "new" keyword";
        }
        if(typeof fn !== "function") {
            throw "Defer params must be a function";
        }
        //为了让传进来的函数在then后执行
        setTimeout(function() {
            try {
                fn.call(this, self.resolve.bind(self), self.reject.bind(self))
            } catch(e) {
                self.reject(e);
            }
        }, 0);
    }
    Promise.prototype.resolve = function(value) {
        this.value = value;
        this.status = "resolved";
        this.triggerThen();
    }
    Promise.prototype.reject = function(reason) {
        this.value = reason;
        this.status = "rejected";
        this.triggerThen();
    }
    Promise.prototype.then = function(onResolve, onReject) {
        this.thenCache.push({ onResolve: onResolve, onReject: onReject });
        console.log("this", this)
        return this;
    }
    Promise.prototype.catch = function(fn) {
        if(typeof fn === "function") {
            this.errorHandle = fn;
        }
    };
    Promise.prototype.triggerThen = function() {
        console.log("this.thenCache", this.thenCache)
        console.log("this.status", this.status)
        var current = this.thenCache.shift(),
            res;
        console.log("current", current)
        if(!current && this.status === "resolved") {
            // console.log("--11--", + new Date())
            return this;
        } else if(!current && this.status === "rejected") {
            if(this.errorHandle) {
                this.value = this.errorHandle.call(undefined, this.value);
                this.status = "resolved";
                console.log("--11--", + new Date())
            }
            return this;
        };
        if(this.status === "resolved") {
            // console.log("--222--", + new Date())
            res = current.onResolve;
        } else if(this.status === "rejected") {
            console.log("--222--", + new Date())
            res = current.onReject;
        }
        this.count ++;
        if(typeof res === "function") {
            try {
                this.value = res.call(undefined, this.value);
                this.status = "resolved";
                console.log("-ffffd--", + new Date())
                this.triggerThen();
                // console.log("this.count", this.count, + new Date())
            } catch(e) {
                this.status = "rejected";
                this.value = e;
                return this.triggerThen();
            }
        } else {
            console.log("--44--")
            this.triggerThen();
        }
    }
    window.Promise = Promise;
}

之前写过如何构造一个promise库,参考的美团点评的网站,写到后面发现Promise.resolve()直接调用就会出现问题。报错上面的库,也是引用Talking Coder的一篇博客,逐渐开始理解promise内部是如何实现的了,当然还是有一些疑问。比如上面的库,需要注释window.Promise = Promise和if(!window.Promise) {} 内部的代码在debug的时候才能看得见。但如果注释掉,直接Promise.resolve()又回同样报resolve不是一个方法。

阮一峰在promise基础篇提到过,阮一峰promise基础介绍,then返回的是一个新的Promise实例,不是原来的那个实例。这里提到的原来的那个实例,我想应该是第一次实例化的Promise实例对象。这里有点不懂,为何then函数在return this后,就会返回一个新的Promise实例对象。

大概讲解下此Promise库的原理吧。

setTimeout(function() {
            try {
                fn.call(this, self.resolve.bind(self), self.reject.bind(self))
            } catch(e) {
                self.reject(e);
            }
}, 0);

call 和 bind 都是为了绑定this的指向,因为直接回调,this在浏览器里面指向的是window对象,绑定fn执行的时候this指向Promise的实例对象。同理绑定resolve和reject的this指向。
setTimout 0秒后,是为了让fn在队列的最后执行。这里的队列一会再剖析。或者说让resolve或reject在队列的最后执行。
如果去掉setTimeout 0秒后,那么在实例化Promise的时候,就会立刻执行回调fn,进而执行resolve或reject函数,而此时then还未来得及push需要thenAble的回调队列,导致再执行resolve或reject里面的triggerThen()方法时,无法执行(此时回调队列为空。)

Promise.prototype.then = function(onResolve, onReject) {
    this.thenCache.push({ onResolve: onResolve, onReject: onReject });
    return this;
}

then 实际是一个回调队列,当有3个then,那么回调队列就会有三个。然后通this.triggerThen()
以此递归调用,直接回调队列被调用完毕后,再执行fn中的resolve或reject函数。

再分析下状态和返回值
在triggerThen函数里有这么几行代码

if(typeof res === "function") {
        try {
                this.value = res.call(undefined, this.value);
                this.status = "resolved";
                this.triggerThen();
        } catch(e) {
                this.status = "rejected";
                this.value = e;
                return this.triggerThen();
        }
        } else {
            this.triggerThen();
        }

可以看出,当js无语法报错的时候,执行的try代码。此时将then()中第一个回调函数执行的value赋值给了this.value。在new Promise()的回调函数中,如果执行过resolve()的话,那么此时赋值就是第二次赋值了。同理this.status。当出现语法报错的时候,会执行catch,此时将错误参数e同样赋值给this.value。状态也被变为rejected。同理如果在new Promise()回调中执行过reject,那么此时赋值也是第二次赋值了。这就验证了阮一峰在Promise基础介绍将的下面的代码逻辑。

const promise = new Promise(function(resolve, reject) {
  throw new Error("test");
});
promise.catch(function(error) {
  console.log(error);
});
// Error: test

catch 跟then的第二个参数是一个逻辑。而且then的第二个参数实际我们很少回调。都写catch来异常捕获的。

其实写这篇文章的时候,对Promise还是了解在表面上,但收获依然还是有的,准建理解了Promise是如何实现的,比如resolve和then回调的关系,

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/93105.html

相关文章

  • 源码Promise 概念与实现

    摘要:从源码看概念与实现是异步编程中的重要概念,它较好地解决了异步任务中回调嵌套的问题。这些概念中有趣的地方在于,标识状态的变量如都是形容词,用于传入数据的接口如与都是动词,而用于传入回调函数的接口如及则在语义上用于修饰动词的副词。 从源码看 Promise 概念与实现 Promise 是 JS 异步编程中的重要概念,它较好地解决了异步任务中回调嵌套的问题。在没有引入新的语言机制的前提下,这...

    kel 评论0 收藏0
  • 小而美的Promise——promiz源码浅析

    摘要:因此,当作为参数的执行任意结果的回调函数时,就会将参数传递给外层的,执行对应的回调函数。 背景 在上一篇博客[[译]前端基础知识储备——Promise/A+规范](https://segmentfault.com/a/11...,我们介绍了Promise/A+规范的具体条目。在本文中,我们来选择了promiz,让大家来看下一个具体的Promise库的内部代码是如何运作的。 promiz...

    figofuture 评论0 收藏0
  • 深入koa源码(二):核心原理

    摘要:最近读了的源码,理清楚了架构设计与用到的第三方库。本系列将分为篇,分别介绍的架构设计和个核心库,最终会手动实现一个简易的。本文来自心谭博客深入源码核心库原理所有系列文章都放在了。这一段逻辑封装在了核心库里面。 最近读了 koa2 的源码,理清楚了架构设计与用到的第三方库。本系列将分为 3 篇,分别介绍 koa 的架构设计和 3 个核心库,最终会手动实现一个简易的 koa。这是系列第 2...

    tyheist 评论0 收藏0
  • thunkify与co源码解读

    开头 首先本文有将近3000字,阅读可能会占用你20分钟左右。 文笔可能不佳,希望能帮助到阅读此文的人有一些收获 在进行源码阅读前首先抱有一个疑问,thunk函数是什么,thunkify库又是干什么的,co又是干嘛,它有啥用 程序语言有两种求值策略 传名调用 传入参数实际上是传入函数体 传值调用 函数体在进入的时候就进行运算计算值 编译器的传名调用实现,往往是将参数放到一个临时函数之中,再将这个...

    Tangpj 评论0 收藏0
  • co 函数

    摘要:参考函数库是用于函数自动执行的一个小工具。是一个函数函数返回一个函数执行完成上面代码中,等到函数执行结束,就会输出一行提示。函数其实就是将两种自动执行器函数和对象,包装成一个库。使用的前提是,函数内的命令后面,只能是函数或者对象。 参考 reference 1 reference 2 co 函数库是用于 Generator 函数自动执行的一个小工具。 usge var co = r...

    张红新 评论0 收藏0

发表评论

0条评论

魏明

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<