什么是异步javascript_promise和async/await如何使用【教程】

12次阅读

promise 和 async/await 是同一异步机制的底层抽象与语法糖;Promise 是状态容器(pending/fulfilled/rejected),async 函数返回 Promise,await 暂停执行但不阻塞线程;错误处理、并发控制和未捕获 rejection 是关键难点。

什么是异步javascript_promise和async/await如何使用【教程】

Promise 和 async/await 不是“替代关系”,而是同一套异步机制的两种表达方式:Promise 是底层抽象,async/await 是它的语法糖。直接用 async/await 更简洁,但不理解 Promise 就容易在错误处理、并发控制或调试时掉坑里。

Promise 是什么,为什么不能直接 return 值

javaScript 主线程是单线程的,耗时操作(如网络请求、文件读取)不能阻塞执行。Promise 就是用来“承诺未来某个时刻给出结果”的对象——它不是值,而是一个状态容器:pending(进行中)、fulfilled(成功)、rejected(失败)。

常见错误:写 return fetch('/api/user').then(res => res.json()),以为返回的是 json 数据;实际返回的是一个 Promise 对象。调用方必须用 .then()await 才能拿到最终值。

关键点:

立即学习Java免费学习笔记(深入)”;

  • Promise 构造函数接收一个执行器函数,该函数立即执行,并传入 resolvereject 两个回调
  • Promise.resolve(value) 把普通值包装成已 fulfilled 的 Promise;Promise.reject(err) 同理
  • 链式调用中每个 .then() 返回的新 Promise,其状态由该回调的返回值决定(返回 Promise 则等待它;返回普通值则自动 resolve

async/await 怎么写,和 .then() 有什么区别

async 函数本质就是返回 Promise 的函数;await 只能在 async 函数内使用,它会让 JS 引擎暂停当前函数执行(不阻塞主线程),等右侧的 Promise settle 后继续。

对比写法:

function getUser() {   return fetch('/api/user')     .then(res => res.json())     .then(data => data.name); }  async function getUser() {   const res = await fetch('/api/user');   const data = await res.json();   return data.name; }

区别不只是写法更像同步代码——更重要的是错误捕获方式不同:

  • .then().catch() 容易漏掉中间环节的异常(比如 res.json() 抛错没被 catch)
  • await 配合 try/catch 能自然捕获任意一步的 rejection,包括语法错误、类型错误(只要发生在 await 表达式求值过程中)
  • 但注意:try/catch 捕不到 Promise 内部未处理的 rejection(比如忘记 await 一个 Promise 并让它跑飞)

并发请求怎么控制,Promise.all 和 Promise.allSettled 选哪个

多个请求不需要串行时,别写成 await a(); await b(); await c(); ——这会变慢三倍。用 Promise.all([a(), b(), c()]) 并发发起。

但要注意:Promise.all 是“全成功才成功”,任一 Promise reject,整个就立刻 reject,其余还在跑的请求不会取消(只是结果被丢弃)。如果想等所有都结束再统一处理(不管成败),用 Promise.allSettled

示例场景:

  • 表单提交 + 上传头像 + 记录日志 → 用 Promise.all,任一失败整个提交失败
  • 批量拉取用户资料(容忍个别失败)→ 用 Promise.allSettled,之后过滤出 status: 'fulfilled' 的结果
  • 需要超时控制?得手动封装Promise.race([fetch(...), timeout(5000)])

容易被忽略的陷阱:未处理的 rejection 和内存泄漏

node.js 环境下,未被 .catch()try/catch 捕获的 Promise rejection 会触发 unhandledrejection 事件,在新版 Node 中默认抛出未捕获异常,导致进程退出。浏览器里虽不崩溃,但会在控制台报 Uncaught (in promise)

典型漏捕场景:

  • 事件监听器里发起请求但没加 try/catch(如 button.addEventListener('click', async () => { await apiCall(); })
  • 定时器或轮询中反复创建 Promise,但某次失败后没清理后续调用(造成重复请求积)
  • Promise.all 时只在最外层 catch,但内部某个 Promise 的错误本应单独告警或降级

真正难调试的,往往是那些“看起来跑过去了”但实际被吞掉的错误——它们不会中断流程,却让数据不一致或 ui 卡在 loading 状态。

text=ZqhQzanResources