JavaScript Fetch API 中怎么结合 async 与 await 简化请求代码-js教程-PHP中文网

async/await 写 fetch 需两次 await：先 await fetch() 得 response，再 await response.json() 等解析数据；需手动检查 response.ok 处理 4xx/5xx 错误，不同响应类型选对应解析方法，post 请求需配置 headers 和 json.stringify(body)。

javascript fetch api 中怎么结合 async 与 await 简化请求代码

用 async 和 await 写 Fetch 请求，核心是把 fetch() 调用包在异步函数里，再用 await 等待响应和数据解析，避免嵌套 .then()，代码更线性、易读、易错处理。

基本写法：await 两次，一次等响应，一次等 JSON

fetch() 返回 Promise，但返回的不是数据本身，而是 Response 对象；response.json()（或 .text() 等）也返回 Promise。所以通常要 await 两次：

第一次 await fetch(url) 得到响应对象
第二次 await response.json() 解析出 JS 数据

示例：

Gradle 9.8.0

下载

async function getUser() {
  try {
    const response = await fetch('/api/user');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
    return data;
  } catch (err) {
    console.error('请求失败:', err);
  }
}

处理不同响应类型：json / text / blob

根据接口返回内容选择对应解析方法，都需 await：

await response.json() —— 适合 JSON 接口（最常见）
await response.text() —— 获取纯文本（如 HTML 片段、日志）
await response.blob() —— 下载文件或处理二进制（如图片、PDF）
await response.arrayBuffer() —— 需底层字节操作时用

发送带参数的 POST 请求

构造 fetch() 的第二个参数（options），设置 method、headers、body，注意 body 需是字符串（如 JSON.stringify()）：

async function login(username, password) {
  try {
    const response = await fetch('/api/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ username, password })
    });
    return await response.json();
  } catch (err) {
    throw err;
  }
}