Javascript Promises

在现代Web开发中，处理异步操作是非常常见的，例如网络请求、文件读取等。JavaScript Promises 提供了一种更优雅的方式来处理这些异步操作，避免了传统回调函数所带来的“回调地狱”问题。

轻松理解 Promise

一些耗时的任务，比如加载图片、发送网络请求等等。这些任务不会立即完成，而是需要花费一段时间。为了避免阻塞代码执行，我们使用异步操作来处理它们。

但是，异步操作也带来了一个问题：我们如何知道它们什么时候完成，以及是成功还是失败呢？

Promise 就是来解决这个问题的！

你可以把 Promise 想象成一个 “承诺”，它代表着某个异步操作的最终结果。这个承诺有三种状态：

1. 等待中 (pending)： 就像你刚下单买东西，快递还在路上的状态，结果还没出来。
2. 已完成 (fulfilled)： 就像你收到了心仪的快递，异步操作成功完成了！
3. 已拒绝 (rejected)： 就像你的快递丢了，异步操作失败了。

创建一个 Promise

const myPromise = new Promise((resolve, reject) => {
  // 异步操作
  let success = true; // 这里模拟异步操作成功或失败

  if (success) {
    resolve("操作成功");
  } else {
    reject("操作失败");
  }
});

处理 Promise 结果

使用 .then() 处理成功的结果，使用 .catch() 处理失败的结果。

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

链式调用

Promise 允许通过链式调用 .then() 方法来处理一系列的异步操作，每个 .then() 处理完结果后会返回一个新的 Promise。

myPromise
  .then(result => {
    console.log(result);
    return new Promise((resolve, reject) => {
      resolve("第二个操作成功");
    });
  })
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error(error);
  });

async 和 await 的使用

async 和 await 是 ES2017 引入的语法糖，用于更简洁地处理异步操作，使得代码看起来像是同步的。通过在函数声明前加上async关键字即可定义一个异步函数。

举个例子，如果我们有一个返回Promise的函数fetchData()，不使用async/await时，我们可能会这样写：

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

而使用async/await时，我们可以这样写：

async function fetchAndPrintData() {  
    try {  
        const data = await fetchData();  
        console.log(data);  
    } catch (error) {  
        console.error(error);  
    }  
}

在后一种写法中，代码看起来更像是同步的，更容易理解。

关于 async/await 的详细用法，请参考：Javascript 异步函数（Async/Await）