前端面试中JavaScriptasync/await相关问题有哪些？

JavaScript async/await 相关问题全解析

---

在前端开发岗位的面试中，JavaScript 的异步编程一直是核心考察点之一，而 async/await 作为现代 JavaScript 中处理异步操作的语法糖，因其简洁性和易读性，被广泛应用，也自然成为面试中的高频问题，本文将汇总前端面试中关于 async/await 的常见问题，帮助你系统准备,提升面试通过率。

基础理解：async/await 是什么？

面试官可能会从最基础的概念入手，考察你对 async/await 的理解。async 函数用于声明一个异步函数，它会自动将普通函数转换为返回 Promise 的函数，而 await 关键字只能在 async 函数内部使用，用于等待一个 Promise 对象的解决（resolve），并返回其解决值，或者拒绝（reject）时抛出异常，这种语法结构使得异步代码的书写方式更接近同步代码,提高了代码的可读性和维护性。

async 函数返回什么？

这是一个非常基础但关键的点。async 函数总是返回一个 Promise 对象，如果函数中显式地返回了一个值，那么这个值会被自动包装成一个已解决的 Promise；如果函数抛出异常，则会返回一个被拒绝的 Promise,理解这一点对于错误处理尤为重要。

如何处理 async/await 中的错误？

错误处理是异步编程中不可避免的话题，在使用 async/await 时,通常有两种方式处理错误：

• try...catch 语句：将可能抛出异常的 await 表达式放在 try 块中，并在 catch 块中捕获并处理异常。
• .catch() 方法：由于 async 函数返回 Promise，你也可以在其后链式调用 .catch() 方法来捕获并处理错误。

并行执行多个异步操作

面试中还可能考察你如何高效地并行执行多个异步操作，虽然 await 会按顺序等待每个异步操作完成，但你可以利用 Promise.all() 方法来同时启动多个异步操作,并等待它们全部完成。

async function fetchData() {
  const [res1, res2] = await Promise.all([fetch(url1), fetch(url2)]);
  // 处理结果
}

async/await 与 Promise 的区别和联系

理解 async/await 与底层 Promise 的关系也是面试中的常见问题，简而言之，async/await 是建立在 Promise 之上的语法糖，它简化了基于回调的异步编程模式，使得代码更加直观，但本质上，每一个 await 表达式背后都是一个 Promise 的等待和解决过程。

如何避免阻塞主线程？

虽然 async/await 让异步代码看起来像同步代码，但过度使用或不当使用仍可能导致主线程阻塞，为了避免这种情况，应当合理设计异步流程，确保长时间运行的任务不会阻塞关键路径上的代码执行，利用 Web Workers 处理计算密集型任务也是有效策略之一。

掌握 async/await 不仅是现代前端开发者的必备技能，也是通过前端面试的重要一环，通过上述问题的梳理，我们不仅回顾了 async/await 的基本概念和用法，还探讨了其在错误处理、并行执行、与 Promise 的关系以及性能优化等方面的应用，希望这些内容能帮助你在面试中更加自信地回答相关问题,展现你的技术实力。