HTML中如何使用async和await简化异步代码-html教程-PHP中文网

async/await 必须在 async 函数内使用，不能直接用于顶层脚本或普通函数；await 仅解包 promise，不等待 dom 或事件；其微任务调度略晚于 promise.then()，且仍是语法糖，不改变异步本质。

html中如何使用async和await简化异步代码

async/await 不能直接用在 HTML 的 script 标签里“简化异步代码”——它必须写在函数作用域中，且该函数本身得是 async 的。 直接在顶层脚本里写 await fetch(...) 会报 SyntaxError: await is only valid in async functions。

async 函数必须显式声明，不能给普通函数临时加 await

很多人以为只要加个 await 就行，其实 await 只能在被 async 修饰的函数内部使用。HTML 中的内联脚本或外部 JS 文件都一样：

async function loadData() {
  const res = await fetch('/api/data');
  const data = await res.json();
  console.log(data);
}
loadData(); // 必须调用，否则什么都不会发生

以下写法全错：

await fetch(...)（顶层、无函数包裹）
function foo() { await fetch(...); }（没加 async）
const foo = () => await fetch(...)（箭头函数也得加 async： const foo = async () => await fetch(...)）

await 只能解包 Promise，不能用于 callback 或事件监听器

await 对非 Promise 值（比如普通对象、undefined、事件回调里的 this）无效，也不会自动“等待” DOM 加载完成或按钮点击。常见误解：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

写 await document.getElementById('btn') 不会等元素出现，只是立刻返回 null 或元素（同步行为）
btn.addEventListener('click', async () => { await apiCall(); }) 是合法的，但 await 只作用于这个回调内部，不影响事件注册时机
想等 DOM 就绪？还是用 document.addEventListener('DOMContentLoaded', ...) 或 async + defer 的 script 标签更可靠

async/await 和 Promise.then() 的执行顺序差异容易引发竞态

看起来等价的写法，实际微任务调度可能不同。例如：

async function f1() {
  await Promise.resolve();
  console.log('f1');
}
f1();
Promise.resolve().then(() => console.log('then')); 
// 输出：then → f1（因为 await 后续逻辑进入微任务队列，但比显式 .then 稍晚一点）

这在复杂交互中可能导致 UI 更新错序。关键点：