Axios结合Typescript 二次封装完整详细场景使用案例

Axios结合TypeScript的二次封装使用案例

在现代的前端开发中，网络请求是一个非常重要的部分。我们常常需要与后端进行数据交互，为了提高代码的可维护性和可复用性，我们可以使用 Axios 库结合 TypeScript 进行二次封装。本文将详细介绍如何利用 Axios 和 TypeScript 实现一个简单的网络请求库，并通过具体案例帮助理解其应用场景。

1. 安装依赖

首先，我们需要安装 Axios 和 TypeScript。可以使用 npm 或者 yarn 来安装：

npm install axios
npm install --save-dev typescript @types/node

2. 创建 Axios 实例

我们将首先创建一个 Axios 实例，并进行一些基础配置，比如设置请求的基础 URL、超时、请求拦截器、响应拦截器等。

// src/http.ts
import axios, { AxiosInstance, AxiosRequestConfig } from 'axios';

class HttpRequest {
    private instance: AxiosInstance;

    constructor(baseURL: string) {
        this.instance = axios.create({
            baseURL,
            timeout: 10000, // 设置请求超时
        });

        this.instance.interceptors.request.use(this.handleRequest, this.handleError);
        this.instance.interceptors.response.use(this.handleResponse, this.handleError);
    }

    private handleRequest(config: AxiosRequestConfig) {
        // 在这里可以添加请求 headers 或其他配置
        console.log('请求数据：', config);
        return config;
    }

    private handleResponse(response: any) {
        // 在这里可以对响应数据进行处理
        return response.data;
    }

    private handleError(error: any) {
        console.error('请求错误：', error);
        return Promise.reject(error);
    }

    public async get<T>(url: string, params: object = {}): Promise<T> {
        return this.instance.get<T>(url, { params });
    }

    public async post<T>(url: string, data: object): Promise<T> {
        return this.instance.post<T>(url, data);
    }
}

export const http = new HttpRequest('https://api.example.com'); // 替换为实际API地址

3. 使用 Axios 实例

接下来，我们可以使用封装好的 http 实例进行 API 请求。假设我们有一个用户信息的 API，我们可以如下使用：

// src/api/user.ts
import { http } from '../http';

interface User {
    id: number;
    name: string;
    email: string;
}

// 获取用户信息
export const fetchUser = async (userId: number): Promise<User> => {
    return await http.get<User>(`/users/${userId}`);
};

// 创建用户
export const createUser = async (userData: Partial<User>): Promise<User> => {
    return await http.post<User>('/users', userData);
};

4. 通过使用示例实现功能

我们可以在一个简单的控制台应用中调用上面的 API：

// src/index.ts
import { fetchUser, createUser } from './api/user';

const main = async () => {
    try {
        // 获取用户
        const user = await fetchUser(1);
        console.log('用户信息：', user);

        // 创建新用户
        const newUser = await createUser({ name: 'John Doe', email: 'john@example.com' });
        console.log('新创建的用户：', newUser);
    } catch (error) {
        console.error('发生错误：', error);
    }
};

main();

5. 总结

通过以上步骤，我们成功地使用 TypeScript 对 Axios 进行了二次封装，并能通过简单的方法调用 API。这样的封装不仅使代码结构更加清晰，也提高了可维护性。你可以根据实际项目的需求，继续扩展这个基本的网络请求库，比如添加取消请求、重试机制、请求日志等功能。希望这篇文章能为你在前端项目中使用 Axios 提供帮助。