Promise 和 Async/Await 到底有啥区别？

在 JavaScript 中，promise 和 async/await 是处理异步操作的两种不同方式。但它们是密切相关的。

promise 是最终导致异步操作完成或失败的对象。承诺可以处于以下三种状态之一：挂起、已履行或拒绝。异步操作完成后，承诺要么以值实现，要么因错误而被拒绝。

// Using Promises
function promiseFunction() {
  return  new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Resolved");
  }, 2000);
})
}
console.log("Start");
promiseFunction()
.then((result) => {
  console.log(result);
  console.log("End");
})
.catch((error)=>{
console.log(error)
});
Output:
Start
Resolved
End

Async/await 是 promise 之上的语法糖。它提供了一种更简洁的异步代码编写方法，使其更易于读取和编写。使用 Async/Await，您可以编写类似于同步代码的异步代码，并且它在后台使用承诺。

在 async/await 中， async 关键字用于声明异步函数。关键字 await 用于等待承诺解析，然后再继续执行函数。关键字 await 只能在 async 函数中使用。

// Using Async/Await
async function asyncFunction() {
  try {
    console.log("Start");
    const promise = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("Resolved");
      }, 2000);
    });
    const result = await promise;
    console.log(result);
    console.log("End");
  } catch (error) {
    console.error(error);
  }
}
asyncFunction()
output:
Start
Resolved
End

唯一的区别是 promise 和 async/await 之间的执行上下文。

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

另一方面，对于 Async/Await， await 关键字会导致 JavaScript 引擎暂停 async 函数的执行，直到 Promise 被解析或拒绝。当 async 函数等待 Promise 解析时，它不会阻止调用堆栈，并且可以执行任何其他同步代码。解析承诺后， async 函数的执行将恢复，并返回承诺的结果。如果被拒绝，则会引发错误值。

更多内容请点👉：开发者网站讨论社区