使用React Query做为axios请求库的上层封装

最新推荐文章于 2025-06-10 21:20:21 发布

原创

最新推荐文章于 2025-06-10 21:20:21 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#中间件 #java #vue #python #js

本文探讨了如何使用React Query作为axios的封装库，解决服务端状态管理和请求中间态的问题。React Query提供便捷的缓存、更新及异步数据处理，减少全局状态管理的复杂性。它自动处理isLoading和isError状态，支持局部Loading，并优化请求性能。通过分离服务端状态，项目可以更加简洁高效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

在项目中，通常都需要跟服务端进行异步的数据交互，基本都是用到axios这个库来做请求，嗯，毕竟拥有80k star,明星项目

接下来，我们来回顾下axios在项目中的使用

以查询用户信息为例，我们会这样封装

async function requestUsers(){
  const {data} =await axios.get('/api/users');
  return data;
}

我们再用hooks再封装下这个请求，包括loading等中间态的封装，处理的优雅一点

import React, {useState,useEffect} from 'react';
import axios from 'axios';
function useUsersQuery(){
  const [data,setData] = useState([]);
  const [isLoading,setLoading] = useState(false);
  const [isError,setError] = useState(false)
  useEffect(()=>{
    (async()=>{
       setLoading(true);
       try{
          const {data} = await axios.get('/api/users');
          setData(data);
       } catch((()=>{
          setError(true);
       })
       setLoading(false);
    })()
  })
  return { 
     data,
     isLoading,
     isError
  };
}
function UserList(){
  const {data, isLoading,isError} = useUsersQuery();
  if (isLoad