promise的实现方式和运行机制
promise的规范其实种类很多,我们最常用的是promise/A+
这篇文章会先将一个类似于promise的构造函数怎么写,网上很多教程并没有实现A+规范,只是看起来像而已
然后我们深入探究如何一步一步实现真正的promise/A+规范的要求。
首先我们实现一个简单的promise,这个promise类似于express的路由处理
express的路由处理以next的方式一层一层的进入, 直到不再next。这个很像promise呐,也是比较懒,没有去看源码,但试着实现一个那种异步,会发现其实蛮简单的。
ok,废话少说,先搞一个
需求
1. promise拥有then和catch方法
2. promise出错时调用catch,有两种错误,主动跑错可以用next(err)
3. promise的第一个参数为function, 第一个参数为next,其他参数可以传递到下一步。
然后我们要实现的功能如下
new Promise(next => {
setTimeout(() => {
console.log();
next(null, 2);
}, );
})
.then((next, arg) => {
setTimeout(() => {
console.log(arg);
next();
}, );
})
.then((next, arg) => {
setTimeout(() => {
console.log(arg);
next();
}, );
})
.catch(err => console.error(err));
实现
首先我们实现then和catch方法
我们建立一个回调队列和一个出错回调1
1)then里的东西都会被推进去
2)catch会去替换默认的回调方法
3)next函数会执行resovleCallbacks里的下一个方法
function Promise(execute) {
let resolveCallbacks = [];
let rejectCallbacks = err => console.error(err);
this.then = fn => {
resolveCallbacks.push(fn);
return this;
};
this.catch = fn => {
rejectCallback = fn;
return this;
}; execute(next); function next() {
const nextCallback = resolveCallbacks.shift();
nextCallback && nextCallback(next);
}
}
为了捕捉错误
try {
execute(next);
} catch (err) {
rejectCallback(err);
}
我们添加如上的错误捕捉机制
假如果主动跑错就用next(err)
没有出错的话就next(null, arg1, arg2)这样传参
所以我们修改next方法
function next(...args) {
if(args[]){
return rejectCallback(args[]);
}else{
const nextCallback = resolveCallbacks.shift();
try {
nextCallback && nextCallback(next, ...args.slice());
} catch (err) {
rejectCallback(err);
}
}
}
至此就实现完成了,很简单吧
game over
Promise/A+
但事实上一个伟大的promise/A+规范的实现可不止这么简单。
然后我们来看看一个promise/A+规范是什么样子的
1. 状态管理pendding fullfilled(resolved) rejected 三种
2. then返回一个新的promise, then的两个参数是function,是上一步的成功和失败的回调
3. 不同的promise可以接起来使用
以上是主要的规范 更加具体的看这里
要想实现promise/A+,首先要搞清楚它的工作原理
按照规范 最麻烦的是then方法的处理,
但是记住两点就Ok
1. 不同的promise的状态不同,所以then方法不可以返回this,而是应该返回一个新的promise
2. then的执行实在resolve完成后,所以在then方法里把onResolved方法修改为then的第一个参数
3. 在promise中then里的函数如果返回值是promise就必须等到promise执行完成才可以到下一步, 对此我们巧妙的运用promise的then,只要把resolve放到then里边就会延迟resolve的发生
return x.then(resolve);
4. 在promise中then里的函数如果返回值不是promise那就直接执行 然后resolve
5. executor应该是慢一点开始,所以用了setTimeout,因为首先需要执行的是then方法,待一切promise队列就绪后才可以开始。
6. 执行then的时候可能已经resolved了,那么这个时候就立即执行,如果还是pending状态的话那么就放到执行完成的回调函数里。
知道以上几点之后 就可以很轻松的看懂代码了
首先是构造函数
function Promise(executor) {
let onResolved = null;
let onRejected = null;
this.status = 'pending';
let self = this; let resolve = data => {
self.data = data || null;
self.status = 'resolved';
typeof onResolved === 'function' && onResolved(data);
} let reject = (err) => {
self.status = 'rejected';
typeof onRejected === 'function' && onRejected(data);
} this.then = onResolvedFn => { } executor(resolve, reject);
}
然后是then方法
if (self.status === 'pending') {
console.log('promise is pending, add callback')
return new Promise(resolve => {
onResolved = data => {
let x = onResolvedFn(self.data)
if (x instanceof Promise) {
return x.then(resolve);
} else {
resolve();
}
}
})
} if (self.status === 'resolved') {
console.log('promise is resolved, execuate')
return new Promise(resolve => {
let x = onResolvedFn(self.data)
if (x instanceof Promise) {
return x.then(resolve);
} else {
resolve();
}
})
}
then方法实现后,然后我们实现一个Promise.resolve方法
Promise.resolve = data => new Promise(resolve => setTimeout(() => resolve(data)));
关于catch和promise的错误处理机制这里就不详细的写了,反正一切都为了简单看懂。
参考文章: https://zhuanlan.zhihu.com/p/21834559
promise的实现方式和运行机制的更多相关文章
- js运行机制及异步编程(一)
相信大家在面试的过程中经常遇到查看执行顺序的问题,如setTimeout,promise,async await等等,各种组合,是不是感觉头都要晕掉了,其实这些问题最终还是考察大家对js的运行机制是否 ...
- Windows程序内部运行机制 转自http://www.cnblogs.com/zhili/p/WinMain.html
一.引言 要想熟练掌握Windows应用程序的开发,首先需要理解Windows平台下程序运行的内部机制,然而在.NET平台下,创建一个Windows桌面程序,只需要简单地选择Windows窗体应用程序 ...
- JSP基础总结(运行机制、脚本元素、指令元素、动作元素)
JSP的运行机制: 1.转译阶段:JSP页面转换成Servlet类: 2.请求阶段:Servlet类执行,将相应结果发送至客户端. 流程解释: 1.用户访问某个JSP页面 2.服务器找到相应的JSP页 ...
- Spark Streaming架构设计和运行机制总结
本期内容 : Spark Streaming中的架构设计和运行机制 Spark Streaming深度思考 Spark Streaming的本质就是在RDD基础之上加上Time ,由Time不断的运行 ...
- PHP的运行机制与原理(底层) [转]
说到php的运行机制还要先给大家介绍php的模块,PHP总共有三个模块:内核.Zend引擎.以及扩展层:PHP内核用来处理请求.文件流.错误处理等相关操作:Zend引擎(ZE)用以将源文件转换成机器语 ...
- 谈谈java的运行机制
1.高级语言的运行机制 我们编程都是用的高级语言(写汇编和机器语言的大牛们除外),计算机不能直接理解高级语言,只能理解和运行机器语言,所以必须要把高级语言翻译成机器语言,计算机才能运行高级语言所编写的 ...
- (视频) 《快速创建网站》2.1 在Azure上创建网站及网站运行机制
现在让我们开始一天的建站之旅. 本文是<快速创建网站>系列的第2篇,如果你还没有看过之前的内容,建议你点击以下目录中的章节先阅读其他内容再回到本文. 访问本系列目录,请点击:http:// ...
- Chrome扩展开发之二——Chrome扩展中脚本的运行机制和通信方式
目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...
- 简述JavaScript的运行机制
想要理解JavaScript的运行机制,需要分别深刻理解以下几个点: · JavaScript的单线程机制 · 任务队列(同步任务和异步任务) · 事件和回调函数 · 定时器 · Event Loop ...
随机推荐
- 【左偏树】 [JLOI2015]城池攻占
原来左偏树还可以打tag,get了 和线段树打tag一样,时不时Push_Down就好了 然后这里显然也是要先乘法后加法的 tag打上了之后还是其他一般左偏树差不多,有些细节注意一下 然后开 long ...
- 2016.9.17初中部下午NOIP普及组比赛总结
2016.9.17初中部下午NOIP普及组比赛总结 2016.09.17[初中部 NOIP普及组 ]模拟赛 最近几次的题目都不是自己擅长的啊... 不过含金量挺高的,也好... 进度: 比赛:0+0+ ...
- C++函数模板&类模板
函数模板 模板概念及语法 主要目的,简化代码,减少重复代码.基本语法格式: template<class T> 或者 template<typename T> //末尾不加分 ...
- VS2010-MFC(对话框:创建对话框类和添加控件变量)
转自:http://www.jizhuomi.com/software/153.html 前两讲中讲解了如何创建对话框资源.创建好对话框资源后要做的就是生成对话框类了.生成对话框类主要包括新建对话框类 ...
- 101 删除排序数组中的重复数字 II
原题网址:http://www.lintcode.com/zh-cn/problem/remove-duplicates-from-sorted-array-ii/# 跟进“删除重复数字”: 如果可以 ...
- Java-MyBatis-MyBatis3-XML映射文件:select
ylbtech-Java-MyBatis-MyBatis3-XML映射文件:select 1.返回顶部 1. select 查询语句是 MyBatis 中最常用的元素之一,光能把数据存到数据库中价值并 ...
- 《DSP using MATLAB》Problem 8.9
代码: %% ------------------------------------------------------------------------ %% Output Info about ...
- python的命名规范
包应该是简短的.小写的名字.如果下划线可以改善可读性可以加入.如mypackage. 模块与包的规范同.如mymodule. 类总是使用首字母大写单词串.如MyClass.内部类可以使用额外的前导下划 ...
- python tkiner实现自动打包程序
环境 python3.x 使用前请确保安装pyinstaller库 本程序还未完善,可以自行完善 若要使用加密,请自行安装cryptodome库 import tkinter as tk from t ...
- 【bzoj 4671】 异或图
题目 神仙题啊神仙题 显然这个东西一脸不可求的样子啊,这种东西我们显然需要搞一个容斥什么的 于是设\(g_i\)表示至少存在\(i\)个联通块(联通块内部的边没有要求,联通块和联通块之间不存在边)的方 ...