HTML中async和await简化Fetch异步请求代码的写法教程-html教程-PHP中文网

async/await不能直接简化fetch本身，但能彻底改变异步请求逻辑的组织方式；需显式调用.json()等方法、检查response.ok、用try/catch捕获错误，并推荐封装为健壮的api函数。

html中async和await简化fetch异步请求代码的写法教程

async/await 不能直接简化 fetch 本身，但能彻底改变你组织异步请求逻辑的方式——它让错误处理、链式依赖和条件分支变得可读、可控、可调试。

为什么不能直接用 `await fetch()` 就完事？

fetch 返回的是 Promise，await 确实能等它 resolve，但关键点在于：fetch 只有网络失败（如断网、DNS 错误）才会 reject；HTTP 状态码 404、500 等依然会 resolve，且返回一个 Response 对象，不是你要的 JSON 数据。

常见错误现象：
- 写了 await fetch('/api/user') 却没调 .json()，结果拿到的是 Response 对象，控制台打印是 Response {…}，取 .data 报错
- 没检查 response.ok，后端返回 500 时代码仍往下执行，导致 .json() 解析空体或异常内容而 throw

实操建议：

每次 await fetch() 后必须显式调用 .json()、.text() 或 .blob()，且它们也返回 Promise，要再 await
务必检查 if (!response.ok) throw new Error(...)，否则 4xx/5xx 不会进入 catch
不要省略 try/catch —— await 的 Promise reject 会直接抛出，不捕获就崩

怎么写一个健壮的 `async` 请求函数？

封装成函数才能复用，也方便统一加 loading、错误日志、token 注入。重点不是“简写”，而是把重复判断收拢。

示例（带基础错误处理）：

async function apiGet(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
  }
  return response.json();
}

使用场景：

Html2md

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

下载

单个请求：直接 const data = await apiGet('/api/posts');
多个并行请求：const [a, b] = await Promise.all([apiGet('/a'), apiGet('/b')]);
串行依赖：const user = await apiGet('/user'); const posts = await apiGet(`/posts?uid=${user.id}`);

`async/await` 和 `.then()` 在错误传播上有什么实质区别？

区别在堆栈和可调试性。用 .then().catch() 时，错误堆栈里看不到原始调用位置；而 async/await 抛出的错误，堆栈指向 await 那一行，和同步代码一样直观。

容易踩的坑：

在 for 循环里直接 await 多个请求 → 实际是串行，性能差；想并行得用 Promise.all()
忘记给 async 函数加 try/catch，错误向上冒泡到未处理的 promise rejection，浏览器报 Uncaught (in promise)
await 后面跟了非 Promise（比如普通对象），不会报错但也不会“等待”，容易误以为异步生效了