前端 - 请问下你们在开发React项目的时候，是使用的React-Query库进行网络请求，还是使用的axios呢？

Question

请问下：
1、你们在开发React项目的时候，是使用的React-Query库进行网络请求，还是使用的axios呢？
2、React-Query 和 axios有什么差异，是否使用了axios之后，不必再使用前者了？

Answer 1

看个人习惯 axios 更加原始一些。 React-Query 功能更多。我个人倾向于 axios，我可以自己实现各式各样的拦截器。

React-Query 支持缓存和状态管理功能。当然 axios 也有额外的三方插件支持缓存之类的能力。

你根据你需要的能力选择适合自己的呗。

axios 我遇到过在 node 中请求异常丢失的问题，解决方案就是社区有个包用一下。
react-query 遇到过一个弱网请求丢失的问题，解决方案是修改一下判断逻辑。

React-Query：是一个用于 React 的查询库，它提供了缓存、同步状态、分页和重试等高级功能。React-Query不仅处理网络请求，还管理这些请求的状态（如加载中、成功、失败等），使得开发者可以更容易地在UI中展示这些状态。

axios：它是一个基于Promise的HTTP客户端，用于浏览器和node.js。axios提供了从浏览器中创建XHR请求和从node.js中创建http请求的能力。它支持请求和响应的拦截、转换请求和响应数据等特性。

Answer 2

1、你们在开发React项目的时候，是使用的React-Query库进行网络请求，还是使用的axios呢？

在开发React项目时，既可以使用React-Query库进行网络请求，也可以使用axios。这两个库各有优势，选择哪个取决于项目的具体需求和团队的偏好。

• React-Query：它是一个用于React的查询库，它提供了缓存、同步状态、分页和重试等高级功能。React-Query不仅处理网络请求，还管理这些请求的状态（如加载中、成功、失败等），使得开发者可以更容易地在UI中展示这些状态。
• axios：它是一个基于Promise的HTTP客户端，用于浏览器和node.js。axios提供了从浏览器中创建XHR请求和从node.js中创建http请求的能力。它支持请求和响应的拦截、转换请求和响应数据等特性。然而，axios本身并不提供像React-Query那样的缓存和状态管理功能。

2、React-Query 和 axios有什么差异，是否使用了axios之后，不必再使用前者了？

React-Query 和 axios的差异主要体现在它们的功能范围和用法上：

• 功能范围：

  • React-Query专注于为React应用提供数据获取、缓存、状态同步等一站式解决方案。它不仅仅是一个HTTP客户端，而是一个完整的数据管理库。
  • axios则是一个纯粹的HTTP客户端，它专注于发送HTTP请求和接收响应。虽然axios可以通过中间件等方式进行扩展，但它本身不提供数据缓存、状态同步等高级功能。

• 用法：

  • 使用React-Query时，开发者通常会使用其提供的useQuery、useMutation等Hooks来在React组件中管理数据。这些Hooks会自动处理加载状态、错误处理、缓存更新等任务。
  • 使用axios时，开发者需要手动处理请求和响应，包括设置请求头、处理错误、更新状态等。虽然axios的使用方式灵活，但在需要处理复杂的数据流和状态时，可能会增加代码的复杂性和维护成本。

是否使用了axios之后，就不必再使用React-Query了？

不是。虽然axios可以独立用于发送网络请求，但在需要管理复杂的数据状态和缓存时，React-Query提供了更为便捷和强大的解决方案。因此，在一些复杂的React项目中，开发者可能会选择同时使用axios和React-Query：使用axios作为HTTP客户端发送请求，使用React-Query来管理这些请求的状态和缓存。这样做可以充分利用两个库的优势，提高开发效率和应用的性能。