Promise与async、await

2023-11-19 09:29:12

现代开发中异步编程已成为一种必要且重要的一部分，而JavaScript中的Promise以及async/await作为处理异步操作的利器，对我们的开发方式产生了深远影响。本文将全面剖析Promise与async/await，为你揭秘JavaScript异步编程的神奇之处。

什么是Promise

Promise是一种JavaScript对象，它表示一个异步操作的结果，该结果可能是成功或失败。Promise对象有三个状态：等待（pending）、已完成（fulfilled）和已拒绝（rejected）。

等待（pending）： 这是Promise的初始状态，表示异步操作正在进行中。
已完成（fulfilled）： 当异步操作成功完成时，Promise会进入已完成状态，你可以通过.then()方法访问其结果。
已拒绝（rejected）： 当异步操作失败时，Promise会进入已拒绝状态，你可以通过.catch()方法访问其错误信息。

你可以使用new Promise()创建一个Promise对象，并在构造函数中传入一个函数，该函数将异步操作作为参数。当异步操作完成时，你可以在函数中调用resolve()方法来将Promise的状态设置为已完成，也可以调用reject()方法来将Promise的状态设置为已拒绝。

为啥使用Promise

在使用Promise之前，JavaScript中处理异步操作的常见方法是回调函数。回调函数是一种函数，它会在异步操作完成时被调用。然而，回调函数的使用很容易导致代码难以阅读和维护，尤其是在嵌套多个异步操作的时候。

Promise的出现解决了回调函数的这些问题。通过使用Promise，你可以将异步操作的结果封装成一个对象，并使用.then()和.catch()方法来处理其结果。这使得代码更加清晰和易于维护。

Promise的基本用法

创建Promise：

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

使用Promise：

promise.then((result) => {
  console.log(result); // 输出：成功
}).catch((error) => {
  console.log(error);
});

Async/Await

async/await是JavaScript中引入的用于编写异步代码的新语法。async用于定义一个异步函数，await关键字用于暂停一个异步函数，直到异步操作完成。

async function myAsyncFunction() {
  const result = await promise;
  console.log(result);
}

myAsyncFunction();

在上面的代码中，myAsyncFunction()是一个异步函数，它使用await关键字等待promise的完成，然后打印其结果。这种语法使异步代码看起来就像同步代码一样，从而简化了异步编程的复杂性。

Promise与async/await的比较

Promise和async/await都是处理异步操作的强大工具，但它们也有各自的优缺点。

特性	Promise	async/await
语法	更复杂	更简单
可读性	较低	较高
可维护性	较低	较高
适用场景	需要处理多个异步操作时	需要编写更复杂的异步代码时