JavaScript Promises 简明教程：带有真实示例的初学者指南

# Web 开发 # JavaScript # 编程 # 初学者

JavaScript 中的 Promise 是什么？

在 JavaScript 中，**Promise** 是管理异步任务的强大工具。它是一个表示可能现在可用、将来可用或永远不可用的值的对象。Promise 使处理以下任务变得更容易：

从 API 获取数据。🌐

等待计时器完成。⏱️

处理用户操作，例如单击按钮。🖱️

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

待定：任务正在进行中，尚未完成。⏳

已完成（已解决）：任务成功完成。✅

拒绝：任务失败。❌

Promises 如何工作？（初学者友好的解释）

让我们用咖啡馆来打个比方：

订购咖啡（待定）：您订购咖啡并等待制作。🔄

咖啡准备好了（已解决）：咖啡师为您提供咖啡。🎉

机器坏了（被拒绝）：咖啡师告诉你咖啡机坏了。😔

一个简单的 JavaScript Promise 示例

使用 JavaScript 编写的方法如下：

const coffeePromise = new Promise((resolve, reject) => {
  const coffeeReady = true; // Try changing this to false to simulate rejection.

  setTimeout(() => {
    if (coffeeReady) {
      resolve("Your coffee is ready! ☕");
    } else {
      reject("Sorry, the coffee machine is broken. 😢");
    }
  }, 2000); // Simulates a 2-second wait
});

// Handling the Promise
coffeePromise
  .then((message) => console.log(message)) // If resolved
  .catch((error) => console.error(error)) // If rejected
  .finally(() => console.log("Thanks for visiting our café! 😊"));

JavaScript 中 Promise 的真实示例

1. 使用出租车应用程序预订车程 🚗

当您叫车时：

待定：应用程序正在寻找司机。🔄

已解决：司机接受您的请求。✅

已拒绝：没有可用的驱动程序。❌

function bookRide() {
  console.log("Searching for a ride... 🔄 (Pending)");

  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const driverAvailable = Math.random() > 0.5; // 50% chance of success
      if (driverAvailable) {
        resolve("Driver found! 🚗💨");
      } else {
        reject("No drivers available. 😔");
      }
    }, 3000); // Simulate search delay
  });
}

// Using the Promise
bookRide()
  .then((message) => {
    console.log("Ride Status: Resolved ✅");
    console.log(message);
  })
  .catch((error) => {
    console.log("Ride Status: Rejected ❌");
    console.error(error);
  })
  .finally(() => {
    console.log("Thanks for using our ride service! 😊");
  });

2.下载文件📥

下载文件时：

待处理：下载正在进行中。🔄

已解决：文件下载成功。✅

拒绝：网络连接失败。❌

function downloadFile(fileName) {
  console.log(`Downloading "${fileName}"... 🔄 (Pending)`);

  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const downloadSuccess = Math.random() > 0.7; // 30% success rate
      if (downloadSuccess) {
        resolve(`"${fileName}" downloaded successfully! 📂`);
      } else {
        reject(`Failed to download "${fileName}". Check your connection. 🚨`);
      }
    }, 2000); // Simulates download time
  });
}

// Using the Promise
downloadFile("example.pdf")
  .then((message) => {
    console.log("Download Status: Resolved ✅");
    console.log(message);
  })
  .catch((error) => {
    console.log("Download Status: Rejected ❌");
    console.error(error);
  })
  .finally(() => {
    console.log("Thanks for using our download manager! 📥");
  });

示例 3：规划公路旅行

计划旅行时，步骤如下：

收拾好行李。🎒

预订出租车。🚕

到达目的地。🏖️

每个步骤可以是**待定**、**已解决**或**已拒绝**。

function packBags() {
  console.log("Packing bags... 🔄 (Pending)");

  return new Promise((resolve) => {
    setTimeout(() => resolve("Bags packed! 🎒 ✅"), 1000);
  });
}

function bookCab() {
  console.log("Booking a cab... 🔄 (Pending)");

  return new Promise((resolve, reject) => {
    const cabAvailable = Math.random() > 0.4; // 60% chance of success
    setTimeout(() => {
      if (cabAvailable) {
        resolve("Cab booked! 🚕 ✅");
      } else {
        reject("No cabs available. 😔 ❌");
      }
    }, 2000);
  });
}

function reachDestination() {
  console.log("Heading to destination... 🔄 (Pending)");

  return new Promise((resolve) => {
    setTimeout(() => resolve("Reached destination! 🏖️ ✅"), 3000);
  });
}

// Chaining Promises
packBags()
  .then((message) => {
    console.log("Step 1: Resolved ✅");
    console.log(message);
    return bookCab();
  })
  .then((message) => {
    console.log("Step 2: Resolved ✅");
    console.log(message);
    return reachDestination();
  })
  .then((message) => {
    console.log("Step 3: Resolved ✅");
    console.log(message);
  })
  .catch((error) => {
    console.log("Status: Rejected ❌");
    console.error(error);
  })
  .finally(() => {
    console.log("Trip preparation done. Safe travels! 🚀");
  });

为什么在 JavaScript 中使用 Promises？

Promises 解决了 JavaScript 中的一个常见问题：**回调地狱**（嵌套回调使你的代码难以阅读和调试）。

**使用 Promises 的好处：**

🌟 可读代码：通过避免深度嵌套的回调，Promises 使您的代码更易于理解。

🚨 错误处理：在一个流程中管理成功和失败的情况。

🔗 链接：将多个异步任务链接在一起以获得清晰的工作流程。

关于 JavaScript Promises 的最终思考

Promises 彻底改变了 JavaScript 中异步任务的管理方式。无论您是预订行程、下载文件还是在线观看电影，Promises 都能让您的代码优雅而高效地处理这些任务。

**有问题吗？** 在下面发表评论！让我们一起掌握 JavaScript。💬

让我们连接 LinkedIn

CLIS.CC