理解 JavaScript Promise：初学者指南-js教程-PHP中文网

理解 JavaScript Promise：初学者指南

PHPz

发布： 2024-08-29 12:10:43

原创

392 人浏览过

Understanding JavaScript Promises: A Beginner’s Guide

JavaScript 是一种强大的语言，广泛用于 Web 开发，而现代 JavaScript 中需要掌握的基本概念之一是 Promise。如果您曾经在异步代码、回调方面遇到困难，或者只是想编写更清晰、更具可读性的代码，那么理解 Promise 是必须的。在这篇文章中，我们将深入探讨 Promise 是什么、它们如何工作以及如何使用它们更有效地处理异步操作。

什么是承诺？

在 JavaScript 中，Promise 是一个对象，表示异步操作的最终完成（或失败）及其结果值。它就像未来值的占位符，一旦操作完成，该值将被解析。

Promise 是对传统的基于回调的异步代码的重大改进，由于其深层嵌套结构和难以管理，通常被称为“回调地狱”。

承诺如何发挥作用？

Promise 可以处于以下三种状态之一：

Pending：Promise 既未履行也未拒绝的初始状态。
Fulfilled：操作成功完成时的状态，并且 Promise 已解析为值。
Rejected：操作失败时的状态，并且 Promise 被拒绝并有原因（例如错误）。

let myPromise = new Promise((resolve, reject) => {
    let success = true; // Simulating an operation

    if (success) {
        resolve("The operation was successful!");
    } else {
        reject("The operation failed.");
    }
});

myPromise.then((message) => {
    console.log(message); // This will run if the Promise is fulfilled
}).catch((error) => {
    console.error(error); // This will run if the Promise is rejected
});

登录后复制

在上面的示例中，如果“success”变量为“true”，则“myPromise”将解析；如果为“false”，则“reject”。 “.then()”方法用于处理完成状态，“.catch()”用于处理任何错误。

链接承诺

Promises 最强大的功能之一是您可以将它们链接在一起。这允许您按顺序执行多个异步操作，而不会陷入回调地狱。

myPromise
    .then((message) => {
        console.log(message);
        return new Promise((resolve, reject) => {
            resolve("Another operation completed!");
        });
    })
    .then((newMessage) => {
        console.log(newMessage);
    })
    .catch((error) => {
        console.error(error);
    });

登录后复制

在此示例中，第二个“.then()”在第一个 Promise 完成后运行，从而实现流畅、可读的异步操作流程。

处理多个 Promise

有时，您需要等待多个异步操作完成。这就是“Promise.all()”和“Promise.race()”派上用场的地方。

Promise.all()

此方法接受 Promise 数组并返回一个 Promise，当数组中的所有 Promise 都已解析时，该 Promise 会解析；如果任何 Promise 被拒绝，则该 Promise 会被拒绝。

let promise1 = Promise.resolve("First operation");
let promise2 = Promise.resolve("Second operation");

Promise.all([promise1, promise2]).then((values) => {
    console.log(values); // ["First operation", "Second operation"]
});

登录后复制

Promise.race()

Promise.race() 也接受一个 Promise 数组，但只要数组中的一个 Promise 解析或拒绝，它就会返回一个解析或拒绝的 Promise。

let promise1 = new Promise((resolve) => setTimeout(resolve, 500, "First operation"));
let promise2 = new Promise((resolve) => setTimeout(resolve, 100, "Second operation"));

Promise.race([promise1, promise2]).then((value) => {
    console.log(value); // "Second operation"
});

登录后复制