JavaScript Promise 入门指南：告别回调地狱

前端

2023-12-03 03:20:37

JavaScript Promise：异步编程的救星

JavaScript 是单线程语言，这意味着它一次只能执行一项任务。当需要执行异步操作（例如从服务器获取数据）时，传统的方法是使用回调函数。然而，嵌套回调会导致难以阅读和维护的 "回调地狱"。

JavaScript Promise 为异步编程提供了一种更优雅的解决方案。Promise 是一个对象，它表示一个异步操作的最终完成或失败的结果。通过使用 Promise，我们可以将异步操作链成一个线性流程，使代码更加清晰易懂。

Promise 的工作原理

Promise 有三个状态：

Pending： 初始状态，表示异步操作尚未完成。
Fulfilled： 操作已成功完成，结果已通过 .then() 方法提供。
Rejected： 操作失败，错误通过 .catch() 方法提供。

Promise 通过以下方法与代码交互：

.then()： 用于处理已完成的 Promise。如果 Promise 已 Fulfilled，则提供结果，否则抛出错误。
.catch()： 用于处理已 Rejected 的 Promise，接收错误作为参数。
.finally()： 无论 Promise 是 Fulfilled 还是 Rejected，都会执行的操作。

使用 Promise

创建 Promise：

const promise = new Promise((resolve, reject) => {
  // 异步操作代码
  if (success) {
    resolve(result);
  } else {
    reject(error);
  }
});

使用 Promise：

promise
  .then((result) => {
    // Promise 已完成，处理结果
  })
  .catch((error) => {
    // Promise 已 Rejected，处理错误
  })
  .finally(() => {
    // Promise 已完成或 Rejected，始终执行
  });

实践：获取服务器数据

function getData() {
  return new Promise((resolve, reject) => {
    fetch('https://example.com/data.json')
      .then((response) => response.json())
      .then((data) => resolve(data))
      .catch((error) => reject(error));
  });
}

getData()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });