Fetch API 错误处理：你需要知道的一切

在现代 Web 开发中，Fetch API 已经成为获取和操作网络资源的标准方式。然而，网络请求总是伴随着各种可能的错误，了解如何正确处理这些错误对于开发者来说至关重要。本文将详细介绍 Fetch API 错误处理 的方法和最佳实践。

Fetch API 简介

Fetch API 提供了一个接口，用于在 Web 浏览器中获取资源（包括跨域请求）。它返回一个 Promise，这使得异步操作变得更加直观和易于管理。

常见的 Fetch API 错误

网络错误：当请求无法到达服务器时（如网络断开或服务器宕机），会抛出一个 TypeError。
HTTP 错误：服务器返回的 HTTP 状态码在 400-599 之间时，虽然请求成功到达服务器，但响应状态码表示错误。
超时错误：如果请求在指定时间内没有响应，可能会触发超时错误。
解析错误：当响应内容无法正确解析时（如 JSON 解析错误）。

错误处理策略

1. 捕获 Promise 错误

Fetch API 返回的 Promise 可以使用 .catch() 方法来捕获错误：

fetch('url')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

2. 检查响应状态

在 .then() 处理程序中检查 response.ok 属性来判断请求是否成功：

fetch('url')
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Request failed with status ' + response.status);
    }
  })
  .catch(error => console.error(error));

3. 使用 try...catch 块

在异步函数中，可以使用 try...catch 来处理错误：

async function fetchData() {
  try {
    const response = await fetch('url');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
  }
}

4. 超时处理

可以使用 AbortController 来设置请求超时：

const controller = new AbortController();
const signal = controller.signal;

setTimeout(() => controller.abort(), 5000);

fetch('url', { signal })
  .then(response => response.json())
  .catch(error => {
    if (error.name === 'AbortError') {
      console.error('Fetch aborted due to timeout');
    } else {
      console.error('Fetch error:', error);
    }
  });

应用场景

单页应用（SPA）：在 SPA 中，错误处理可以帮助用户在网络问题或服务器错误时提供友好的反馈。
数据驱动的网站：确保数据请求的可靠性，避免因错误而导致的数据不一致。
API 集成：在与第三方 API 交互时，错误处理可以帮助开发者更好地管理和响应 API 的异常情况。

最佳实践

统一错误处理：在应用中统一处理错误，避免重复代码。
用户友好的错误信息：提供清晰、易理解的错误信息给用户。
日志记录：记录错误以便后续分析和调试。
重试机制：对于某些类型的错误（如网络错误），可以考虑实现重试逻辑。

通过以上方法和实践，开发者可以有效地处理 Fetch API 中的各种错误，确保应用的健壮性和用户体验的流畅性。希望本文对你理解和应用 Fetch API 错误处理 有帮助。