概述

异步编程离不开promise, async, 事件响应这些东西,为了更好地异步编程,我打算探究一下promise的实现原理,方法是自己实现一个简易的promise。

根据promise mdn上的描述,我们主要实现如下api:

  1. Promise.prototype.resolve
  2. Promise.prototype.reject
  3. Promise.prototype.then
  4. Promise.all
  5. Promise.race

为了更好地性能和使用,我还需要加上惰性求值特性,即:只有调用then的时候才真正调用Promise里面的异步方法。并且我们忽略pending,fulfilled和rejected这几个状态,因为封装后的promise并没有暴露这几个状态,目前看来也没什么用(除非用事件响应实现Promise)。

为了简便,暂时不考虑错误处理

实现resolve,reject和then

其实就是调用resolve和reject的时候调用相应的success和error函数就行,代码如下:

let Promise = function(func) {
this.func = func;
this.success = null;
this.error = null;
} Promise.prototype.resolve = function(value, that) {
console.log('resolve');
if(typeof that.success == 'function') {
that.success(value);
}
} Promise.prototype.reject = function(value, that) {
console.log('reject');
if(typeof that.error == 'function') {
that.error(value);
}
} Promise.prototype.then = function(onFulfilled, onRejected) {
this.success = onFulfilled;
this.error = onRejected;
setTimeout(() => {
this.func(this.resolve, this.reject);
});
} let myPromise = new Promise(function(resolve, reject){
setTimeout(() => {
resolve("成功!", this);
}, 1000);
}); myPromise.then((successMessage) => {
console.log('输出', successMessage);
});

需要注意的是,这里如果不带入this的话,resolve里面的this就会丢失。

但是这么写不优雅,我想了很多办法,比如重新包装一下,比如用事件响应,但还是解决不了,最后我突然想到,用bind,哇,成功解决。代码如下:

let Promise = function(func) {
this.func = func;
this.success = null;
this.error = null;
} Promise.prototype.resolve = function(value) {
if(typeof this.success == 'function') {
this.success(value);
}
} Promise.prototype.reject = function(value) {
if(typeof this.error == 'function') {
this.error(value);
}
} Promise.prototype.then = function(onFulfilled, onRejected) {
this.success = onFulfilled;
this.error = onRejected;
setTimeout(() => {
this.func(this.resolve.bind(this), this.reject.bind(this));
});
} let myPromise = new Promise(function(resolve, reject){
setTimeout(() => {
resolve("成功!", this);
}, 1000);
}); myPromise.then((successMessage) => {
console.log('输出', successMessage);
});

值得一提的是,为了实现惰性求值,需要先把异步方法缓存起来,等调用then的时候再调用它。

还有,在Promise内部,为了简便,我使用的是setTimeout进行异步,并没有使用setImmediate

实现all和race

all和race在多异步promise里面非常有用,下面我们来实现它们:

Promise.all = function(promiseArr) {
let results = [];
let sum = promiseArr.length;
let count = 0;
return new Promise(function(resolve, reject) {
if(promiseArr || sum) {
for(let i=0; i<sum; i++) {
promiseArr[i].then((res) => {
results[i] = res;
count ++;
if(count >= sum) {
resolve(results);
}
});
}
}
});
}; Promise.race = function(promiseArr) {
let sum = promiseArr.length;
let count = 0;
return new Promise(function(resolve, reject) {
if(promiseArr || sum) {
for(let i=0; i<sum; i++) {
promiseArr[i].then((res) => {
if(count == 0) {
count ++;
resolve(res);
}
});
}
}
});
};

可以看到,方法是使用传说中的哨兵变量,真的很有用。

测试

简易的测试代码如下:

let myPromise1 = new Promise(function(resolve, reject){
setTimeout(() => {
resolve("成功1111111!");
}, 1000);
}); let myPromise2 = new Promise(function(resolve, reject){
setTimeout(() => {
resolve("成功222222222222!");
}, 1500);
}); myPromise1.then((successMessage) => {
console.log('输出', successMessage);
}); console.time('all计时开始');
Promise.all([myPromise1, myPromise2]).then((results) => {
results.map(item => {
console.log('输出', item);
});
console.timeEnd('all计时开始');
}); console.time('race计时开始');
Promise.race([myPromise1, myPromise2]).then((res) => {
console.log('输出', res);
console.timeEnd('race计时开始');
});

可以看到,all计时刚好1.5秒,race计时刚好1秒。

我学到了什么

  1. 对Promise的理解更加深入。
  2. 对bind的使用更加熟练。
  3. 可以看到,Promise的缺点是对于每个异步方法,都需要用构造函数封装一遍,如果有其它需求,则需要更特别的封装。
  4. 打算找个时间用事件响应重新实现一遍,目前代码有点乱,如果用事件响应的话可能会更加优雅。

实现简易Promise的更多相关文章

  1. 简易promise

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  2. 简易promise的实现(二)

    code 上一章中我们遇到了两个问题 1.异步调用顺序的问题 2.then返回一个promise的问题 思考 如果控制异步回调的顺序? 因为异步操的时间作我们无法控制,但是我们只需要按顺序执行回调函数 ...

  3. 简易promise的实现(一)

    code 最近在思考promise的实现原理 于是准备自己写一个简单的demo 一开始想到的问题有两个 1.链式调用 2.异步顺序执行 -------------------------------- ...

  4. ES6之promise原理

    我在这里介绍了promise的原理: https://juejin.im/post/5cc54877f265da03b8585902 我在这里 仅仅张贴 我自己实现的简易promise——DiProm ...

  5. 用JavaScript完成页面自动操作

    在之前的一篇<JavaScript实现按键精灵>中曾记录了几个事件对象,本文将会对它们进行一次实战,要完成的动作包括滚动.点击和翻页. 一.滚动 滚动是通过修改容器元素的scrollTop ...

  6. Promise实现简易AMD加载器

    在最新的Chrome和FF中已经 实现了Promise.有了Promise我们用数行代码即可实现一个简易AMD模式的加载器 var registry = { promises: { }, resolv ...

  7. 10行代码实现简易版的Promise

    实现之前,我们先看看Promise的调用 const src = 'https://img-ph-mirror.nosdn.127.net/sLP6rNBbQhy0OXFNYD9XIA==/79910 ...

  8. 手写简易版Promise

    实现一个简易版 Promise 在完成符合 Promise/A+ 规范的代码之前,我们可以先来实现一个简易版 Promise,因为在面试中,如果你能实现出一个简易版的 Promise 基本可以过关了. ...

  9. 手写Promise简易版

    话不多说,直接上代码 通过ES5的模块化封装,向外暴露一个属性 (function(window){ const PENDING = 'pending'; const RESOLVED = 'fulf ...

随机推荐

  1. python写注册

    # coding = UTF-8 注释格式 import datetime 引用日期 today = datetime.datetime.today().strftime("%Y-%m-%d ...

  2. [Git] 拉开发分支的代码报错

    Git拉开发分支的代码报错: fatal: The remote end hung up unexpectedly fatal: early EOF fatal: index-pack failed ...

  3. js跳转到页面指定元素

    var scrollDistance = $("#设置了的overflow元素").scrollTop() + $('#' + 当前屏幕元素).offset().top; $(&q ...

  4. Nexus 3 搭建 npm 私服 (windows)

    Nexus 3 搭建 npm 私服备忘 下载与安装 在官网下载Nexus Repository Manager OSS 3.x, 解压至任意位置. 管理员运行 powershell, 切换到 nexu ...

  5. 关于numpy.maximum函数的测试

    atr.py import numpy as np a = np.arange(9)print("a:",a)print(a[0:3])print(a[3:6])print(a[6 ...

  6. C#应用NPOI实现导出EXcel表格中插入饼状图(可实现动态数据生成)

    一.思路:   1.excel是可以通过NPOI插入图片的: 2.C#通过NPOI生成饼状图: 3.把生成的饼状图以字节流的形式插入到表格 二.看代码: #region 生成饼图图例 /// < ...

  7. [转]数据库中间件 MyCAT源码分析——跨库两表Join

    1. 概述 2. 主流程 3. ShareJoin 3.1 JoinParser 3.2 ShareJoin.processSQL(...) 3.3 BatchSQLJob 3.4 ShareDBJo ...

  8. Exp2后门原理与实践_20154305 _ 齐 帅

    Exp2后门原理与实践 20154305 _ 齐 帅 2.1简单后门 一.后门工具介绍 1.netcat(nc.ncat) 是一个底层工具,进行基本的TCP UDP数据收发.常被与其他工具结合使用,起 ...

  9. <<君主论>>读后感

    “<君主论>与<圣经>齐名,被称为邪恶的圣经,这本书的立论基础是人性本恶论,他所描述的人性之恶,主要是以西欧资本原始积累背景下的现实社会中人的各种丑恶现象为蓝本的.” 要是高中 ...

  10. linux_批量关闭进程

    以下环境是 fedora24 linux 系统中的情况: 仿真中遇到意外弹出上百个图片,无法一下全部关闭. 可以使用: ps -ef|grep LOCAL=NO|grep -v grep|cut -c ...