3分钟带你了解什么是Promise

一、什么是promise

Promise是JavaScript中的一种用于处理异步操作的编程模式，能够提高代码的可读性和可维护性，使异步代码更加简洁、优雅。

Promise的核心思想是将异步操作从回调函数中分离出来，通过链式调用的方式来表达异步操作之间的依赖关系。它提供了一种更加优雅的解决方案，避免了传统回调函数方式导致的代码嵌套深、可读性差、难以维护等问题‌

二、promise的使用

1.创建promise实例

使用new Promise构造函数创建一个新的Promise实例。构造函数接收一个执行器函数作为参数，这个函数有两个参数：resolve和reject。

let promise = new Promise((resolve, reject) => {
    // 异步操作
    if (/* 异步操作成功 */) {
        resolve(value); // 改变Promise的状态为fulfilled
    } else {
        reject(error); // 改变Promise的状态为rejected
    }
});

2.注册回调

使用.then()方法注册成功和失败的回调函数。.then()方法接收两个参数：第一个是成功时的回调，第二个是失败时的回调（可选）。

promise.then(
    value => { /* 处理成功的结果 */ },
    error => { /* 处理失败的结果 */ }
);

3.捕获错误

使用.catch()方法捕获Promise在执行过程中抛出的错误。

promise.catch(error => {
    // 处理错误
});

4.无论成功或失败都执行

使用.finally()方法指定无论Promise对象最后状态如何，都会执行的操作。

promise.finally(() => {
    // 无论成功或失败都会执行
});

三、创建一个实例使用promise

实现一个基本的Promise需要遵循Promise/A+规范，这里提供一个简化版的实现：

class MyPromise {
    constructor(executor) {
        this.status = 'pending';
        this.value = undefined;
        this.reason = undefined;
        this.onResolvedCallbacks = [];
        this.onRejectedCallbacks = [];

        const resolve = (value) => {
            if (this.status === 'pending') {
                this.status = 'fulfilled';
                this.value = value;
                this.onResolvedCallbacks.forEach(fn => fn());
            }
        };

        const reject = (reason) => {
            if (this.status === 'pending') {
                this.status = 'rejected';
                this.reason = reason;
                this.onRejectedCallbacks.forEach(fn => fn());
            }
        };

        try {
            executor(resolve, reject);
        } catch (err) {
            reject(err);
        }
    }

    then(onFulfilled, onRejected) {
        let promise2 = new MyPromise((resolve, reject) => {
            // 处理 onFulfilled
            if (this.status === 'fulfilled') {
                setTimeout(() => {
                    try {
                        let x = onFulfilled(this.value);
                        resolvePromise(promise2, x, resolve, reject);
                    } catch (error) {
                        reject(error);
                    }
                }, 0);
            }
            // 处理 onRejected 和 pending 状态...（与之前类似）
        });
        return promise2;
    }

    // 添加 resolvePromise 方法来处理值的传递和 Promise 链接
    static resolvePromise(promise2, x, resolve, reject) {
        // ...（实现 Promise 解析过程，包括处理 Promise、thenable 和普通值）
    }
}

1. ‌构造函数‌：
   接收一个执行器函数 executor，该函数接收两个参数：resolve 和 reject。
   初始化 Promise 的状态为 pending。
   使用 try...catch 语句来捕获执行器函数中的错误，并通过 reject 函数拒绝 Promise。

2. then 方法‌：
   接收两个参数：onFulfilled 和 onRejected，分别对应成功和失败的回调函数。
   根据 Promise 的当前状态（fulfilled、rejected 或 pending），执行相应的回调函数。
   使用 setTimeout 来确保回调函数的异步执行。
   返回 this 以实现链式调用。

3. 值的传递‌：
   在 Promise 链中，每个 then 方法都应该返回一个新的 Promise，以便可以传递值给下一个 then。

4. 错误处理‌：
   如果 onFulfilled 或 onRejected 回调函数抛出错误，错误被捕获并传递给下一个 then 方法的 onRejected 回调。

5. ‌then 方法的返回值‌：
   then 方法应该返回一个新的 Promise，以便可以链接更多的 then 调用。

6. 其他方法‌：
   Promise 还有其他方法，如 catch 和 finally