React + TypeScript + Vite 搭建及二次封装请求的方法

在现代前端开发中，React 和 TypeScript 已经成为非常流行的技术栈。Vite 新兴的构建工具，以其快速的开发体验和高效的构建速度，逐渐成为开发者的首选。本文将介绍如何使用 React + TypeScript + Vite 搭建项目，并在此基础上进行请求的二次封装。

1. 项目搭建

1.1 初始化项目

首先，使用 Vite 初始化一个 React + TypeScript 项目：

npm create vite@latest my-react-app --template react-ts

进入项目目录并安装依赖：

cd my-react-app
npm install

1.2 项目结构

项目初始化完成后，目录结构大致如下：

my-react-app/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.tsx
│   ├── main.tsx
│   └── vite-env.d.ts
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

2. 安装 Axios

在项目中，我们通常使用 Axios 来进行 HTTP 请求。首先安装 Axios：

npm install axios

3. 二次封装 Axios

为了在项目中更好地管理请求，我们可以对 Axios 进行二次封装。以下是一个简单的封装示例：

3.1 创建 api 目录

在 src 目录下创建一个 api 目录，用于存放与请求相关的代码：

src/
├── api/
│   ├── index.ts
│   └── request.ts

3.2 封装 Axios

在 request.ts 中，我们对 Axios 进行封装：

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

// 创建 Axios 实例
const instance: AxiosInstance = axios.create({
  baseURL: 'https://api.example.com', // 设置基础 URL
  timeout: 10000, // 设置请求超时时间
  headers: {
    'Content-Type': 'application/json',
  },
});

// 请求拦截器
instance.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // 在发送请求之前做些什么
    // 例如：添加 token
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response: AxiosResponse) => {
    // 对响应数据做些什么
    return response.data;
  },
  (error) => {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

export default instance;

3.3 创建 API 请求方法

在 index.ts 中，我们可以定义具体的 API 请求方法：

import request from './request';

// 获取用户信息
export const getUserInfo = (userId: string) => {
  return request.get(`/user/${userId}`);
};

// 更新用户信息
export const updateUserInfo = (userId: string, data: any) => {
  return request.put(`/user/${userId}`, data);
};

// 删除用户
export const deleteUser = (userId: string) => {
  return request.delete(`/user/${userId}`);
};

4. 在组件中使用封装的请求方法

在 React 组件中，我们可以直接使用封装好的 API 请求方法：

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

const UserProfile: React.FC = () => {
  const [user, setUser] = useState<any>(null);

  useEffect(() => {
    const fetchUserInfo = async () => {
      try {
        const userInfo = await getUserInfo('123');
        setUser(userInfo);
      } catch (error) {
        console.error('Failed to fetch user info:', error);
      }
    };

    fetchUserInfo();
  }, []);

  return (
    <div>
      {user ? (
        <div>
          <h1>{user.name}</h1>
          <p>{user.email}</p>
        </div>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default UserProfile;

5. 总结

通过以上步骤，我们成功搭建了一个基于 React + TypeScript + Vite 的项目，并对 Axios 进行了二次封装。这样不仅提高了代码的可维护性，还能更好地管理请求和响应。在实际开发中，你可以根据项目需求进一步扩展和优化这个封装方案。

希望本文对你有所帮助，祝你在 React + TypeScript + Vite 的开发之旅中一帆风顺！