Fetch 与 Axios:JavaScript HTTP 请求库的详细比较


💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。

  • 推荐:「stormsha的主页」👈,「stormsha的知识库」👈持续学习,不断总结,共同进步,为了踏实,做好当下事儿~

  • 专栏导航

    • Python系列: Python面试题合集,剑指大厂
    • Git系列: Git操作技巧
    • GO系列: 记录博主学习GO语言的笔记,该笔记专栏尽量写的试用所有入门GO语言的初学者
    • 数据库系列: 详细总结了常用数据库 mysql 技术点,以及工作中遇到的 mysql 问题等
    • 运维系列: 总结好用的命令,高效开发
    • 算法与数据结构系列: 总结数据结构和算法,不同类型针对性训练,提升编程思维

    非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨

    |-----------------------------|
    | 💖The Start💖点点关注,收藏不迷路💖 |

    📒文章目录


fetchaxios 是两种常用的 HTTP 请求库,用于在前端与服务器进行通信。它们各自有优点和缺点,选择哪一个取决于具体的需求和项目环境。以下是它们的详细比较:

Fetch

fetch 是一种原生的 JavaScript API,用于发起 HTTP 请求。它是现代浏览器内置的,不需要额外的库。

优点
  1. 内置fetch 是浏览器原生支持的,不需要额外的安装。
  2. 灵活:提供了更底层、更灵活的 API,可以处理各种复杂的请求和响应场景。
  3. 基于 Promisefetch 使用 Promise 进行异步操作,代码更简洁。
缺点
  1. 繁琐的错误处理fetch 只会对网络错误进行捕获,对于 HTTP 状态码错误(如 404 或 500)不会抛出异常,需要手动处理。
  2. 不支持取消请求fetch 原本不支持取消请求,虽然可以通过 AbortController 来实现,但稍显麻烦。
  3. 较少的高阶功能:没有内置的请求和响应拦截器等高阶功能。
示例
javascript 复制代码
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('There was a problem with your fetch operation:', error));

Axios

axios 是一个基于 Promise 的 HTTP 客户端,适用于浏览器和 Node.js 环境。

优点
  1. 易用性:API 设计比较简单直观,封装良好,使用方便。
  2. 自动处理 JSONaxios 会自动将 JSON 数据转换为 JavaScript 对象。
  3. 错误处理axios 对 HTTP 状态码错误会抛出异常,简化了错误处理流程。
  4. 取消请求axios 支持取消请求(使用 CancelToken)。
  5. 拦截器:支持请求和响应拦截器,可以轻松地在发送请求或接收到响应时执行操作。
  6. 更好的浏览器兼容性:支持更老版本的浏览器。
缺点
  1. 额外的依赖 :需要安装第三方库,不像 fetch 那样内置。
  2. 体积较大 :相比 fetchaxios 的体积要大一些。
示例
javascript 复制代码
import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.response) {
      // 服务器响应了一个状态码范围在2xx以外
      console.error('Server responded with:', error.response.status);
    } else if (error.request) {
      // 请求已经发出,但没有收到响应
      console.error('No response received:', error.request);
    } else {
      // 其他错误
      console.error('Error', error.message);
    }
  });

总结

选择 fetch 还是 axios 取决于你的具体需求:

  • 如果你需要一个轻量级、内置的解决方案并且浏览器环境较为现代,可以选择 fetch
  • 如果你需要更多高级功能(如请求和响应拦截器、自动 JSON 处理、取消请求等),以及更好的错误处理机制,axios 会是一个更好的选择。

🔥🔥🔥道阻且长,行则将至,让我们一起加油吧!🌙🌙🌙

|---------------------------|
| 💖The End💖点点关注,收藏不迷路💖 |

相关推荐
猿榜7 分钟前
js逆向-喜某拉雅Xm-Sign参数解密
javascript
转转技术团队8 分钟前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
仙女很美哦13 分钟前
Flutter视频播放、Flutter VideoPlayer 视频播放组件精要
websocket·网络协议·tcp/ip·http·网络安全·https·udp
Mintopia17 分钟前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js
Mintopia19 分钟前
Three.js深度解析:InstancedBufferGeometry实现动态星空特效 ——高效渲染十万粒子的底层奥秘
前端·javascript·three.js
随笔记19 分钟前
Flex布局下,label标签设置宽度依旧对不齐,完美解决(flex-shrink属性)
javascript·css·vue.js
独好紫罗兰22 分钟前
洛谷题单3-P5719 【深基4.例3】分类平均-python-流程图重构
开发语言·python·算法
前端Hardy27 分钟前
HTML&CSS:超丝滑的动态导航菜单
javascript·css·html
前端Hardy33 分钟前
HTML&CSS:你绝对没见过的input输入框,确定不看看吗
javascript·css·html
前端Hardy34 分钟前
HTML&CSS:不一样的开关效果
javascript·css·html