Promise 和 async/await 的区别：别再傻傻分不清了！

2024/11/26 23:29:13 20 0 0 0

最近在帮小师弟 debug 代码，发现他 Promise 和 async/await 搞混了，写出来的异步代码又臭又长，简直惨不忍睹！这让我不禁想写篇文章，好好理理 Promise 和 async/await 的区别，给那些还在迷茫中的小伙伴们指条明路。

首先，Promise 是一个对象，代表着某个未来才会知道结果的异步操作。它有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。我们可以通过 then() 方法来处理 fulfilled 状态，通过 catch() 方法来处理 rejected 状态。

举个栗子，假设我们要从服务器获取数据：

fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

这段代码使用 Promise 来处理 fetch 请求。首先，fetch 返回一个 Promise 对象。然后，我们使用 then() 方法来处理返回的 JSON 数据。如果请求失败，则使用 catch() 方法来处理错误。

而 async/await 则是基于 Promise 的语法糖，它让异步代码看起来更像同步代码，更加简洁易读。async 函数总是返回一个 Promise 对象，而 await 关键字只能在 async 函数中使用，它会暂停 async 函数的执行，直到 Promise 对象 resolve 或 reject。

还是上面的栗子，使用 async/await 重写：

async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchData();

是不是感觉清爽多了？async/await 让异步代码的逻辑更加清晰，也更容易理解和维护。

那么，Promise 和 async/await 的区别到底是什么呢？

本质区别: Promise 是一个对象，而 async/await 是一种语法糖，它基于 Promise 实现。
写法区别: Promise 使用 then() 和 catch() 方法处理结果，而 async/await 使用 try...catch 块处理结果。
可读性区别: async/await 的代码可读性更好，更像同步代码。
适用场景区别: async/await 更适合处理多个异步操作的场景，因为它可以更方便地使用 await 关键字暂停执行，直到所有异步操作都完成。

总而言之，async/await 并不是取代 Promise，而是对其进行增强，让异步编程更加优雅和高效。如果你需要处理简单的异步操作，使用 Promise 就足够了。但是，如果你需要处理复杂的异步操作，或者想要提高代码的可读性，那么 async/await 绝对是更好的选择。记住，选择合适的工具才能事半功倍！

前端工程师老王 JavaScript Promise async/await 异步编程前端开发

Promise 和 async/await 的区别：别再傻傻分不清了！

评论点评