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💖点点关注,收藏不迷路💖 |

相关推荐
投笔丶从戎13 分钟前
Kotlin Multiplatform--01:项目结构基础
android·开发语言·kotlin
www_pp_30 分钟前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
YuShiYue1 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
杜小暑1 小时前
动态内存管理
c语言·开发语言·动态内存管理
想不明白的过度思考者1 小时前
Java从入门到“放弃”(精通)之旅——JavaSE终篇(异常)
java·开发语言
layman05281 小时前
node.js 实战——(Http 知识点学习)
http·node.js
天天扭码1 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛1 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
我真的不会C1 小时前
QT窗口相关控件及其属性
开发语言·qt
CodeCraft Studio1 小时前
Excel处理控件Aspose.Cells教程:使用 Python 在 Excel 中进行数据验
开发语言·python·excel