promise源码解析
前言
大部分同学对promise,可能还停留在会使用es6的promise,还没有深入学习。我们都知道promise内部通过reslove、reject来判断执行哪个函数,原型上面的then同样的,也有成功回调函数跟失败回调函数。
这篇文章,我们来讲讲promise的源码,从源码来分析,promise的原理。Tip: 阅读源码是枯燥的
使用
使用es6的promise常用的方式有两种:
1、使用CDN 引入方式,我们在html中引入es6-promise.js、es6-promise.auto.js这两个js文件,就可以使用了。
2、通过node安装方式,有两种安装方式:
yarn add es6-promise
or
npm install es6-promise
安装完成后就可以使用了,比如:var Promise = require('es6-promise').Promise; Tip: 如果要在Node或浏览器中通过CommonJS填充全局环境,请使用以下代码段:
require('es6-promise').polyfill();
require('es6-promise/auto');
这里不会将结果分配polyfill ()
给任何变量。该polyfill ()
方法将Promise
在调用时修补全局环境。
分析
声明Promise
var Promise$ = function () {
function Promise(resolver) {
this[PROMISE_ID] = nextId();
this._result = this._state = undefined;
this._subscribers = []; if (noop !== resolver) {
typeof resolver !== 'function' && needsResolver();
this instanceof Promise ? initializePromise(this, resolver) : needsNew();
}
}
从代码上可以看出跟promise交互的主要方式是通过其`then`方法,它会记录回调用来接收promise的最终值或者promise无法履行的原因。
我们来看看resolve方法:
function resolve$(object) {
/*jshint validthis:true */
var Constructor = this; if (object && typeof object === 'object' && object.constructor === Constructor) {
return object;
} var promise = new Constructor(noop);
resolve(promise, object);
return promise;
}
function resolve(promise, value) {
// 首先一个Promise的resolce结果不能是自己 (自己返回自己然后等待自己,循环)
if (promise === value) {
reject(promise, selfFulfillment());
} else if (objectOrFunction(value)) {
// 当新的值存在,类型是对象或者函数的时候
handleMaybeThenable(promise, value, getThen(value));
} else {
// 最终的结束流程,都是进入这个函数
fulfill(promise, value);
}
}
`Promise.resolve`会返回一个将被resolve的promise传递了“value”。 我们可以用下面的简写:
let promise = Promise.resolve();
promise.then(function(value){
// value === 1
});
最后看下then方法:
Promise.prototype.then = function (didFulfill, didReject) {
if (debug.warnings() && arguments.length > &&
typeof didFulfill !== "function" &&
typeof didReject !== "function") {
var msg = ".then() only accepts functions but was passed: " +
util.classString(didFulfill);
if (arguments.length > ) {
msg += ", " + util.classString(didReject);
}
this._warn(msg);
}
return this._then(didFulfill, didReject, undefined, undefined, undefined);
};
总结:
promise执行步骤如下:
1、 首先创建Promise
2、 然后设置需要执行的函数
3、 接着设置完成的回调
4、 跟着开始执行函数
5、 最后根据执行结果选择回调
promise源码解析的更多相关文章
- Netty 源码解析(三): Netty 的 Future 和 Promise
今天是猿灯塔“365篇原创计划”第三篇. 接下来的时间灯塔君持续更新Netty系列一共九篇 Netty 源码解析(一): 开始 Netty 源码解析(二): Netty 的 Channel 当前:Ne ...
- jQuery2.x源码解析(回调篇)
jQuery2.x源码解析(构建篇) jQuery2.x源码解析(设计篇) jQuery2.x源码解析(回调篇) jQuery2.x源码解析(缓存篇) 通过艾伦的博客,我们能看出,jQuery的pro ...
- Koa2 源码解析(1)
Koa2 源码解析 其实本来不想写这个系列文章的,因为Koa本身很精简,一共就4个文件,千十来行代码. 但是因为想写 egg[1] 的源码解析,而egg是基于Koa2的,所以就先写个Koa2的吧,用作 ...
- jQuery2.x源码解析(DOM操作篇)
jQuery2.x源码解析(构建篇) jQuery2.x源码解析(设计篇) jQuery2.x源码解析(回调篇) jQuery2.x源码解析(缓存篇) jQuery这个类库最为核心重要的功能就是DOM ...
- co源码解析
一.co函数是什么 co 函数库是著名程序员 TJ Holowaychuk 于2013年6月发布的一个小工具,用于 Generator 函数的自动执行.短小精悍只有短短200余行,就可以免去手动编写G ...
- Netty 4源码解析:服务端启动
Netty 4源码解析:服务端启动 1.基础知识 1.1 Netty 4示例 因为Netty 5还处于测试版,所以选择了目前比较稳定的Netty 4作为学习对象.而且5.0的变化也不像4.0这么大,好 ...
- Netty5客户端源码解析
Netty5客户端源码解析 今天来分析下netty5的客户端源码,示例代码如下: import io.netty.bootstrap.Bootstrap; import io.netty.channe ...
- Netty5服务端源码解析
Netty5源码解析 今天让我来总结下netty5的服务端代码. 服务端(ServerBootstrap) 示例代码如下: import io.netty.bootstrap.ServerBootst ...
- redux的源码解析
一. redux出现的动机 1. Javascript 需要管理比任何时候都要多的state2. state 在什么时候,由于什么原因,如何变化已然不受控制.3. 来自前端开发领域的新需求4. 我们总 ...
随机推荐
- 一套代码小程序&Web&Native运行的探索01
前言 前面我们对微信小程序进行了研究:[微信小程序项目实践总结]30分钟从陌生到熟悉 并且用小程序翻写了之前一个demo:[组件化开发]前端进阶篇之如何编写可维护可升级的代码 之前一直在跟业务方打交道 ...
- 通过 UI 管理 docker
Docker 正在被用在越来越多的场景中,对于不太习惯命令行工具的朋友来说,docker cli 用起来可能会比较吃力.本文笔者将介绍一个功能强大的 docker web 客户端:portainer( ...
- 玩转Spring Cloud之API网关(zuul)
最近因为工作原因,一直没有空写文章,所以都是边忙项目,边利用空闲时间,周末时间学习总结,最终在下班回家后加班加点写完本篇文章,若有不足之处,还请谅解,谢谢! 本文内容导航: 一.网关的作用 二.网关与 ...
- 【转载】java 中变量的存储位置
原文链接点这里,感谢博主分享 * 寄存器:最快的存储区, 由编译器根据需求进行分配,我们在程序中无法控制. * 栈:存放基本类型的变量数据和对象的引用,但对象本身不存放在栈中,而是存放在堆(new 出 ...
- sublime text3插件增强侧边栏的功能文件的复制粘贴
快捷键ctrl + shift +p 输入 install package 回车,调出插件搜索器, 在搜索栏中输入 SideBarEnhancements 回车安装插件. 在侧边栏中的各种操作功能增 ...
- DS控件库 DS按钮多种样式
在DS控件库(DSControls)中,DS按钮的功能非常多,通过设置不同的属性值来使按钮呈现不同的效果.DS按钮的常用属性如下: 使用不同的属性调出不同的外观样式示例
- Linux高级运维 第四章 文件的基本管理和XFS文件系统备份恢复
4.1 Linux系统目录结构和相对/绝对路径 4.1.1系统目录结构 在windows系统中,查看文件先进入相应的盘符,然后进入文件目录 在windows中,它是多根 c:\ d:\ e ...
- 责任链模式 职责链模式 Chain of Responsibility Pattern 行为型 设计模式(十七)
责任链模式(Chain of Responsibility Pattern) 职责链模式 意图 使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系 将这些对象连接成一条链,并沿着这 ...
- JavaScript实现获取两个排序数组的中位数算法示例
本文实例讲述了JavaScript排序代码实现获取两个排序数组的中位数算法.分享给大家供大家参考,具体如下: 题目 给定两个大小为 m 和 n 的有序数组 nums1 和 nums2 . 请找出这两个 ...
- Android项目实战(四十五):Zxing二维码切换横屏扫描
Demo链接 默认是竖屏扫描,但是当我们在清单文件中配置横屏显示的时候: <activity android:name=".CaptureActivity" android: ...