illegalCreed

中文

English

中文

English

Appearance

参考 ​

基于现代 JavaScript（ES2025 · 核于 2026-06）

速查 ​

  • 执行次序口诀：同步全跑完 → 清空所有微任务 →（可能渲染）→ 取一个宏任务 → 再清空微任务……循环
  • 微任务：Promise.then/catch/finally、queueMicrotask、MutationObserver；宏任务：setTimeout/setInterval、I/O、UI 事件
  • Promise 三态：pending → fulfilled(值) / rejected(原因)，敲定后不可逆；then 返回新 Promise，错误冒泡到最近 catch
  • 组合器：all（全成 / 速败）、allSettled（收齐结局 / 不拒绝）、race（最快敲定）、any（最快成功 / 全败为 AggregateError）
  • async/await：async 必返 Promise；await 暂停到敲定、拒绝即抛；独立任务并行用 await Promise.all([...])，别串行
  • 取消：AbortController + signal；AbortSignal.timeout(ms)（TimeoutError）；AbortSignal.any([...])
  • 避坑：then 里发起的 Promise 必 return；fetch 对 4xx/5xx 不拒绝要查 res.ok；forEach(async) 不等待
  • 新特性版本：顶层 await（ES2022 模块）、Promise.any/allSettled（ES2021/ES2020）、Promise.withResolvers（ES2024）

事件循环执行次序 ​

js
console.log("1"); // 同步
setTimeout(() => console.log("4"), 0); // 宏任务
Promise.resolve().then(() => console.log("3")); // 微任务
console.log("2"); // 同步
// 输出：1 → 2 → 3 → 4

每轮：取一个宏任务执行 → 清空整个微任务队列（含其间新增的微任务）→ 可能渲染 → 下一个宏任务。渲染只在宏任务之间，绝不在微任务之间。

Promise 实例方法 ​

方法签名返回说明
thenthen(onF?, onR?)新 Promise注册兑现 / 拒绝回调；回调恒异步（微任务）
catchcatch(onR)新 Promisethen(null, onR) 的简写
finallyfinally(onFinally)新 Promise无论成败都执行，不接收值、不改结果

Promise 静态方法 ​

方法兑现条件拒绝条件结果
Promise.all(it)全部兑现任一拒绝（fail-fast）有序值数组
Promise.allSettled(it)全部敲定永不拒绝{status, value/reason}[]
Promise.race(it)首个敲定是兑现首个敲定是拒绝单个值
Promise.any(it)首个兑现全部拒绝单个值 / AggregateError
Promise.resolve(v)——立即兑现（或同化 thenable）
Promise.reject(e)——立即拒绝
Promise.withResolvers()——{ promise, resolve, reject }（ES2024）

async / await 速记 ​

js
async function load() {
  try {
    // 串行（有依赖时）：
    const user = await getUser();
    const orders = await getOrders(user.id);

    // 并行（相互独立时）：
    const [a, b] = await Promise.all([fetchA(), fetchB()]);

    return { user, orders, a, b };
  } catch (err) {
    handle(err); // 捕获任意一步的拒绝
  } finally {
    cleanup(); // 必做的清理
  }
}
  • async 函数 return v → 兑现为 v；throw e → 拒绝为 e；
  • 循环并行：await Promise.all(arr.map(fn))；循环串行：for...of 内 await；
  • 顶层 await 仅限 ES 模块，会阻塞依赖它的模块图。

取消与超时速记 ​

js
// 手动取消
const c = new AbortController();
fetch(url, { signal: c.signal });
c.abort(); // → 请求拒绝为 AbortError

// 声明式超时（Baseline 2024）
fetch(url, { signal: AbortSignal.timeout(5000) }); // → 超时拒绝为 TimeoutError

// 合并取消源：超时 或 手动
const signal = AbortSignal.any([c.signal, AbortSignal.timeout(10000)]);
成员含义
controller.abort(reason?)触发中止
signal.aborted / signal.reason是否已中止 / 中止原因
signal.throwIfAborted()已中止则抛 signal.reason
AbortSignal.timeout(ms)ms 后自动中止（TimeoutError）
AbortSignal.any([...])任一中止则整体中止

常见陷阱清单 ​

陷阱后果正解
then 里漏写 return链不等内部 Promise，拿到 undefined始终 return 内部 Promise（或用 await）
同步 try/catch 包异步回调抓不到错误用 Promise.catch 或 async + try/catch
fetch 不检查 res.ok404/500 被当成功if (!res.ok) throw …
逐个 await 独立任务串行，平白变慢await Promise.all([...])
arr.forEach(async …)不会等待，时序错乱for...of（串行）/ Promise.all(map)（并行）
用 Promise.race 做超时底层请求未真正取消AbortSignal.timeout
快速连续请求旧响应覆盖新响应（竞态）取消上一个 / 比对最新请求标记

现代特性版本与 Baseline（2026-06 核） ​

特性引入状态
Promise / then/catch/finallyES2015 / finally ES2018✅ Baseline 广泛可用
async / awaitES2017✅ Baseline 广泛可用
Promise.allSettledES2020✅ Baseline 广泛可用
Promise.any / AggregateErrorES2021✅ Baseline 广泛可用
顶层 await（ES 模块）ES2022✅ Baseline 广泛可用
AbortController / AbortSignalWHATWG（非 ES）✅ Baseline 广泛可用
AbortSignal.timeout / AbortSignal.anyWHATWG🟡 Baseline 新近可用（2024）
Promise.withResolversES2024🟡 Baseline 新近可用（2024，老环境需 polyfill）
scheduler.postTask / scheduler.yieldWHATWG（调度）🟠 渐进增强，注意降级

权威链接 ​

标准 / 规范

指南 / 课程

兼容性 / 调试

相关页 ​