1、Promise术语

在实现Promise之前，我们先来了解一下Promise中的常用术语：

promise 是一个有then方法的对象或者是函数，行为遵循本规范；
thenable 是一个有then方法的对象或者是函数；
value 是promise状态成功时的值，也就是resolve的参数, 包括各种数据类型, 也包括undefined/thenable或者是 promise；
reason 是promise状态失败时的值, 也就是reject的参数, 表示拒绝的原因；
exception 是一个使用throw抛出的异常值；

2、Promise状态规范

2.1 Promise实例状态

Promise 实例有三种状态：

等待中（pending）
完成了（fulfilled）
拒绝了（rejected）

2.2 状态解析

pending
- 初始的状态, 可改变.
- 一个promise在resolve或者reject前都处于这个状态。
- 可以通过 resolve -> fulfilled 状态;
- 可以通过 reject -> rejected 状态;
fulfilled
- 是最终态, 不可变.
- 一个promise被resolve后会变成这个状态.
- 必须拥有一个value值
rejected
- 最终态, 不可变.
- 一个promise被reject后会变成这个状态
- 必须拥有一个reason

2.3 状态转换

一旦从等待状态变成为其他状态就永远不能更改状态了，也就是说一旦状态变为 resolved 后，就不能再次改变。

pending -> resolve(value) fulfilled

pending -> reject(reason) rejected

3、一步步实现Promise

一个 Promise 应该具备的最基本的特征，至少有以下几点：

可以接收一个 executor 作为入参
具备 pending、resolved 和 rejected 这三种状态

我们将自己的写的Promise命名为MyPromise

class MyPromise {
    constructor() {
    }
}

定义三种状态

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

设置初始化状态

class MyPromise {
    constructor() {
        // 初始状态为pending
        this.status = PENDING;
        this.value = null;
        this.reason = null;
    }
}

编写resolve方法

根据规范resolve方法要更改status，从pending改变为fulfilled

resolve(value) {
    if (this.status === PENDING) {
       this.status = FULFILLED;
       this.value = value;
     }
}

编写reject方法

根据规范reject方法也要更改status，从pending改变为reject

reject(reason) {
    if (this.status === PENDING) {
        this.status = REJECTED;
        this.reason = reason;
     }
}

加入参数

实际开发中我们使用Promise是这样的：

new Promise(( resolve, reject ) => {
    // todo
})

我们需要加入入参：

入参是一个函数, 函数接收resolve和reject两个参数.
注意在初始化promise的时候, 就要执行这个函数, 并且有任何报错都要通过reject抛出去

class MyPromise {
    constructor(execute) {
        // 初始状态为pending
        this.status = PENDING;
        this.value = null;
        this.reason = null;
        try {
            execute(this.resolve.bind(this), this.reject.bind(this));
        } catch (e) {
            this.reject(e);
        }
    }
    resolve(value) {
        if (this.status === PENDING) {
            this.status = FULFILLED;
            this.value = value;
        }
    }
    reject(reason) {
        if (this.status === PENDING) {
            this.status = REJECTED;
            this.reason = reason;
        }
    }
}

4、总结

本节我们通过阅读Promise A+规范实现了Promise的构造函数以及状态转换，下一节我们将实现then方法；

5、参考链接

Promise A+规范: https://promisesaplus.com/

前端学习笔记

二、以小白视角一步步实现Promise源码(一)