优雅地处理 Fetch 请求中的 404 错误：最佳实践与进阶技巧

2025/1/1 09:47:31 10 0 0 0

优雅地处理 Fetch 请求中的 404 错误：最佳实践与进阶技巧

在日常的前端开发中，我们经常使用 fetch API 来进行网络请求。然而，网络请求并非总是成功的，404 Not Found 错误就是我们经常遇到的一个问题。处理 404 错误不仅关乎程序的稳定性，更直接影响用户体验。本文将深入探讨如何优雅地处理 fetch 请求中的 404 错误，并提供一些最佳实践和进阶技巧。

基本的错误处理

最基本的错误处理方法是使用 try...catch 块来捕获 fetch 请求抛出的错误。然而，这只能捕获网络错误，例如连接超时或 DNS 解析失败。对于 404 这样的 HTTP 状态码错误，fetch 本身并不会抛出错误，而是返回一个 Response 对象，其状态码为 404。

fetch('/api/users/123')
  .then(response => {
    if (!response.ok) {
      // 处理非 2xx 状态码的错误，包括 404
      if (response.status === 404) {
        console.error('资源未找到!');
        // 展示自定义错误信息给用户
        return Promise.reject('资源未找到!');
      } else {
        // 处理其他非 2xx 状态码
        console.error(`HTTP error! status: ${response.status}`);
        return Promise.reject(`HTTP error! status: ${response.status}`);
      }
    }
    return response.json();
  })
  .then(data => {
    // 处理成功的数据
    console.log('数据:', data);
  })
  .catch(error => {
    // 处理错误
    console.error('请求失败:', error);
    // 展示给用户友好的错误信息
  });

这段代码检查 response.ok 属性，该属性为真表示状态码在 200-299 之间。如果不是，则表示发生了错误，我们根据状态码进行不同的处理，例如，如果是 404，则打印错误信息并拒绝 Promise。

进阶技巧：自定义错误处理函数

为了提高代码的可读性和可维护性，我们可以创建一个自定义的错误处理函数：

function handleFetchError(response) {
  if (!response.ok) {
    if (response.status === 404) {
      return Promise.reject(new Error('资源未找到!'));
    } else {
      return Promise.reject(new Error(`HTTP error! status: ${response.status}`));
    }
  }
  return response.json();
}

fetch('/api/users/123')
  .then(handleFetchError)
  .then(data => {
    // 处理成功的数据
  })
  .catch(error => {
    // 处理错误
    console.error('请求失败:', error);
    // 展示给用户友好的错误信息, 例如：显示一个友好的错误提示页面
    // 根据 error.message 显示不同的错误信息
  });

这样，我们可以将错误处理逻辑封装到一个函数中，使代码更加清晰。

更高级的处理：使用中间件

在大型项目中，我们可能需要对所有 fetch 请求都进行统一的错误处理。这时，可以使用中间件模式。中间件可以拦截所有请求和响应，并进行相应的处理。

例如，我们可以使用一个自定义的 fetch 函数来包装原生的 fetch 函数，并在其中添加错误处理逻辑：

const myFetch = async (url, options) => {
  try {
    const response = await fetch(url, options);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    // 全局错误处理，例如记录日志，显示错误页面等
    console.error('Fetch error:', error);
    //  根据错误类型展示不同的用户友好提示
    if (error.message.includes('404')) {
        // 展示 404 页面或信息
    } else {
        // 展示通用错误信息或页面
    }
    throw error; // 重新抛出错误，允许上层组件继续处理
  }
};

// 使用 myFetch 代替原生 fetch
myFetch('/api/users/123')
  .then(data => {/* ... */})
  .catch(error => {/* ... */});

这个例子展示了如何使用一个自定义的 fetch 函数来处理所有的错误。这个函数会尝试解析 JSON 响应，如果发生错误，则会抛出异常，并进行全局错误处理。

总而言之，优雅地处理 fetch 请求中的 404 错误需要结合多种技术和策略。从基本的错误检查到自定义函数和中间件，我们可以根据项目规模和复杂度选择合适的方案，从而创造更好的用户体验。记住，友好的用户反馈机制是处理错误的关键。不要让用户面对冰冷的错误代码，而是提供清晰、易懂的提示信息，帮助他们解决问题。

前端工程师老王 Fetch API JavaScript 错误处理 HTTP 状态码 404

优雅地处理 Fetch 请求中的 404 错误：最佳实践与进阶技巧