react axios二次封装的加载动画

React Axios 是一个用于 React 开发者封装 Axios 的库，它使得在 React 中使用 Axios 进行网络请求变得更加简单。当涉及到加载动画的二次封装，通常会创建一个可复用的自定义组件或 Hook，比如结合 `useState` 和 `useEffect`，在发送请求时显示加载状态，在请求成功或失败后隐藏。

下面是一个简单的例子：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const LoadingIndicator = ({ url }) => {
  const [isLoading, setIsLoading] = useState(true);
  const [response, setResponse] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        setIsLoading(true);
        const result = await axios.get(url);
        setResponse(result.data);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setIsLoading(false); // 请求完成后隐藏加载动画
      }
    };

    fetchData();
  }, [url]);

  return (
    <div className="loader" style={isLoading ? { display: 'block' } : { display: 'none' }}>
      {/* 加载动画组件 */}
    </div>
    {response && /* 显示响应数据 */}
  );
};

export default LoadingIndicator;

在这个例子中，`LoadingIndicator` 组件会在接收到 `url` 后开始请求，并显示加载动画。当请求完成并设置响应数据时，加载动画会被隐藏。如果在请求过程中遇到错误，也会隐藏加载动画。