react中axios ts封装

在React中使用Axios进行网络请求时，可以使用TypeScript进行封装以提高代码的可读性和维护性。

首先，我们可以创建一个axios实例，并对其进行一些全局配置，如设置基本的URL地址、超时时间等。可以在一个单独的文件中，比如`api.ts`中进行封装：

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000
});

// 添加请求拦截器
instance.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // 在发送请求之前可以进行一些处理，比如添加token等
    return config;
  },
  (error: any) => {
    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  (response: AxiosResponse) => {
    // 在拿到响应数据之后可以进行一些处理，比如统一处理错误等
    return response;
  },
  (error: any) => {
    return Promise.reject(error);
  }
);

export default instance;

接下来，我们可以创建一个`api.ts`文件，封装各种不同的接口请求：

import axios from './axios';

export const getUserInfo = () => axios.get('/user/info');
export const updateUser = (data: any) => axios.post('/user/update', data);
export const deleteUser = (userId: number) => axios.delete(`/user/${userId}`);

使用时，我们只需要在组件中引入对应的接口请求函数即可：

import { useEffect, useState } from 'react';
import { getUserInfo } from './api';

const UserInfo = () => {
  const [userInfo, setUserInfo] = useState<any>(null);

  useEffect(() => {
    getUserInfo()
      .then((response) => {
        setUserInfo(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  return (
    <div>
      {userInfo && (
        <div>
          <h1>User Info:</h1>
          <p>Name: {userInfo.name}</p>
          <p>Email: {userInfo.email}</p>
        </div>
      )}
    </div>
  );
};

export default UserInfo;

通过封装，我们能够将网络请求和业务逻辑分离，提高代码的可维护性和可测试性。此外，使用TypeScript进行类型检查，可以在编码阶段捕获一些潜在的错误，减少运行时错误的发生。