JavaScript 异步编程学习笔记：Promise 和 async/await

写在前面

虽然我的主方向是 Java 后端，但做 AI 项目和博客后台时，经常需要写一点前端逻辑。JavaScript 的异步编程是绕不开的基础。

这篇文章记录 Promise 和 async/await 的基本理解。

Promise

Promise 用来表示一个未来才会完成的操作。

function fetchUser() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ id: 1, name: "zxy" });
    }, 500);
  });
}

使用：

fetchUser()
  .then(user => {
    console.log(user.name);
  })
  .catch(error => {
    console.error(error);
  });

async/await

async/await 可以让异步代码写起来更接近同步代码。

async function loadUser() {
  try {
    const user = await fetchUser();
    console.log(user.name);
  } catch (error) {
    console.error(error);
  }
}

我现在会优先用 async/await，因为可读性更好。

并行请求

如果两个请求互不依赖，可以用 Promise.all：

const [user, config] = await Promise.all([
  fetchUser(),
  fetchConfig()
]);

这样不用等第一个请求完成后再发第二个请求。

小结

前端异步最重要的是清楚任务之间是否有依赖关系。能并行的并行，有依赖的按顺序写，并且一定要处理异常。