如何在React/Next.js函数组件中调用类中的doGet方法？

错误原因分析 #

1. 导入与调用方式错误：你导入的是ClientApi类，却错误命名为doGet，并且直接把类当成普通函数调用。类的实例方法必须通过类的实例对象才能调用，不能直接调用类本身。
2. 未定义变量：ClientApi的doGet方法中使用了authorizationHeaders变量，但没有提前定义，会引发新的运行时错误。
3. 语法冗余：getUserData中混用await和.then()，写法冗余且容易导致逻辑混乱。

分步解决方案 #

1. 修正组件中的导入与实例化

在Users组件中，正确导入ClientApi类并创建实例：

import ClientApi from './ClientApi'
import { useEffect, useState } from "react";

export default function Users() {
    const [isLoading, setIsLoading] = useState(false);
    const [data, setData] = useState([]);
    // 创建ClientApi实例
    const apiClient = new ClientApi();

    useEffect(() => {
        getUserData();
    }, []);

    return (
        <>
            {/* 渲染用户列表的逻辑 */}
            {isLoading ? <div>加载中...</div> : <ul>{data.map(user => <li key={user.id}>{user.name}</li>)}</ul>}
        </>
    )

    // 修正后的请求函数
    async function getUserData() {
        setIsLoading(true);
        try {
            const response = await apiClient.doGet("/users");
            setData(response.data);
        } catch (error) {
            console.error('获取用户数据失败:', error);
            // 可在此添加错误提示（如弹窗、提示文本）
        } finally {
            // 无论成功失败都结束加载状态
            setIsLoading(false);
        }
    }
}

2. 完善ClientApi的doGet方法

补充authorizationHeaders的定义，同时优化错误处理（抛出错误让调用方处理）：

import axios, { AxiosInstance } from "axios";

class ClientApi {
    // 增加默认值避免环境变量未定义时出错
    API_URL: string = process.env.CLIENT_API_URL || '';

    client: AxiosInstance;

    constructor() {
        this.client = axios.create({
            baseURL: this.API_URL,
            headers: {
                Accept: "application/json",
                "Content-Type": "application/json",
            }
        });
    }

    async doGet(url: string) {
        try {
            // 示例：从localStorage获取token构造授权头，可根据实际逻辑调整
            const token = localStorage.getItem('authToken');
            const authorizationHeaders = token ? { Authorization: `Bearer ${token}` } : {};

            // 注意：axios.get的第二个参数是配置对象，headers需要放在配置里
            return await this.client.get(url, {
                headers: authorizationHeaders
            })
        } catch (error) {
            console.error('请求失败:', error);
            // 抛出错误，让调用方捕获处理
            throw error;
        }
    }
}

export default ClientApi;

3. 可选优化：单例模式的ClientApi

如果整个应用只需要一个Api实例，可以改成单例模式，避免重复创建实例：

import axios, { AxiosInstance } from "axios";

class ClientApi {
    API_URL: string = process.env.CLIENT_API_URL || '';
    client: AxiosInstance;
    // 静态属性存储单例实例
    private static instance: ClientApi;

    // 私有构造函数，禁止外部直接new
    private constructor() {
        this.client = axios.create({
            baseURL: this.API_URL,
            headers: {
                Accept: "application/json",
                "Content-Type": "application/json",
            }
        });
    }

    // 静态方法获取单例实例
    static getInstance(): ClientApi {
        if (!ClientApi.instance) {
            ClientApi.instance = new ClientApi();
        }
        return ClientApi.instance;
    }

    async doGet(url: string) {
        try {
            const token = localStorage.getItem('authToken');
            const authorizationHeaders = token ? { Authorization: `Bearer ${token}` } : {};

            return await this.client.get(url, {
                headers: authorizationHeaders
            })
        } catch (error) {
            console.error('请求失败:', error);
            throw error;
        }
    }
}

export default ClientApi;

使用单例时，组件中这样调用：

const apiClient = ClientApi.getInstance();

内容的提问来源于stack exchange，提问作者Paul Croarkin