react ts axios封装

在React项目中，使用TypeScript (TS) 和 Axios 进行HTTP请求的封装通常是为了提高代码的组织性和可维护性。以下是基本步骤：

1. **安装依赖**：
首先需要安装`axios`库用于发送HTTP请求，以及`@types/axios`和`typescript-axios`等类型支持：

   npm install axios @types/axios typescript-axios

2. **创建Axios实例**：
创建一个全局的Axios实例，并配置基础URL、headers或其他公共选项。例如：

   import axios from 'axios';
   
   const service = axios.create({
     baseURL: process.env.REACT_APP_API_URL, // 根据环境变量设置API地址
     headers: {
       'Content-Type': 'application/json',
     },
   });

3. **封装请求函数**：
使用泛型来定义通用的请求方法，如获取数据、添加、更新和删除等：

   interface RequestConfig<T> {
     url: string;
     method: 'get' | 'post' | 'put' | 'delete'; // 请求类型
     data?: T; // 对于非GET请求的数据
   }

   function request<T>(config: RequestConfig<T>): Promise<T> {
     return service(config.method, config.url, {
       params: config.data,
       data: config.method === 'post' ? config.data : undefined, // POST时需要JSON格式数据
     }).then(response => response.data);
   }

4. **使用封装后的请求**：
在React组件中，可以直接使用这个封装好的`request`函数发起请求，比如获取数据：

   async componentDidMount() {
     try {
       const result = await request<{data: any}>({url: '/users', method: 'get'});
       console.log(result.data);
     } catch (error) {
       console.error(error);
     }
   }