Async Await调用API时的错误处理：如何检测API返回的错误响应

fetch API 默认仅在网络链路层面发生错误时（如断网、请求跨域被拦截、DNS解析失败）才会抛出异步异常，HTTP 4xx/5xx类的业务错误、参数错误、权限错误等状态码不会主动触发异常，需要手动校验响应对象属性判断错误。

以下是添加完整错误处理的修正代码：

// 注意：原代码中Content-Type配置位置错误，已修正到headers字段中
const url = "https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=API KEY";
const payload = {
  email: email,
  password: password,
  returnSecureToken: true
};

const options = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(payload)
};

try {
  const res = await fetch(url, options);
  // 校验HTTP响应状态
  if (!res.ok) {
    // 可根据实际需要提取服务端返回的错误详情
    const errorInfo = await res.json();
    throw new Error(`请求失败，状态码：${res.status}，错误信息：${errorInfo.error?.message || '未知错误'}`);
  }
  const result = await res.json();
  response.send(JSON.stringify(result));
} catch (err) {
  // 统一处理所有错误：网络错误、HTTP状态错误、JSON解析错误等
  console.error('请求发生错误：', err.message);
  // 按需返回错误响应给前端
  response.status(500).send(JSON.stringify({
    success: false,
    error: err.message
  }));
}

错误处理逻辑说明 #

• try...catch 块捕获所有异步/同步异常，包含网络层错误、JSON解析失败、手动抛出的HTTP状态错误
• res.ok 是原生响应对象的内置属性，响应状态码在200-299区间时返回true，其他状态返回false
• 可根据业务需求扩展判断逻辑，比如针对特定状态码（如401无权限、403被禁止）做单独的业务处理
• 原代码中contentType配置位置错误，node-fetch 需要将请求头放在headers字段下才能生效，否则服务端可能无法正确识别请求体格式

内容的提问来源于stack exchange，提问作者King Of Missionary