在实践中了解 Promise

2024-02-26 15:31:44

在 JavaScript 的世界里，异步操作就像家常便饭一样，随处可见。从获取网络数据到处理用户输入，这些操作都需要时间来完成，而我们不能让程序傻傻地等待，阻塞了其他任务的执行。这时，Promise 就闪亮登场了，它就像一位优雅的调度员，帮助我们管理这些异步操作，让代码更加流畅和易于理解。

Promise，顾名思义，它代表着一种承诺，承诺在未来某个时刻会给你一个结果。这个结果可能是成功的，也可能是失败的，但无论如何，Promise 都会给你一个交代。

一个 Promise 对象有三种状态：

Pending（等待中）： 就像你下单后，快递还在路上，你不知道它什么时候会到。
Fulfilled（已完成）： 快递终于送到了，你拿到了心仪的商品，这就是 Promise 成功完成的状态。
Rejected（已拒绝）： 很不幸，快递在路上丢了，或者商品缺货了，这就是 Promise 失败的状态。

那么，我们该如何创建一个 Promise 呢？很简单，使用 new Promise() 构造函数即可。这个构造函数接受一个回调函数作为参数，这个回调函数有两个参数：resolve 和 reject。

resolve：当异步操作成功完成时，我们调用 resolve 函数，并将结果作为参数传递进去。
reject：当异步操作失败时，我们调用 reject 函数，并将错误信息作为参数传递进去。

举个例子，假设我们要模拟一个网络请求：

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { name: 'John', age: 30 };
      resolve(data); // 模拟网络请求成功
    }, 1000);
  });
};

在这个例子中，fetchData 函数返回一个 Promise 对象。在 Promise 的回调函数中，我们使用 setTimeout 模拟了一个延迟 1 秒的网络请求。当请求成功后，我们调用 resolve 函数，并将模拟的数据传递进去。

现在，我们就可以使用 .then() 方法来处理 Promise 的结果了：

fetchData()
  .then(data => {
    console.log('数据获取成功：', data);
  })
  .catch(error => {
    console.log('数据获取失败：', error);
  });

.then() 方法接受一个回调函数作为参数，这个回调函数会在 Promise 成功完成时被调用，并将 Promise 的结果作为参数传递进去。.catch() 方法则是在 Promise 失败时被调用，并将错误信息作为参数传递进去。

Promise 还有一个强大的功能，那就是链式调用。我们可以通过 .then() 方法将多个 Promise 链接在一起，形成一个处理流程。例如：

fetchData()
  .then(data => {
    console.log('数据获取成功：', data);
    return processData(data); // 对数据进行处理，并返回一个新的 Promise
  })
  .then(processedData => {
    console.log('数据处理完成：', processedData);
  })
  .catch(error => {
    console.log('发生错误：', error);
  });