面试官：你知道JavaScript 中 Promise 和 Async/Await 的区别么？

Promise

Promise 是一个最终导致异步操作完成或失败的对象。Promise 可以有三种状态:pending、fulfilled 或 rejected。当异步操作完成时,Promise 要么通过一个值 fulfill,要么通过一个错误 reject。

// 使用 Promise
function promiseFunction() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Resolved"); 
    }, 2000);
  })
}

console.log("开始");
promiseFunction()
  .then((result) => {
    console.log(result);
    console.log("结束");
  }) 
  .catch((error) => {
    console.log(error)
  });

输出:
开始
Resolved
结束

Async/Await

Async/await 是基于 Promise 实现的语法糖。它提供了一种更简洁的方式来编写异步代码,使其更易于阅读和编写。使用 async/await 承诺,您可以编写看起来类似同步代码的异步代码,而它在后台使用 Promise。在 async/await 中,async 关键字用于声明异步函数。await 关键字用于在继续执行函数之前等待 Promise 解析。await 关键字只能在 async 函数中使用。

// 使用 Async/Await 
async function asyncFunction() {
  try {
    console.log("开始");
    const promise = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("Resolved");
      }, 2000);
    });
    
    const result = await promise;
    console.log(result);
    console.log("结束");
  } catch (error) {
    console.error(error);
  }
}

asyncFunction();

输出:
开始  
Resolved
结束

区别

Promise 和 async/await 的唯一区别在于执行上下文。

当您创建一个 Promise 并启动一个异步操作时,创建 Promise 后的代码将继续同步执行。当一个 Promise 被解析或拒绝时,附加的回调函数被添加到微任务队列中。微任务队列在当前任务完成后但在从任务队列中处理下一个任务之前被处理。这意味着 Promise 创建后的任何代码都将在附加到 Promise 的回调函数执行之前执行。

另一方面,当使用 async/await 时,await 关键字会导致 JavaScript 引擎暂停 async 函数的执行,直到 Promise 被解析或拒绝。当 async 函数正在等待 Promise 解析时,它不会阻塞调用栈,所以任何其他同步代码都可以执行。一旦 Promise 被解析,async 函数会继续执行并返回 Promise 的结果。如果被拒绝,会抛出一个错误值。