如何从零开始利用js手写一个Promise库详解


Posted in Javascript onApril 19, 2018

前言

ECMAScript 是 JavaScript 语言的国际标准,JavaScript 是 ECMAScript 的实现。ES6 的目标,是使得 JavaScript 语言可以用来编写大型的复杂的应用程序,成为企业级开发语言。

概念

ES6 原生提供了 Promise 对象。

所谓 Promise,就是一个对象,用来传递异步操作的消息。它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的 API,可供进一步处理。

三道思考题

刚开始写前端的时候,处理异步请求经常用callback,简单又顺手。后来写着写着就抛弃了callback,开始用promise来处理异步问题。promise写起来确实更加优美,但由于缺乏对它内部结构的深刻认识,每次在遇到一些复杂的情况时,promise用起来总是不那么得心应手,debug也得搞半天。

所以,这篇文章我会带大家从零开始,手写一个基本能用的promise。跟着我写下来以后,你会对promise是什么以及它的内部结构有一个清楚的认知,未来在复杂场景下使用promise也能如鱼得水。

而且,为了检验大家是否真的完全掌握了promise,我会在文章结尾出几道跟promise相关的练习题。说是练习题,其实都是大家项目中会遇到的真实场景的抽象,熟练掌握可以帮助大家在前端方面更上一层楼。

提前将三道练习题给出来,大家可以先不看下文的内容,在脑海里大概构思下你会怎么解决:

  • promise array的链式调用?
  • promise怎么做并发控制?
  • promise怎么做异步缓存?

以上三道思考题其实跟你用不用promise并没有多大关系,但是如果你不深刻理解promise想要解决这三个问题还真不是那么轻松的。

什么是Promise

回到正文,什么是Promise?说白了,promise就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。

首先,ES6规定Promise对象是一个构造函数,用来生成Promise实例。然后,这个构造函数接受一个函数(executor)作为参数,该函数的两个参数分别是resolve和reject。最后,Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数(onFulfilled和onRejected)。

具体的使用方法,用代码表现是这样:

const promise = new Promise(function(resolve, reject) {
 // ... some code

 if (/* 异步操作成功 */){
 resolve(value);
 } else {
 reject(error);
 }
});

promise.then(function(value) {
 // success
}, function(error) {
 // failure
});

理解了这个后,我们就可以大胆的开始构造我们自己的promise了,我们给它取个名字:CutePromise

实现一个Promise:CutePromise

我们直接用ES6的class来创建我们的CutePromise,对ES6语法还不熟悉的,可以先读一下我的另外两篇介绍ES6核心语法的文章后再回来。30分钟掌握ES6/ES2015核心内容(上) 、30分钟掌握ES6/ES2015核心内容(下)

class CutePromise {
 // executor是我们实例化CutePromise时传入的参数函数,它接受两个参数,分别是resolve和reject。
 // resolve和reject我们将会定义在constructor当中,供executor在执行的时候调用
 constructor(executor) {
 const resolve = () => {}
 const reject = () => {}
 executor(resolve, reject)
 }

 // 为实例提供一个then的方法,接收两个参数函数,
 // 第一个参数函数必传,它会在promise已成功(fulfilled)以后被调用
 // 第二个参数非必传,它会在promise已失败(rejected)以后被调用
 then(onFulfilled, onRejected) {}
}

创建了我们的CutePromise后,我们再来搞清楚一个关键点:Promise 对象的状态。

Promise 对象通过自身的状态,来控制异步操作。一个Promise 实例具有三种状态:

  • 异步操作未完成(pending)
  • 异步操作成功(fulfilled)
  • 异步操作失败(rejected)

上面三种状态里面,fulfilled和rejected合在一起称为resolved(已定型)。状态的切换只有两条路径:第一种是从pending=>fulfilled,另一种是从pending=>rejected,状态一旦切换就不能再改变。

现在我们来为CutePromise添加状态,大概流程就是:

首先,实例化初始过程中,我们先将状态设为PENDING,然后当executor执行resolve的时候,将状态更改为FULFILLED,当executor执行reject的时候将状态更改为REJECTED。同时更新实例的value。

constructor(executor) {
 ...
 this.state = 'PENDING';
 ...
 const resolve = (result) => {
  this.state = 'FULFILLED';
  this.value = result;
 }
 const reject = (error) => {
  this.state = 'REJECTED';
  this.value = error;
 }
 ...
}

再来看下我们的then函数。then函数的两个参数,onFulfilled表示当promise异步操作成功时调用的函数,onRejected表示当promise异步操作失败时调用的函数。假如我们调用then的时候,promise已经执行完成了(当任务是个同步任务时),我们可以直接根据实例的状态来执行相应的函数。假如promise的状态还是PENDING, 那我们就将onFulfilled和onRejected直接存储到chained这个变量当中,等promise执行完再调用。

constructor(executor) {
 ...
 this.state = 'PENDING';
 
 // chained用来储存promise执行完成以后,需要被依次调用的一系列函数
 this.chained = [];
 const resolve = (result) => {
  this.state = 'FULFILLED';
  this.value = result;
  
  // promise已经执行成功了,可以依次调用.then()函数里的onFulfilled函数了
  for (const { onFulfilled } of this.chained) {
   onFulfilled(res);
  }
 }

 ...
}
then(onFulfilled, onRejected) {
 if (this.state === 'FULFILLED') {
 onFulfilled(this.value);
 } else if (this.state === 'REJECTED') {
 onRejected(this.value);
 } else {
 this.$chained.push({ onFulfilled, onRejected });
 }
}

这样我们就完成了一个CutePromise的创建,下面是完整代码,大家可以复制代码到控制台测试一下:

class CutePromise {
 constructor(executor) {
 if (typeof executor !== 'function') {
  throw new Error('Executor must be a function');
 }

 this.state = 'PENDING';
 this.chained = [];
 const resolve = res => {
  if (this.state !== 'PENDING') {
  return;
  }

  this.state = 'FULFILLED';
  this.internalValue = res;
  for (const { onFulfilled } of this.chained) {
  onFulfilled(res);
  }
 };
 const reject = err => {
  if (this.state !== 'PENDING') {
  return;
  }
  this.state = 'REJECTED';
  this.internalValue = err;
  for (const { onRejected } of this.chained) {
  onRejected(err);
  }
 };

 try {
  executor(resolve, reject);
 } catch (err) {
  reject(err);
 }
 }
 
 then(onFulfilled, onRejected) {
 if (this.state === 'FULFILLED') {
  onFulfilled(this.internalValue);
 } else if (this.$state === 'REJECTED') {
  onRejected(this.internalValue);
 } else {
  this.chained.push({ onFulfilled, onRejected });
 }
 }
}

提供一下测试代码:

let p = new CutePromise(resolve => {
 setTimeout(() => resolve('Hello'), 100);
});
p.then(res => console.log(res));
p = new CutePromise((resolve, reject) => {
 setTimeout(() => reject(new Error('woops')), 100);
});
p.then(() => {}, err => console.log('Async error:', err.stack));
p = new CutePromise(() => { throw new Error('woops'); });
p.then(() => {}, err => console.log('Sync error:', err.stack));

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
ie和firefox中img对象区别的困惑
Dec 27 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
jquery 实现上下滚动效果示例代码
Aug 09 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
javascript局部自定义鼠标右键菜单
Dec 08 Javascript
Javascript webpack动态import
Apr 19 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 #Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 #Javascript
原生js实现拖拽功能基本思路详解
Apr 18 #Javascript
一个基于react的图片裁剪组件示例
Apr 18 #Javascript
JS实现对json对象排序并删除id相同项功能示例
Apr 18 #Javascript
Angular ng-animate和ng-cookies用法详解
Apr 18 #Javascript
JS实现的base64加密解密操作示例
Apr 18 #Javascript
You might like
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
PHP无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
textContent在Firefox下与innerText等效的属性
2007/05/12 Javascript
HTML中事件触发列表与解说
2007/07/09 Javascript
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
2020/03/04 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
用Python编写生成树状结构的文件目录的脚本的教程
2015/05/04 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
Python 窗体(tkinter)下拉列表框(Combobox)实例
2020/03/04 Python
什么是python的自省
2020/06/21 Python
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
民事调解协议书
2016/03/21 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL
Java线程的6种状态与生命周期
2022/05/11 Java/Android