使用 Fetch API 时获取了 404 错误的解决方案

最新推荐文章于 2024-12-19 00:42:12 发布
最新推荐文章于 2024-12-19 00:42:12 发布
阅读量1.6w 收藏 22
点赞数 24
分类专栏： 前端小常识 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/JHXL_/article/details/143584168
版权

使用 Fetch API 时获取了 404 错误的解决方案

文章目录

1. 引言

在现代Web开发中，Fetch API 是用于执行网络请求的主要工具之一。它提供了一种基于Promise的简洁语法，使得异步操作更加直观和易于管理。然而，在实际使用中，开发者常常会遇到HTTP状态码错误，如404错误，即“未找到”错误。这种错误通常表示请求的资源在服务器上不存在或路径错误。理解如何正确处理404错误，对于构建健壮和用户友好的应用至关重要。

本文将详细探讨在使用Fetch API时获取404错误的原因、如何检测和处理这些错误，以及最佳实践，帮助开发者有效地应对和解决此类问题。

2. 理解HTTP 404错误

2.1 什么是404错误？

404错误，全称HTTP 404 Not Found，是HTTP协议中常见的状态码之一。它表示客户端能够与服务器通信，但服务器无法找到客户端请求的资源。这通常发生在以下几种情况下：

  • 请求的URL路径错误。
  • 资源已被删除或移动。
  • 服务器配置错误，导致资源不可访问。

2.2 404错误的影响

当客户端收到404错误时，通常意味着以下几件事：

  • 用户体验受损：用户无法访问他们期望的内容，可能导致沮丧或放弃使用应用。
  • SEO影响：搜索引擎将404错误页面视为负面信号，可能影响网站的搜索排名。
  • 功能中断：如果404错误出现在关键功能点，可能导致应用功能无法正常运行。

3. Fetch API如何处理HTTP错误

3.1 Fetch API的基本工作原理

Fetch API用于执行网络请求，返回一个Promise，该Promise在请求成功或失败时解决或拒绝。关键点在于：

  • 网络错误：例如，无法连接到服务器，Fetch Promise会被拒绝（rejected）。
  • HTTP错误状态码：例如，404、500等，Fetch Promise仍然会被解决（fulfilled），但响应对象的ok属性为false，并且status属性包含具体的状态码。

3.2 Fetch API与HTTP状态码

当使用Fetch API进行请求时，即使服务器返回404错误，Fetch Promise也会被解决，而不会被拒绝。这意味着你需要手动检查响应对象的状态码，以确定请求是否成功。

示例：

fetch('https://api.example.com/nonexistent-endpoint')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP 错误! 状态: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('数据:', data);
  })
  .catch(error => {
    console.error('发生错误:', error);
  });

在上面的示例中，即使请求返回404错误，catch块仍会捕获错误，因为在then块中手动抛出了一个错误。

4. 如何检测和处理404错误

4.1 使用响应对象的ok和status属性

响应对象包含多个属性，其中ok是一个布尔值，表示响应状态码是否在200-299范围内。status则包含具体的HTTP状态码。

示例：

fetch('https://api.example.com/data')
  .then(response => {
    if (response.ok) {
      return response.json();
    } else if (response.status === 404) {
      throw new Error('资源未找到 (404)');
    } else {
      throw new Error(`服务器错误! 状态: ${response.status}`);
    }
  })
  .then(data => {
    console.log('数据:', data);
  })
  .catch(error => {
    console.error('发生错误:', error.message);
    // 根据错误类型执行相应的操作，如显示错误消息给用户
  });

4.2 使用async/await语法

使用async/await可以使异步代码更具可读性，并且更易于错误处理。

示例：

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (response.ok) {
      const data = await response.json();
      console.log('数据:', data);
      return data;
    } else if (response.status === 404) {
      console.error('资源未找到 (404)');
      // 这里可以处理404错误，如显示特定的消息或重定向
    } else {
      throw new Error(`服务器错误! 状态: ${response.status}`);
    }
  } catch (error) {
    console.error('发生错误:', error.message);
    // 处理网络错误或其他意外错误
  }
}

fetchData('https://api.example.com/nonexistent-endpoint');

4.3 处理API返回的错误信息

有些API在返回错误时，会在响应体中提供详细的错误信息。你可以解析这些信息，提供更具体的错误反馈。

示例：

async function fetchData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json(); // 假设API在错误时也返回JSON
    if (response.ok) {
      console.log('数据:', data);
      return data;
    } else {
      // 假设错误信息在data.message中
      throw new Error(`错误: ${data.message}`);
    }
  } catch (error) {
    console.error('发生错误:', error.message);
    // 根据错误类型执行相应的操作
  }
}

fetchData('https://api.example.com/nonexistent-endpoint');

5. 最佳实践

5.1 始终检查响应状态码

无论是使用then链还是async/await，始终检查响应的ok属性和status码，确保请求成功后再处理数据。

示例：

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP 错误! 状态: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    // 处理数据
  })
  .catch(error => {
    // 处理错误
  });

5.2 提供用户友好的错误反馈

当发生404错误时，向用户提供明确的反馈，告知他们所请求的内容未找到，并可能提供返回主页或搜索的选项。

示例：

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (response.ok) {
      const data = await response.json();
      return data;
    } else if (response.status === 404) {
      displayErrorMessage('您请求的页面未找到。');
    } else {
      throw new Error(`服务器错误! 状态: ${response.status}`);
    }
  } catch (error) {
    displayErrorMessage('发生了一个错误，请稍后再试。');
    console.error('发生错误:', error);
  }
}

function displayErrorMessage(message) {
  const errorDiv = document.getElementById('error');
  if (errorDiv) {
    errorDiv.textContent = message;
    errorDiv.style.display = 'block';
  }
}

5.3 使用重试机制

对于某些临时性的问题，如网络波动，可以实现自动重试机制，尝试再次发起请求。

示例：

async function fetchWithRetry(url, options = {}, retries = 3, backoff = 300) {
  try {
    const response = await fetch(url, options);
    if (response.ok) {
      return await response.json();
    } else if (response.status === 404) {
      throw new Error('资源未找到 (404)');
    } else {
      throw new Error(`服务器错误! 状态: ${response.status}`);
    }
  } catch (error) {
    if (retries > 0 && error.message !== '资源未找到 (404)') {
      console.warn(`请求失败，正在重试... 剩余次数: ${retries}`);
      await new Promise(resolve => setTimeout(resolve, backoff));
      return fetchWithRetry(url, options, retries - 1, backoff * 2); // 指数退避
    } else {
      throw error;
    }
  }
}

fetchWithRetry('https://api.example.com/data')
  .then(data => {
    console.log('数据:', data);
  })
  .catch(error => {
    console.error('请求最终失败:', error.message);
  });

5.4 使用TypeScript进行类型检查

使用TypeScript可以在编译阶段捕获潜在的错误，减少运行时错误的发生。

示例：

interface User {
  name: string;
  age: number;
}

async function fetchUser(url: string): Promise<User> {
  const response = await fetch(url);
  if (!response.ok) {
    if (response.status === 404) {
      throw new Error('用户未找到 (404)');
    }
    throw new Error(`服务器错误! 状态: ${response.status}`);
  }
  const data: User = await response.json();
  return data;
}

fetchUser('https://api.example.com/users/1')
  .then(user => {
    console.log('用户:', user.name);
  })
  .catch(error => {
    console.error('发生错误:', error.message);
  });

5.5 记录和监控错误

在生产环境中，使用错误监控工具（如Sentry、LogRocket）记录和监控错误，帮助快速定位和修复问题。

示例：

import * as Sentry from '@sentry/browser';

Sentry.init({ dsn: 'YOUR_SENTRY_DSN' });

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP 错误! 状态: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    Sentry.captureException(error);
    console.error('发生错误:', error.message);
    throw error;
  }
}

fetchData('https://api.example.com/data')
  .then(data => {
    // 处理数据
  })
  .catch(error => {
    // 处理错误
  });

6. 实战案例

6.1 简单的Fetch请求处理404错误

场景：

发起一个GET请求获取用户数据，如果用户不存在，服务器返回404错误。需要在前端捕获并处理这个错误。

代码示例：

async function getUser(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    if (response.ok) {
      const user = await response.json();
      console.log('用户数据:', user);
      return user;
    } else if (response.status === 404) {
      console.error('用户未找到 (404)');
      // 可以显示用户友好的错误消息或进行其他处理
    } else {
      throw new Error(`服务器错误! 状态: ${response.status}`);
    }
  } catch (error) {
    console.error('网络错误或其他问题:', error);
    // 可以显示全局错误消息或重试逻辑
  }
}

getUser(12345);

解释：

  • 响应检查：使用response.ok判断请求是否成功。
  • 特定状态码处理：单独处理404错误，提供特定的反馈。
  • 通用错误处理：处理其他HTTP错误和网络错误。

6.2 在React组件中处理404错误

场景：

在一个React组件中，发起一个Fetch请求获取文章内容。如果文章不存在（返回404），需要显示一个“文章未找到”的消息。

代码示例：

import React, { useEffect, useState } from 'react';

function Article({ articleId }) {
  const [article, setArticle] = useState(null);
  const [error, setError] = useState('');

  useEffect(() => {
    async function fetchArticle() {
      try {
        const response = await fetch(`https://api.example.com/articles/${articleId}`);
        if (response.ok) {
          const data = await response.json();
          setArticle(data);
        } else if (response.status === 404) {
          setError('抱歉，您请求的文章未找到。');
        } else {
          throw new Error(`服务器错误! 状态: ${response.status}`);
        }
      } catch (err) {
        setError('网络错误，请稍后再试。');
        console.error('发生错误:', err);
      }
    }

    fetchArticle();
  }, [articleId]);

  if (error) {
    return <div className="error">{error}</div>;
  }

  if (!article) {
    return <div>加载中...</div>;
  }

  return (
    <div className="article">
      <h1>{article.title}</h1>
      <p>{article.content}</p>
    </div>
  );
}

export default Article;

解释：

  • 状态管理：使用useState管理文章数据和错误信息。
  • 异步请求：在useEffect中发起Fetch请求。
  • 错误处理：根据响应状态码设置错误信息，提供用户友好的反馈。
  • 条件渲染：根据状态显示加载中、错误消息或文章内容。

6.3 重试机制应对偶发的404错误

场景：

某些情况下，服务器可能暂时无法找到资源（如由于缓存更新或部署延迟），可以实现重试机制，尝试再次请求。

代码示例：

async function fetchWithRetry(url, options = {}, retries = 3, delay = 1000) {
  try {
    const response = await fetch(url, options);
    if (response.ok) {
      return await response.json();
    } else if (response.status === 404) {
      if (retries > 0) {
        console.warn(`资源未找到 (404)，正在重试... 剩余次数: ${retries}`);
        await new Promise(res => setTimeout(res, delay));
        return fetchWithRetry(url, options, retries - 1, delay * 2); // 指数退避
      } else {
        throw new Error('资源未找到 (404)');
      }
    } else {
      throw new Error(`服务器错误! 状态: ${response.status}`);
    }
  } catch (error) {
    if (retries > 0 && error.message !== '资源未找到 (404)') {
      console.warn(`请求失败，正在重试... 剩余次数: ${retries}`);
      await new Promise(res => setTimeout(res, delay));
      return fetchWithRetry(url, options, retries - 1, delay * 2);
    } else {
      throw error;
    }
  }
}

fetchWithRetry('https://api.example.com/data')
  .then(data => {
    console.log('数据:', data);
  })
  .catch(error => {
    console.error('请求最终失败:', error.message);
  });

解释：

  • 递归重试：函数在遇到404错误时，根据剩余次数决定是否重试。
  • 指数退避：每次重试的延迟时间翻倍，避免过度频繁的请求。
  • 错误终止：在重试次数耗尽后，抛出错误以便调用方处理。

注意事项：

  • 合理的重试次数：避免无限制的重试，通常设置一个最大重试次数。
  • 延迟策略：结合指数退避策略，避免网络拥堵和服务器压力。
  • 特定错误处理：针对特定的错误状态码（如404）进行特殊处理，避免无意义的重试。

7. 总结

在使用Fetch API进行网络请求时，正确处理HTTP 404错误是确保应用稳定性和用户体验的关键。通过以下关键措施，开发者可以有效地检测和应对404错误：

  1. 检查响应状态码：始终检查响应对象的ok属性和status码，确保请求成功后再处理数据。
  2. 提供用户友好的反馈：在发生404错误时，向用户展示明确的错误信息，并提供可行的后续操作，如返回主页或重新搜索。
  3. 实现重试机制：对于偶发性的404错误，可以实施重试策略，增加请求成功的可能性。
  4. 使用async/await和try/catch：利用现代JavaScript特性，简化异步代码和错误处理逻辑。
  5. 采用TypeScript进行类型检查：通过静态类型检查，提前发现潜在的错误，减少运行时错误的发生。
  6. 记录和监控错误：在生产环境中，使用错误监控工具记录和分析错误，帮助快速定位和修复问题。
  7. 优化API设计：确保后端API在资源不存在时返回明确的错误信息，并提供有用的错误描述。
fetch中的post报404，找不到路径
u012650035的专栏
06-30 1759
只是在vue的学习过程中，用fetch简单的访问一下，本地文件夹 methods:{ asyncsubmitFn(){ try{ letform=this.$refs['form1']; letdataform=newFormData(form); letres=awaitfetch('./data/1.php',{ ...
什么是Fetch API？与传统的AJAX相比，有什么优势？
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-21 1426
Fetch API概览基本概念和作用与AJAX的比较使用Fetch API的示例示例一：发送GET请求示例二：发送POST请求示例三：处理不同的HTTP状态码示例四：设置超时时间实际开发中的使用技巧结论在Web开发中，异步数据请求是一项至关重要的技能，它允许我们在不刷新整个页面的情况下从服务器获取数据。
axios cannot post 404_Fetch还是Axios——哪个更适合HTTP请求？
weixin_39944944的博客
11-27 229
作者：杜尼卜来源：SegmentFault 思否社区前端开发最重要的部分之一是通过发出HTTP请求与后端进行通信，我们有几种方法可以异步地在Javascript中进行API调用。几年前，大多数应用程序都使用Ajax发送HTTP请求，Ajax代表异步Javascript和XML。但是现在，开发人员通常会决定在 .fetch() API和Axios之间进行选择。在本文中，我想比较这两种方法，...
Failed to fetch XXX 404 Not Found问题解决
m0_47152970的博客
12-02 1246
问题解决很简单，只需要运行一下 `apt-get update`即可，并不是清华源或者网络的问题。
React项目 fetch 本地json文件 报错404问题
weixin_46190955的博客
06-17 1822
一年没有碰React了，有点生疏了，于是自己手动搭建了一个Ract脚手架方便做练习，我使用的是redux进行状态管理 在actions的userInfo.js(功能页面，名字自己定义)中新建如下请求函数： export function getUserInfo(){ return function(dispatch){ dispatch(getUserInfoRequest()) return fetch('/api/user.json') //关键请求 .then((re
如何处理fetch请求错误
qq_42880714的博客
12-10 1890
如何处理fetch请求错误
使用Fetch
weixin_33827965的博客
05-14 447
原文链接：css-tricks.com/using-fetch… 。 本文介绍了Fetch基本使用方法及zlFetch库的使用 无论用JavaScript发送或获取信息，我们都会用到Ajax。Ajax不需要刷新页面就能发送和获取信息，能使网页实现异步更新。 几年前，初始化Ajax一般使用jQuery的ajax方法： $.ajax('some-url', { success: (data) ...
javascript-fetch-api:使用fetch-API以Java脚本制作的API
05-24
Fetch API被设计为一个轻量级且易于使用的解决方案，支持异步操作，使得网页应用可以更加流畅地与服务器进行数据交互。 在HTML中，Fetch API主要用来发送GET、POST等HTTP请求，获取或提交数据。它的工作原理是通过...
node-fetch：为Node.js环境提供兼容Fetch API的解决方案
在使用node-fetch时，开发者需要注意的是，虽然它与浏览器端的window.fetch API保持高度一致，但仍然有一些差异。例如，某些在window.fetch API中提供的特性在node-fetch中可能不可用或者存在差异。开发者应查看已知...
FetchError(解决方案).md
11-26
FetchError是JavaScript Fetch API在执行网络请求时可能遇到的错误类型。Fetch API提供了一个强大且灵活的方式来发起网络请求，而错误处理是确保Web应用稳定运行的重要组成部分。错误可能来源于多种原因，包括网络...
WEB前端10- Fetch API(同步异步跨域处理)
最新发布
m0_74824877的博客
12-19 637
具体来说，同源策略要求网页中的所有资源（如脚本、样式表和 AJAX 请求）必须来自同一个域、协议和端口，否则就会出现跨域问题。代理服务器充当客户端和目标服务器之间的中介，它接收来自客户端的请求，然后将请求转发给目标服务器，并将目标服务器的响应返回给客户端。Promise 对象是 JavaScript 中处理异步操作的一种机制，它代表了一个异步操作的最终完成或失败，并且其结果值是可用的。: （可选）一个对象，包含配置 fetch 操作的设置，比如方法、头部、请求体、凭据等。这个参数允许精确调整请求的细节。
await js 报错_javascript – 如何在async / await fetch API中处理错误404
weixin_31613447的博客
12-31 412
是否有任何opurtinity捕获错误,没有提供数据？我接收错误404但不能举例如console.log它…class App extends React.Component{getWeather = async (e) => {e.preventDefault();const city = e.target.elements.city.value;const country = e.tar...
vue项目fetch本地PAG格式文件404 NotFound
weixin_72459962的博客
02-03 910
vue项目使用本地静态.pag格式动效图片，fetch发起本地静态资源请求，资源不存在 404NotFound
React项目 fetch 本地json文件 404问题
zwkkkk1的博客
07-25 7622
  今天在搞项目的时候，想要在React项目中fetch本地的json文件却一直报404。   网上的解决方案，差不多说地址都是相对于首页index.html而言，所以将json数据放在相对index.html上就好了。   可是鼓捣了个把小时还是没有解决问题。据我观察，网上的解决方案都是基于 create-react-app 的项目，而我的项目是自己集成的环境。   为了验证网上的解决方案...
git fetch 404
学无止境
08-17 688
golang 下载依赖包时调用 git fetch出现以下404错误： go: domain/path@version: reading xxx at revision vxxx: git fetch -f domain/path refs/heads/*:refs/heads/* refs/tags/*:refs/tags/* in /root/go/pkg/mod/cache/vcs/010cec9e1885f646fe4edf45a7b9e645841cdd7ec0f3b5816641e433ca
Ubuntu 17.04 agt-get update失败，显示404 not found，并且还出现failed to fetch等关键字
小亦的博客
06-11 4288
这俩天在服务器上倒腾SVN，本来一行命令就搞定的：sudo apt-get install subversion结果，直接报错，显示是包缺失，嗯，那不难，上网搜索了下一个命令解决：sudo apt-get update结果，？？？啥情况，又报错？查了老半天，看了一些外文的网站才发现说17.04官方有些源关闭了，访问不到，很多解决方法都是找阿里云、清华源、中科大等源就搞定了，一试，还是不行。我的解决...
fetch使用详解
one_four_two的博客
01-26 3412
文章目录参数说明与$.ajax()的不同示例不带参数的请求带参数的请求(以post为例)判断请求是否成功 参数说明 fetch参数：一个必选的资源路径和一个可选的参数init。无论请求是否成功都返回一个Promise 与$.ajax()的不同 fetch与$.ajax()的不同 当接收到类似404或500这类表示错误的状态码时，fetch返回的Promise对象的状态仍然为resolve(res...
fetch异常状态处理
Robin's Blog
04-30 2026
function CheckRequest(response) { if (!response.ok) { var error = new Error(response.statusText) error.response = response throw error } else { return response...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

几何心凉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值