JS Promise 详细理解过程

学习 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);
})