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 如何处理异步操作,以及它们与同步代码的执行顺序:

javascript 复制代码
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') 会在异步操作完成后执行。

输出结果

plaintext 复制代码
Start
Inside asyncFunction
End
After await

结论

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

相关推荐
石金龙3 小时前
[译] Composition in CSS
前端·css
白水清风3 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix3 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278003 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端3 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧3 小时前
Promise 的使用
前端·javascript
NBtab3 小时前
Vite + Vue3项目版本更新检查与页面自动刷新方案
前端
天天扭码4 小时前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户458203153174 小时前
CSS特异性:如何精准控制样式而不失控?
前端·css
libraG4 小时前
Jenkins打包问题
前端·npm·jenkins