当前位置：首页 > news >正文

什么是 Promise？

news 来源：原创 2025/5/14 20:08:08

在 JavaScript 中，Promise 是一种用于处理异步操作的对象。它代表一个可能在未来某个时刻完成的操作的结果。Promise 提供了一种更清晰的方式来处理异步代码，避免了传统回调函数的“回调地狱”问题。

Promise 的基本概念

状态

Promise 有三种状态：

Pending（待定）：初始状态，表示操作尚未完成。
Fulfilled（已完成）：操作成功完成，意味着 Promise 解析为一个值。
Rejected（已拒绝）：操作失败，意味着 Promise 被拒绝，并返回一个错误原因。

这三种状态的变化是单向的，即：

从 Pending 到 Fulfilled
从 Pending 到 Rejected

一旦 Promise 的状态被改变，就无法再修改。

Promise 的创建

可以使用 Promise 构造函数创建一个新的 Promise 实例。构造函数接受一个函数作为参数，这个函数又接受两个参数：resolve 和 reject。这两个参数是函数，用于更改 Promise 的状态。

const myPromise = new Promise((resolve, reject) => {
    // 模拟异步操作
    setTimeout(() => {
        const success = true; // 模拟操作成功与否
        if (success) {
            resolve('操作成功'); // 解析 Promise
        } else {
            reject('操作失败'); // 拒绝 Promise
        }
    }, 1000);
});

使用 Promise

一旦 Promise 被创建，可以使用 .then() 和 .catch() 方法来处理异步操作的结果。

.then()：用于处理 Promise 被解析时的结果。
.catch()：用于处理 Promise 被拒绝时的错误。

myPromise
    .then((result) => {
        console.log(result); // 输出 '操作成功'
    })
    .catch((error) => {
        console.error(error); // 输出 '操作失败'
    });

Promise 的链式调用

Promise 的一个强大特性是支持链式调用。这意味着可以在一个 .then() 中返回另一个 Promise，从而实现多个异步操作的顺序执行。

const promise1 = new Promise((resolve) => {
    setTimeout(() => resolve('第一个 Promise 完成'), 1000);
});

const promise2 = new Promise((resolve) => {
    setTimeout(() => resolve('第二个 Promise 完成'), 1000);
});

promise1
    .then((result) => {
        console.log(result); // 输出 '第一个 Promise 完成'
        return promise2; // 返回第二个 Promise
    })
    .then((result) => {
        console.log(result); // 输出 '第二个 Promise 完成'
    });

Promise.all() 方法

Promise.all() 方法接受一个包含多个 Promise 的可迭代对象，并返回一个新的 Promise。这个新的 Promise 在所有输入的 Promise 都成功完成时解析；如果其中任何一个 Promise 被拒绝，则返回的 Promise 将被拒绝。

const promiseA = Promise.resolve('A');
const promiseB = new Promise((resolve) => setTimeout(() => resolve('B'), 1000));
const promiseC = new Promise((_, reject) => setTimeout(() => reject('C 错误'), 500));

Promise.all([promiseA, promiseB, promiseC])
    .then((results) => {
        console.log(results); // 不会执行，因为有一个 Promise 被拒绝
    })
    .catch((error) => {
        console.error('一个 Promise 失败:', error); // 输出 '一个 Promise 失败: C 错误'
    });

Promise.race() 方法

Promise.race() 方法也接受一个包含多个 Promise 的可迭代对象，返回一个新的 Promise。当其中一个 Promise 首先完成（无论是成功还是失败）时，返回的 Promise 就会解析或拒绝。

const promise1 = new Promise((resolve) => setTimeout(resolve, 100, '第一个'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 200, '第二个'));

Promise.race([promise1, promise2])
    .then((result) => {
        console.log(result); // 输出 '第一个'
    });

Promise.finally() 方法

Promise.finally() 方法用于指定无论 Promise 最终以何种方式结束（成功或失败）都要执行的回调。这个方法通常用于清理操作，比如隐藏加载提示。

const fetchData = new Promise((resolve, reject) => {
    setTimeout(() => resolve('数据已获取'), 2000);
});

fetchData
    .then((data) => {
        console.log(data); // 输出 '数据已获取'
    })
    .catch((error) => {
        console.error(error);
    })
    .finally(() => {
        console.log('完成操作'); // 输出 '完成操作'
    });