学习 Promise 的建议
在本人一开始学 Promise 时也是看了很多热门的 Promise 文章讲解,但是说实话很多都是自己吸收不进去的,跌跌撞撞也走了许多弯路,凭借着自己一点点的理解和感悟整理出了这一篇学习和理解 Promise 的文章。我将从我自己理解的角度和过程会详细讲述 Promise 的理解过程。
在学习 Promise 时,我认为需要比较扎实和牢固的JS基础,例如要熟悉词法作用域规则、this规则、熟练闭包、熟练使用回调函数。
否则学起来可能会不懂和吃力,毕竟学习技术都是一步步一级级上升的,学习跨高难度的的东西不是什么推荐的做法。
另外,在学习 Promise 时,也请好好思考三点:
- Promise 是什么,它是用来做什么的,它在什么场景下使用的?
- Promise 如何使用?你会熟练使用Promise了吗?
- Promise 是如何实现的?
这三步都是逐级走下去的。
Promise 是什么
Promise 是一个工具类
优点:
- 解决异步嵌套问题
- 解决异步并发问题
缺点:
- 底层依然是基于回调函数的写法
- 发出的异步调用也是无法终止的
Promise 的特点
状态
说明:Promise 有三种状态,且状态改变时则无法再次更改
- 等待态(默认态)
- 成功态
- 失败态
executor 执行器
说明:executor 作为回调函数,在构建 Promise 时同步执行,且传入两个参数 resolve 和 reject ,resolve 代表成功,而 reject 代表失败
注:Promise 不一定要实现异步调用,在 Promise 内依旧可以用同步链式操作
console.log(1);
new Promise((resolve,reject)=>{
//下面代码同步执行
let a = 2;
console.log(a);
}/*executor*/)
console.log(3);
//打印顺序:1,2,3
手写 Promise
首先,我们根据 Promise 的表现和使用, 写一个简单的同步
的 Promise,其具有resolve和reject功能,并且在 Promise 中抛出错误的话也会到 reject 里
// 宏变量:比较常用的值,使用变量定义,方便使用
const PENDING = 'pending'
const RESOLVED = 'resolved'
const REJECTED = 'rejected'
class MyPromise {
constructor(executor) {
// 状态:pending resolved rejected ,默认 pending 状态
let state = PENDING;
// 成功返回值:存储调用resolve后返回的值
let value = undefined;
// 失败返回值:存储调用reject后返回的值
let err = undefined;
// then函数:用于进行链式调用的函数,状态改变时会执行。
this.then = (onfulfilled /*成功回调*/ , onrejected /*失败回调*/ ) => {
// 判断成功态,执行成功回调
if (state === RESOLVED) {
onfulfilled(value);
}
// 判断失败态,执行失败回调
if (state === REJECTED) {
onrejected(err);
}
}
// 完成函数:改变状态
let resolve = (data) => {
// 判断:如果不是 pending 状态则忽略(防止 resolve 和 reject 调用多次)
if (state === PENDING) {
// 改变状态和存储值
state = RESOLVED;
value = data;
}
}
// 失败函数:改变状态
let reject = (err) => {
// 判断:如果不是 pending 状态则忽略(防止 resolve 和 reject 调用多次)
if (state === PENDING) {
// 改变状态和存储值
state = REJECTED;
err = err;
}
}
// 若报错则执行reject
try {
// 执行executor,并传入resolve和reject
executor(resolve, reject);
} catch (error) {
reject(error);
}
}
}
new MyPromise(function (resolve, reject) {
resolve('执行resolve')
}).then(res => {
console.log(res);
})