zeng

JavaScript异步编程：async/await详解

发布于 2024年2月10日 作者: zeng

JavaScript 是一门单线程语言，异步编程是其核心特性之一。随着 ES2017 的发布，async/await 语法的引入极大地简化了异步代码的编写和理解。

异步编程的发展历程

回调函数

早期的 JavaScript 异步编程主要依赖回调函数：

fs.readFile("file.txt", "utf8", (err, data) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log(data);
});

回调函数的缺点是容易导致”回调地狱”（Callback Hell），使代码难以阅读和维护。

Promise

ES6 引入了 Promise，解决了回调地狱的问题：

readFile("file.txt")
  .then((data) => {
    console.log(data);
    return readFile("another.txt");
  })
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.error(err);
  });

Promise 链式调用使代码更加清晰，但仍然需要处理大量的 then 和 catch。

async/await

ES2017 引入的 async/await 语法，使异步代码看起来像同步代码一样：

async function readFiles() {
  try {
    const data1 = await readFile("file.txt");
    console.log(data1);
    const data2 = await readFile("another.txt");
    console.log(data2);
  } catch (err) {
    console.error(err);
  }
}

readFiles();

async/await 的基本语法

async 函数

使用 async 关键字声明的函数是异步函数：

async function myFunction() {
  // 异步操作
}

async 函数总是返回一个 Promise 对象：

async function hello() {
  return "Hello World";
}

hello().then(console.log); // 输出: Hello World

await 关键字

await 关键字只能在 async 函数内部使用，它会暂停函数的执行，等待 Promise 解决：

async function fetchData() {
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();
  return data;
}

async/await 的高级用法

并行执行异步操作

使用 Promise.all 可以并行执行多个异步操作：

async function fetchAllData() {
  const [user, posts, comments] = await Promise.all([
    fetchUser(),
    fetchPosts(),
    fetchComments(),
  ]);

  return { user, posts, comments };
}

错误处理

使用 try/catch 可以捕获异步操作中的错误：

async function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data");
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    return await response.json();
  } catch (error) {
    console.error("There was a problem with the fetch operation:", error);
    throw error; // 可以选择重新抛出错误
  }
}

循环中的异步操作

在循环中使用 async/await 需要注意，直接在 for 循环中使用 await 会导致串行执行：

async function processItems(items) {
  for (const item of items) {
    await processItem(item);
  }
}

如果需要并行执行，可以使用 Promise.all：

async function processItemsParallel(items) {
  await Promise.all(items.map((item) => processItem(item)));
}

async/await 的优势

代码可读性高

async/await 使异步代码看起来像同步代码，更易于阅读和理解。

错误处理简单

使用 try/catch 统一处理同步和异步错误，避免了 Promise 中 then/catch 的嵌套。

调试方便

async/await 代码可以像同步代码一样设置断点进行调试。

更好的错误栈

async/await 提供了更清晰的错误栈信息，便于定位问题。

注意事项

  1. await 只能在 async 函数中使用：尝试在非 async 函数中使用 await 会导致语法错误。

  2. async 函数总是返回 Promise：即使函数内部返回的是普通值，async 函数也会将其包装成 Promise 对象。

  3. 避免阻塞主线程：在浏览器中，长时间运行的 async 函数可能会阻塞主线程，影响用户体验。

  4. 注意错误传播：未处理的 async 函数错误可能会导致应用崩溃，应该始终使用 try/catch 或.catch()处理错误。

总结

async/await 是 JavaScript 异步编程的重大进步，它简化了异步代码的编写和理解。通过结合 async 函数和 await 关键字，开发者可以编写更加清晰、可读和可维护的异步代码。

随着 JavaScript 的发展，async/await 已经成为现代前端开发中处理异步操作的首选方式。掌握 async/await 语法，对于提高前端开发效率和代码质量至关重要。

标签: