JavaScript中async/await与同步JavaScript的核心区别是什么？

很多人会混淆async/await的等待和同步代码的等待，二者本质完全不同：

• 同步代码的等待是阻塞式等待：会占满整个JS主线程，等待过程中浏览器无法响应用户点击、滚动等任何交互，其他JS任务也必须排队等待当前同步任务执行完成才能运行。
• async/await的等待是非阻塞式挂起：执行到await时，当前async函数会暂时退出，主线程可以正常处理其他任务、响应用户操作，等到await后的异步任务（Promise）返回结果后，再回到async函数中继续执行后面的代码。

async/await本质是 Promise 的语法糖，核心作用就是在保留JS异步非阻塞特性的前提下，让异步代码的写法和可读性接近同步代码，避免了传统回调写法的回调地狱问题。

下面举两个对比示例： #

同步JavaScript代码 #

function getStudentList() {
  return ['Adam', 'Ben'];
}

function findStudent(who) {
  const list = getStudentList();

  const found = list.some(student => student === who);

  console.log(found); // 输出 true
}

findStudent('Adam');

这段代码执行时全程阻塞主线程，getStudentList直接返回结果，后续逻辑同步执行，执行完成前主线程无法处理其他任务。 #

使用async/await的异步JavaScript代码 #

function getStudentList() {
  return new Promise(resolve => {
    setTimeout(() => resolve(['Adam', 'Ben']), 1000);
  });
}

async function findStudent(who) {
  const list = await getStudentList();

  const found = list.some(student => student === who);
  console.log(found); // 1秒后输出 true
}

findStudent('Adam');

这段代码执行到await getStudentList()时，findStudent函数会暂停，但接下来的1秒等待时间里，主线程完全空闲，可以正常处理其他操作，不会出现页面卡顿的情况。

看起来const list = getStudentList();和const list = await getStudentList();写法和执行顺序类似，但底层的运行逻辑和对主线程的影响完全不同。

内容的提问来源于stack exchange，提问作者Aslam Jiffry