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

最新推荐文章于 2024-05-27 22:56:36 发布

落落落落克

最新推荐文章于 2024-05-27 22:56:36 发布

阅读量916

点赞数

本文链接：https://blog.csdn.net/qq_34998786/article/details/120320593

版权

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

摘要由CSDN通过智能技术生成

前言

在项目中，通常都需要跟服务端进行异步的数据交互，基本都是用到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 (isLoading) {
        return <div>loading</div>;
   }
  if (isError) {
        return <div>error</div>;
   }
  return (
    <div>
       {
         data.map((item)=>{
            return <div>{item.name}</div>