TypeScript 中fetch请求的错误处理

2025年8月9日

在 TypeScript 中，使用 fetch 进行异步请求后，你需要检查响应状态码和内容，然后根据情况处理错误或正常数据。以下是一个完整的示例：

async function fetchData(url: string): Promise<any> {
  try {
    const response = await fetch(url);
    
    // 首先检查HTTP状态码
    if (!response.ok) {
      // 尝试解析错误消息（假设返回的是JSON格式的错误信息）
      let errorData;
      try {
        errorData = await response.json();
      } catch (e) {
        // 如果无法解析为JSON，则使用状态文本
        throw new Error(`HTTP error! status: ${response.status}, message: ${response.statusText}`);
      }
      
      // 抛出包含服务器错误信息的错误
      throw new Error(errorData.message || `Request failed with status ${response.status}`);
    }
    
    // 如果状态码正常，解析返回的数据
    const data = await response.json();
    return data;
    
  } catch (error) {
    // 捕获网络错误或其他异常
    console.error('Fetch error:', error);
    throw error; // 可以选择重新抛出或处理错误
  }
}

// 使用示例
(async () => {
  try {
    const result = await fetchData('https://api.example.com/data');
    console.log('Success:', result);
    // 在这里处理正常数据
  } catch (error) {
    console.error('Error:', error.message);
    // 在这里处理错误
  }
})();

关键点说明：

检查响应状态：response.ok 检查状态码是否在 200-299 范围内
错误处理：
- 首先检查HTTP状态码
- 尝试解析错误响应体（假设是JSON格式）
- 如果解析失败，回退到状态文本
成功响应：
- 解析JSON格式的响应体
异常捕获：
- 捕获网络错误或其他异常

更严格的类型版本：

如果你想使用更严格的类型，可以这样写：

interface ApiResponse<T> {
  data?: T;
  error?: {
    code: number;
    message: string;
  };
}

async function fetchData<T>(url: string): Promise<T> {
  // ... 同上，但返回类型为 Promise<T>
}

这样你可以获得更好的类型安全性和IDE支持。