手写一个promise函数，实现then 的链式调用和值的穿透特性

Aa独角戏

已于 2022-07-03 12:25:35 修改

阅读量438

点赞数

分类专栏： js 文章标签： javascript 前端

于 2022-07-02 11:11:53 首次发布

本文链接：https://blog.csdn.net/yw_hard/article/details/125546404

版权

本文介绍了Promise的基本特性和状态变化，并详细讲解了如何手写一个简单的Promise，重点在于实现then方法的链式调用及值穿透特性。通过示例代码展示了Promise的创建、then方法的参数处理以及异常处理机制。最后，文章提到还需要实现promise.all和promise.race等方法，鼓励读者发现并指出可能存在的问题。

摘要由CSDN通过智能技术生成

第一步来了解一下promise的基本特性；

1、promise 有三个状态：pending，fulfilled，or rejected；

2、new promise时，需要传递一个executor()执行器，接受两个参数，分别是resolve和reject，并执行器立即执行；

3、promise 的默认状态是 pending；

4、promise 有一个value保存状态的值，成功或失败；

5、promise 只能从pending到rejected, 或者从pending到fulfilled，状态一旦确认，就不会再改变；

6、promise 必须有一个then方法，then 接收两个参数，分别是 promise 成功的回调 onFulfilled, 和 promise 失败的回调 onRejected，参数都是value；

7、如果then中抛出异常，那么就会把这个异常作为参数，传递给下一个 then 的失败的回调onRejected，如果没有这个回调函数，则到catch方法中；

写一个简单的promise

const p1 = new Promise((resolve, reject) => {
  console.log('create a promise');
  setTimeout(() => {
        resolve('成功了');
  }, 3000)
})

p1.then(data => {
  console.log(data)
})

//输出
create a promise
成功了

实现代码如下

class promise {
    constructor(executor) {
        //三种状态
        this.statusArr = ['pending', 'fulfilled', 'rejected'];
        this.status = 'pending';
        //存一个值；默认undefined
        this.result = void 0;
        if (typeof executor === 'function') {
            //
            this.resolve = (res) => {
                this.status = 'fulfilled';
                if (this.await_fn) {
                    this.await_fn(res)
                } else {
                    this.result = res;
                }
            };
            //由于resolve是一个微任务；改为 添加setTimeout
            this.resolve = (res) => {
                setTimeout(() => {
                    this.status = 'fulfilled';
                    if (this.await_fn) {
                        this.await_fn(res)
                    } else {
                        this.result = res;
                    }
                }, 0)
            };
            this.reject = (res) => {
                this.status = 'rejected';
                if (this.catch_fn) {
                    this.catch_fn(res)
                } else {
                    this.result = res;
                }
            };
            executor(this.resolve, this.reject);

            this.then = (fn) => {
                if (this.status === 'fulfilled') {
                    fn(this.result)
                } else {
                    this.await_fn = fn;
                }
            }
            this.catch = (fn) => {
                if (this.status === 'rejected') {
                    fn(this.result)
                } else {
                    this.catch_fn = fn;
                }
            }

        } else {
            console.error(`${executor} should be a function`)
        }
    }
}

const p1 = new promise((res, rej) => {
    console.log('create a promise')
    se