最简实现Promise,支持异步链式调用(20行)
前言
在面试的时候,经常会有面试官让你实现一个 Promise,如果参照 A+规范来实现的话,可能面到天黑都结束不了。
说到 Promise,我们首先想到的最核心的功能就是异步链式调用,本篇文章就带你用 20 行代码实现一个可以异步链式调用的 Promise。
这个 Promise 的实现不考虑任何异常情况,只考虑代码最简短,从而便于读者理解核心的异步链式调用原理。
代码
先给代码吧,真就 20 行。
function Promise(fn) {
this.cbs = [];
const resolve = (value) => {
setTimeout(() => {
this.data = value;
this.cbs.forEach((cb) => cb(value));
});
}
fn(resolve);
}
Promise.prototype.then = function (onResolved) {
return new Promise((resolve) => {
this.cbs.push(() => {
const res = onResolved(this.data);
if (res instanceof Promise) {
res.then(resolve);
} else {
resolve(res);
}
});
});
};
复制代码
核心案例
new Promise((resolve) => {
setTimeout(() => {
resolve(1);
}, 500);
})
.then((res) => {
console.log(res);
return new Promise((resolve) => {
setTimeout(() => {
resolve(2);
}, 500);
});
})
.then(console.log);
复制代码
本文将围绕这个最核心的案例来讲,这段代码的表现如下:
- 500ms 后输出 1
- 500ms 后输出 2
实现
构造函数
首先来实现 Promise 构造函数
function Promise(fn) {
// Promise resolve时的回调函数集
this.cbs = [];
// 传递给Promise处理函数的resolve
// 这里直接往实例上挂个data
// 然后把onResolvedCallback数组里的函数依次执行一遍就可以
const resolve = (value) => {
// 注意promise的then函数需要异步执行
setTimeout(() => {
this.data = value;
this.cbs.forEach((cb) => cb(value));
});
}
// 执行用户传入的函数
// 并且把resolve方法交给用户执行
fn(resolve);
}
复制代码
好,写到这里先回过头来看案例
const fn = (resolve) => {
setTimeout(() => {
resolve(1);
}, 500);
};
new Promise(fn);
复制代码
分开来看,fn
就是用户传的函数,这个函数内部调用了 resolve
函数后,就会把 promise
实例上的 cbs
全部执行一遍。
到此为止我们还不知道 cbs
这个数组里的函数是从哪里来的,接着往下看。
then
这里是最重要的 then 实现,链式调用全靠它:
Promise.prototype.then = function (onResolved) {
// 这里叫做promise2
return new Promise((resolve) => {
this.cbs.push(() => {
const res = onResolved(this.data);
if (res instanceof Promise) {
// resolve的权力被交给了user promise
res.then(resolve);
} else {
// 如果是普通值 就直接resolve
// 依次执行cbs里的函数 并且把值传递给cbs
resolve(res);
}
});
});
};
复制代码
再回到案例里
const fn = (resolve) => {
setTimeout(() => {
resolve(1);
}, 500);
};
const promise1 = new Promise(fn);
promise1.then((res) => {
console.log(res);
// user promise
return new Promise((resolve) => {
setTimeout(() => {
resolve(2);
}, 500);
});
});
复制代码
注意这里的命名:
- 我们把
new Promise
返回的实例叫做promise1
- 在
Promise.prototype.then
的实现中,我们构造了一个新的 promise 返回,叫它promise2
- 在用户调用
then
方法的时候,用户手动构造了一个 promise 并且返回,用来做异步的操作,叫它user promise
那么在 then
的实现中,内部的 this 其实就指向promise1
而promise2
的传入的fn
函数执行了一个 this.cbs.push()
,其实是往 promise1
的cbs
数组中 push 了一个函数,等待后续执行。
Promise.prototype.then = function (onResolved) {
// 这里叫做promise2
return new Promise((resolve) => {
// 这里的this其实是promise1
this.cbs.push(() => {});
});
};
复制代码
那么重点看这个 push 的函数,注意,这个函数在 promise1
被 resolve 了以后才会执行。
// promise2
return new Promise((resolve) => {
this.cbs.push(() => {
// onResolved就对应then传入的函数
const res = onResolved(this.data)
// 例子中的情况 用户自己返回了一个user promise
if (res instanceof Promise) {
// user promise的情况
// 用户会自己决定何时resolve promise2
// 只有promise2被resolve以后
// then下面的链式调用函数才会继续执行
res.then(resolve)
} else {
resolve(res)
}
})
})
复制代码
如果用户传入给 then 的 onResolved 方法返回的是个 user promise
,那么这个user promise
里用户会自己去在合适的时机 resolve promise2
,那么进而这里的 res.then(resolve)
中的 resolve 就会被执行:
if (res instanceof Promise) {
res.then(resolve)
}
结合下面这个例子来看:
new Promise((resolve) => {
setTimeout(() => {
// resolve1
resolve(1);
}, 500);
})
// then1
.then((res) => {
console.log(res);
// user promise
return new Promise((resolve) => {
setTimeout(() => {
// resolve2
resolve(2);
}, 500);
});
})
// then2
.then(console.log);
复制代码
then1
这一整块其实返回的是 promise2
,那么 then2
其实本质上是 promise2.then(console.log)
,
也就是说 then2
注册的回调函数,其实进入了promise2
的 cbs
回调数组里,又因为我们刚刚知道,resolve2
调用了之后,user promise
会被 resolve,进而触发 promise2
被 resolve,进而 promise2
里的 cbs
数组被依次触发。
这样就实现了用户自己写的 resolve2
执行完毕后,then2
里的逻辑才会继续执行,也就是异步链式调用。
文章总结
本文只是简单实现一个可以异步链式调用的 promise,而真正的 promise 比它复杂很多很多,涉及到各种异常情况、边界情况的处理。
promise A+规范还是值得每一个合格的前端开发去阅读的。
希望这篇文章可以对你有所帮助!
- 保存并加载您的Keras深度学习模型
- 简单、通用的JQuery Tab实现
- Dubbo源码解析 - 远程暴露
- 使用FastText(Facebook的NLP库)进行文本分类和word representatio...
- 声音分类的迁移学习
- 【死磕Java并发】—– J.U.C之AQS:CLH同步队列
- 使用Python完成你的第一个学习项目
- CA,给了数据库,给了机器,为啥也扩不了容?
- 如何使用Anaconda设置机器学习和深度学习的Python环境
- MQ,互联网架构解耦神器
- 预测随机机器学习算法实验的重复次数
- 服务化了,没想到耦合更加严重?
- 如何在Python中扩展LSTM网络的数据
- 使用Keras的Python深度学习模型的学习率方案
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python让函数不返回结果的方法
- PHP微商城开源代码实例
- PHP小程序支付功能完整版【基于thinkPHP】
- CodeIgniter框架实现的整合Smarty引擎DEMO示例
- PHP微信支付功能示例
- PHP中ltrim()函数的用法与实例讲解
- Laravel 中创建 Zip 压缩文件并提供下载的实现方法
- pytorch随机采样操作SubsetRandomSampler()
- Pytorch上下采样函数–interpolate用法
- scrapy框架携带cookie访问淘宝购物车功能的实现代码
- 浅析Python __name__ 是什么
- PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
- PHP后期静态绑定实例浅析
- php+mysql开发中的经验与常识小结
- PHP时间戳和日期相互转换操作实例小结