react+vite+ts axios的二次封装集成接口loading动画，错误接口码的处理和用户的友好提示配合环境配置各个环境的代理以及全局的环境变量设置

React、Vite 和 TypeScript 的结合通常用于构建高效、模块化的前端应用。当涉及到 Axios 的二次封装，你可以创建一个可复用的库，整合 loading 动画、错误处理和用户友好的反馈。以下是简要步骤：

1. **二次封装 Axios**:
- 定义一个高阶组件 (HOC)，如 `useAxios`，它接受一个函数作为参数，并包装了 Axios 请求，同时添加 loading 状态管理和错误处理。

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

   const useAxios = (apiCall: (config: AxiosRequestConfig) => Promise<any>) => {
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);

     useEffect(() => {
       setLoading(true);
       apiCall()
         .then(response => {
           setLoading(false);
           // 成功处理数据
         })
         .catch(error => {
           setLoading(false);
           setError(error.response.status); // 将HTTP状态码保存到error对象
         });
     }, [apiCall]);

     return { loading, setError };
   };

   export default useAxios;

2. **Loading 动画**:
- 可以使用第三方库比如 `react-loading-bar` 或自定义 CSS 过渡效果，在请求开始和结束时显示和隐藏加载指示器。

3. **错误界面**:
- 根据错误码展示相应的提示信息，比如404时显示“页面未找到”，500时显示“服务器内部错误”。

4. **环境配置和代理**:
- 使用 Vite 的环境插件，如 `vite-plugin-env`, 根据 `process.env.NODE_ENV` 设置不同的生产或开发环境。
- 配置 Vite 的 proxy，例如在 devServer 中添加规则以转发 API 调用到后端服务器。

   import { defineConfig } from 'vite';
   export default defineConfig({
     server: {
       proxy: {
         '/api': {
           target: process.env.BACKEND_URL,
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, ''),
         },
       },
     },
   });

5. **全局环境变量**:
- 使用 TypeScript 的 `Environment Variables` 功能，将敏感信息存储在 `.env` 文件中，然后导入并映射到 `process.env` 对象。

// env.ts
import * as dotenv from 'dotenv';
dotenv.config();

export const API_URL = process.env.REACT_APP_API_URL || '';