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

JS中的Promise对象

news 来源：原创 2025/6/17 20:41:42

基本概念

Promise 是 JavaScript 中用于处理异步操作的对象。它代表一个异步操作的最终完成及其结果值。Promise 提供了一种更优雅的方式来处理异步代码，避免了传统的回调地狱。

Promise 有三种状态

Pending（等待中）：初始状态，既不是成功，也不是失败；
Fulfilled（已成功）：操作成功完成；
Rejected（已失败）：操作失败；

Promise 的状态一旦改变，就不会再变。即从 Pending 变为 Fulfilled 或 Rejected 后，状态就固定了。

创建 Promise

你可以通过 new Promise() 构造函数来创建一个 Promise 对象。构造函数接受一个函数作为参数，这个函数有两个参数：resolve 和 reject，它们都是函数。

1. resolve(value)：将 Promise 的状态从 Pending 变为 Fulfilled，并将 value 作为成功的结果；

2. reject(reason)：将 Promise 的状态从 Pending 变为 Rejected，并将 reason 作为失败的原因

const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        const success = true;
        if (success) {
            resolve("操作成功！");
        } else {
            reject("操作失败！");
        }
    }, 1000);
})

使用 Promise

Promise 对象有两个主要的方法来处理成功和失败的情况：.then() 和 .catch()

.then(onFulfilled, onRejected)：当 Promise 状态变为 Fulfilled 时，调用 onFulfilled 函数；当状态变为 Rejected 时，调用 onRejected 函数；
.catch(onRejected)：当 Promise 状态变为 Rejected 时，调用 onRejected 函数；

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

Promise 链式调用

Promise 支持链式调用，即在一个 .then() 中返回一个新的 Promise，然后可以在下一个 .then() 中继续处理

new Promise((resolve, reject) => {
    setTimeout(() => resolve(1), 1000);
})
.then((result) => {
    console.log(result); // 输出: 1
        return result * 2;
})
.then((result) => {
    console.log(result); // 输出: 2
    return result * 2;
})
.then((result) => {
    console.log(result); // 输出: 4
});

async/await

async/await 是 ES2017 引入的语法糖，用于更简洁地处理 Promise。async 函数返回一个 Promise，而 await 用于等待 Promise 的完成

const myPromise = new Promise((resolve, reject) => {
    // 模拟异步操作
    setTimeout(() => {
        const success = true; // 可以切换为 false 来模拟失败
        if (success) {
            resolve("操作成功！");
        } else {
            reject("操作失败！");
        }
    }, 1000);
});

async function myAsyncFunction() {
    try {
        const result = await myPromise;
        console.log(result); // 输出: 操作成功！
    } catch (error) {
        console.error(error); // 输出: 操作失败！
    }
}

myAsyncFunction();

总结

Promise 是 JavaScript 中处理异步操作的重要工具。它通过 .then() 和 .catch() 方法提供了更清晰的代码结构，避免了回调地狱。async/await 进一步简化了 Promise 的使用，使得异步代码看起来更像同步代码。掌握 Promise 的使用对于编写现代 JavaScript 应用程序至关重要。