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 的执行,但其他同步代码继续正常执行。

相关推荐
ruanCat1 分钟前
使用 cloudflare worker 实现域名重定向
前端
华仔啊3 分钟前
关于移动端100vh的坑和终极解决方案,看这一篇就够了!
前端·css
Hashan6 分钟前
Webpack 核心双引擎:Loader 与 Plugin 详解
前端·webpack
前端端10 分钟前
claude code 学习记录
前端
一位搞嵌入式的 genius12 分钟前
ES6 核心特性详解:从变量声明到函数参数优化
前端·笔记·学习
JarvanMo14 分钟前
Flutter:纯函数与不可变模型
前端
玲小珑21 分钟前
LangChain.js 完全开发手册(六)Vector 向量化技术与语义搜索
前端·langchain·ai编程
晓得迷路了1 小时前
栗子前端技术周刊第 97 期 - Viteland:8 月回顾、Redux Toolkit 2.9、Nuxt 4.1...
前端·javascript·nuxt.js
前端双越老师1 小时前
前端开发 AI Agent 智能体,需要掌握哪些知识?
前端·node.js·agent
EndingCoder1 小时前
Electron 安全性最佳实践:防范常见漏洞
前端·javascript·electron·前端框架·node.js·桌面端