Axios Or Fetch in NextJs

使用 next.JS 时，在 axios 和本机 fetch api 之间进行选择取决于您的项目要求、偏好以及您正在寻找的特定功能。以下是帮助您做出决定的细分：

使用 fetch（本机选项）

优点：

1. 内置：
   • fetch 是一个内置的 web api，因此不需要额外的依赖项。
   • 由于没有添加外部库，所以包大小更小。
2. 普遍适用：
   • 适用于客户端和服务器端（例如，next.js 服务器端函数，如 getserversideprops 或 getstaticprops）。
3. 现代 api：
   • 支持承诺并拥有广泛的浏览器支持。
4. 细粒度控制：
   • 您可以根据需要手动配置标头、超时和其他请求选项。

缺点：

1. 样板代码：
   • 错误处理和响应解析（例如，检查response.ok和解析response.json）需要额外的代码。
2. 缺乏功能：
   • 没有对请求取消、自动重试或拦截器的内置支持。

使用 axios（外部库）

优点：

1. 功能丰富：
   • 内置对拦截器、超时和请求/响应转换的支持。
   • 简化 json 响应解析。
2. 更直观的语法：
   • 用于发出请求的 api 更简洁、更易于阅读。

axios.get('/api/data').then(response => console.log(response.data)); 

1. 更好的错误处理：
   • axios 区分 http 错误和网络错误，可以简化调试。
2. 跨浏览器兼容性：
   • 处理旧版浏览器中可能出现的 http 请求中的异常情况。

缺点：

1. 额外的依赖：
   • 为您的项目增加权重（尽管像 -webpack/turbopack 这样的现代打包器可以最大限度地减少影响）。
2. 非母语：
   • 与 fetch 不同，它不是浏览器或 node.js 的一部分，因此您依赖外部维护。

何时使用哪个？

1. 在以下情况下使用 fetch：
   • 您想要一个轻量级的解决方案并且更喜欢内置 api。
   • 您正在构建一个简单的应用程序，或者不需要拦截器等高级功能。
   • 您希望避免向项目添加额外的依赖项。
2. 在以下情况下使用 axios：
   • 您需要拦截器、自动 json 解析或请求取消等高级功能。
   • 您想要一个对开发人员更加友好的 api，并且具有更少的样板代码。
   • 您正在构建一个具有广泛 api 交互的复杂应用程序。

结论

对于大多数 next.js 项目来说，fetch 就足够了，并且非常符合框架的简约理念。但是，如果您的项目涉及复杂的 api 交互或者您想减少样板代码，axios 可能是更好的选择。

如果您尚未决定，请从 fetch 开始，因为如果您发现需要其附加功能，您可以随时切换到 axios。