react+ts 封装axios及实际使用

在React和TypeScript项目中封装axios通常是为了简化HTTP请求的操作，避免在组件内部频繁地创建axios实例。下面是一个基本的步骤：

1. 首先，安装axios和typescript的相关依赖：

npm install axios typescript

2. 创建一个名为`AxiosWrapper.tsx`的文件，用于封装axios操作，并添加类型注解：

// AxiosWrapper.tsx
import { AxiosInstance } from 'axios';
import axios from 'axios';

const instance = axios.create({
  baseURL: process.env.REACT_APP_API_URL, // 如果API地址是环境变量
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
  },
});

export const get = (url: string, params?: object) => instance.get(url, { params });
export const post = (url: string, data: any) => instance.post(url, data);
export const put = (url: string, data: any) => instance.put(url, data);
export const del = (url: string) => instance.delete(url);

// 返回axios实例以便更精细的控制
export default instance;

3. 在需要的地方导入并使用封装后的axios:

// 使用示例
import Axios from './AxiosWrapper';

function MyComponent() {
  const fetchData = async () => {
    try {
      const response = await Axios.get('/users');
      console.log(response.data);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  return (
    <button onClick={fetchData}>Load Data</button>
  );
}