前端异步编程Promise，怎么彻底搞懂？

彻底搞懂前端异步编程 Promise：从入门到精通

在前端开发的世界里,异步编程是一个无法回避且至关重要的概念，随着网页应用变得越来越复杂，处理各种异步操作，如数据获取、定时任务、用户交互反馈等，成为了开发者必须掌握的技能，而 Promise 作为 JavaScript 中处理异步编程的重要机制，它的出现极大地改善了异步代码的可读性和可维护性，对于许多初学者甚至有一定经验的开发者来说，彻底搞懂 Promise 并非易事，本文将带你深入剖析 Promise，从基本概念到实际应用，再到源码层面的理解，助你彻底掌握这一前端异步编程的利器。

异步编程的困境与 Promise 的诞生

（一）回调地狱的困扰

在 Promise 出现之前，前端主要依靠回调函数来处理异步操作，当多个异步操作需要依次执行，且后一个操作依赖前一个操作的结果时，就会出现回调函数嵌套回调函数的情况，形成所谓的“回调地狱”。

getData1(function (result1) {
    getData2(result1, function (result2) {
        getData3(result2, function (result3) {
            // 更多嵌套...
        });
    });
});

这样的代码结构不仅难以阅读,而且在维护和调试时会带来极大的困扰。

（二）Promise 的应运而生

Promise 就是为了解决回调地狱问题而提出的解决方案，它代表一个异步操作的最终完成（或失败）及其结果值，通过将异步操作封装成 Promise 对象，我们可以以链式调用的方式来处理多个异步操作，使代码更加清晰和易于维护。

Promise 的基本概念与用法

（一）Promise 的状态

Promise 有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败），一旦 Promise 的状态从 pending 变为 fulfilled 或 rejected，就不会再改变，这种状态的变化是不可逆的。

（二）创建 Promise 对象

使用 new Promise() 构造函数可以创建一个 Promise 对象，构造函数接受一个执行器函数作为参数，该执行器函数又接受两个参数：resolve 和 reject，resolve 函数用于将 Promise 的状态从 pending 变为 fulfilled，并传递成功的结果；reject 函数则用于将状态变为 rejected，并传递失败的原因，示例如下：

const promise = new Promise((resolve, reject) => {
    // 模拟异步操作
    setTimeout(() => {
        const random = Math.random();
        if (random > 0.5) {
            resolve(`成功：随机数 ${random} 大于 0.5`);
        } else {
            reject(`失败：随机数 ${random} 小于等于 0.5`);
        }
    }, 1000);
});

（三）使用.then()、.catch() 和.finally() 方法

• .then()：用于指定当 Promise 的状态变为 fulfilled 时要执行的回调函数，它可以接收两个参数，第一个参数是成功时的回调函数，第二个参数（可选）是失败时的回调函数（不过通常更推荐使用.catch()来处理失败情况）。

  promise.then(
    (result) => {
        console.log(result);
    },
    (error) => {
        console.log(error);
    }
  );
  // 更常见的链式调用方式，分开处理成功和失败
  promise
   .then((result) => {
        console.log(result);
    })
   .catch((error) => {
        console.log(error);
    });

• .catch()：专门用于捕获 Promise 执行过程中抛出的错误，即当 Promise 的状态变为 rejected 时执行。
• .finally()：无论 Promise 的最终状态是 fulfilled 还是 rejected，.finally() 指定的回调函数都会执行，常用于一些清理操作，如关闭加载动画等。

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

（四）链式调用的优势

通过.then()的链式调用，我们可以将多个异步操作依次串联起来，每个.then()中的操作都依赖于前一个 Promise 的结果，这样的代码结构清晰明了，避免了回调地狱的困境。

fetchData1()
   .then((result1) => {
        return fetchData2(result1);
    })
   .then((result2) => {
        return fetchData3(result2);
    })
   .then((result3) => {
        console.log('最终结果:', result3);
    })
   .catch((error) => {
        console.log('发生错误:', error);
    });

Promise 的进阶特性

（一）Promise.all()

Promise.all(iterable) 方法接收一个可迭代对象（通常是数组），其中包含多个 Promise 实例，只有当所有 Promise 都成功时，它才会返回一个新的 Promise，该 Promise 的结果是一个数组，包含了所有成功 Promise 的结果，顺序与传入的可迭代对象顺序一致，如果其中任何一个 Promise 失败，它就会立即返回一个失败的 Promise，失败原因是第一个失败 Promise 的原因。

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve) => {
    setTimeout(resolve, 100, 'foo');
});
Promise.all([promise1, promise2, promise3])
   .then((values) => {
        console.log(values); // [3, 42, "foo"]
    });

这个方法常用于需要同时获取多个异步数据源的场景,例如同时获取用户信息和商品信息，只有当两者都获取成功后才进行后续操作。

（二）Promise.race()

Promise.race(iterable) 方法同样接收一个可迭代对象，返回一个新的 Promise，只要可迭代对象中的任何一个 Promise 有了结果（无论是成功还是失败），这个新的 Promise 就会立即以该结果完成。

const promise1 = new Promise((resolve) => {
    setTimeout(resolve, 500, 'one');
});
const promise2 = new Promise((resolve) => {
    setTimeout(resolve, 100, 'two');
});
Promise.race([promise1, promise2])
   .then((value) => {
        console.log(value); // "two" 因为 promise2 更快完成
    });

Promise.race() 可以用于设置超时机制，例如在一个网络请求中，如果超过一定时间没有响应，就认为请求失败。

从源码层面理解 Promise

（一）简单 Promise 实现的基本结构

下面是一个简单 Promise 的实现框架，帮助我们理解其内部运作机制：

class MyPromise {
    constructor(executor) {
        this.state = 'pending'; // 初始状态
        this.value = undefined; // 成功结果
        this.reason = undefined; // 失败原因
        this.onFulfilledCallbacks = []; // 成功回调函数数组
        this.onRejectedCallbacks = []; // 失败回调函数数组
        const resolve = (value) => {
            if (this.state === 'pending') {
                this.state = 'fulfilled';
                this.value = value;
                this.onFulfilledCallbacks.forEach((fn) => fn());
            }
        };
        const reject = (reason) => {
            if (this.state === 'pending') {
                this.state = 'rejected';
                this.reason = reason;
                this.onRejectedCallbacks.forEach((fn) => fn());
            }
        };
        try {
            executor(resolve, reject);
        } catch (error) {
            reject(error);
        }
    }
   //... 其他方法如.then() 等的实现
}

在这个实现中,构造函数接收执行器函数，并定义了 resolve 和 reject 函数来改变 Promise 的状态，并执行相应的回调函数。

（二）.then() 方法的实现思路

.then() 方法需要返回一个新的 Promise，以便实现链式调用，它根据当前 Promise 的状态来决定何时执行传入的回调函数，并将回调函数的结果作为新 Promise 的结果（如果回调函数返回的是一个值）或者根据回调函数的执行情况来决定新 Promise 的状态（如果回调函数抛出错误或返回的是一个 Promise 对象）。

实际应用案例分析

（一）图片预加载

在网页中,为了提高用户体验，常常需要对图片进行预加载，使用 Promise 可以很好地处理图片加载的异步过程：

function preloadImage(url) {
    return new Promise((resolve, reject) => {
        const image = new Image();
        image.onload = () => {
            resolve(image);
        };
        image.onerror = () => {
            reject(new Error(`图片加载失败: ${url}`));
        };
        image.src