async/await 处理异步操作详解

在 JavaScript 中，async/await 处理异步操作不会阻塞同步进程。它们的设计目的是使异步代码看起来像同步代码，从而提高代码的可读性和可维护性。async 函数返回一个 Promise 对象，而 await 关键字用于暂停 async 函数的执行，直到 Promise 解决（resolve）或拒绝（reject）。

详细解释

1. async 函数：

   • 使用 async 关键字定义的函数会自动返回一个 Promise 对象。
   • 函数内部可以使用 await 关键字来等待异步操作完成。

2. await 关键字：

   • await 只能在 async 函数中使用。
   • 它会暂停 async 函数的执行，直到等待的 Promise 解决或拒绝。
   • 这种暂停是非阻塞的，它不会阻塞 JavaScript 的事件循环或其他同步代码的执行。

示例代码

下面是一个示例，展示了 async/await 如何处理异步操作，以及它们与同步代码的执行顺序：

console.log('Start'); // 同步代码

async function asyncFunction() {
  console.log('Inside asyncFunction'); // 同步部分
  await new Promise(resolve => setTimeout(resolve, 1000)); // 异步操作
  console.log('After await'); // 异步部分
}

asyncFunction(); // 调用 async 函数

console.log('End'); // 同步代码

解释

1. 同步任务：

   • console.log('Start') 和 console.log('End') 是同步任务，会按顺序执行。

2. 异步任务：

   • 调用 asyncFunction() 会立即返回一个 Promise 对象，并执行 asyncFunction 内部的同步代码 console.log('Inside asyncFunction')。
   • await new Promise(resolve => setTimeout(resolve, 1000)) 是异步操作，会暂停 asyncFunction 的执行，直到 Promise 解决。
   • console.log('After await') 会在异步操作完成后执行。

输出结果

Start
Inside asyncFunction
End
After await

结论

从输出结果可以看出，async/await 处理异步操作不会阻塞同步代码的执行。同步代码 console.log('End') 在 asyncFunction 内部的异步操作完成前已经执行完毕。await 关键字暂停了 asyncFunction 的执行，但其他同步代码继续正常执行。