如释重负，踩坑了！终于搞懂Promise和async/await！

2023-10-13 06:59:23

在现代的前端开发中，异步编程已经成为不可或缺的一部分。异步编程允许我们同时处理多个任务，提高代码执行效率，带来更加流畅的用户体验。而在异步编程领域，Promise和async/await这两个语法糖无疑是至关重要的。

一、Promise

Promise是一个对象，它代表着对未来某个事件的承诺。它可以处于三种状态之一：

pending（等待）： 初始状态，事件尚未完成。
fulfilled（已完成）： 事件已完成，操作成功。
rejected（已拒绝）： 事件已完成，操作失败。

1. Promise的用法

（1）创建Promise

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    resolve("成功了！");
  }, 1000);
});

上面的代码创建一个Promise对象，并传入一个执行器函数。执行器函数接收两个参数：

resolve： 当异步操作成功时调用，将结果传递给Promise。
reject： 当异步操作失败时调用，将错误信息传递给Promise。

（2）处理Promise

promise.then(result => {
  console.log("成功了！结果：", result);
}, error => {
  console.log("失败了！原因：", error);
});

上面的代码使用.then()方法来处理Promise。.then()方法接收两个回调函数：

第一个回调函数： 当Promise处于fulfilled状态时调用，将结果作为参数传递给回调函数。
第二个回调函数： 当Promise处于rejected状态时调用，将错误信息作为参数传递给回调函数。

二、async/await

async/await是ES8中引入的语法糖，它使我们能够更方便地编写异步代码。

1. async函数

async函数是一个特殊的函数，它可以返回一个Promise对象。async函数的语法如下：

async function myFunction() {
  // 异步操作
  const result = await someAsyncFunction();
  return result;
}

上面的代码定义了一个async函数myFunction()。该函数包含一个异步操作，并使用await等待异步操作完成。

2. await关键字

await关键字用于暂停async函数的执行，直到异步操作完成。await关键字只能在async函数中使用。

const result = await someAsyncFunction();

上面的代码使用await关键字等待异步函数someAsyncFunction()完成。

三、Promise和async/await的比较

Promise和async/await都是用于处理异步编程的语法糖，但它们之间存在一些差异。

1. 语法

Promise的语法相对复杂，而async/await的语法更加简洁。

2. 错误处理

Promise的错误处理需要使用.catch()方法，而async/await的错误处理可以使用try...catch块。

3. 使用场景

Promise通常用于处理单一异步操作，而async/await可以处理多个异步操作。

四、使用示例

以下是一些使用Promise和async/await的示例代码：

// 使用Promise
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("成功了！");
  }, 1000);
});

promise.then(result => {
  console.log("成功了！结果：", result);
}, error => {
  console.log("失败了！原因：", error);
});

// 使用async/await
async function myFunction() {
  try {
    const result = await someAsyncFunction();
    console.log("成功了！结果：", result);
  } catch (error) {
    console.log("失败了！原因：", error);
  }
}

myFunction();