重构函数时提取Axios Post请求逻辑：错误返回处理咨询

首先，你的重构代码存在一个关键问题：handleLogin中调用handlePostApi时没有加await，导致userData是一个Promise对象，直接访问userData.token会抛出Cannot read property 'token' of undefined（或Promise）的错误，这是首要需要修复的。

接下来针对错误场景的返回策略，提供几种实用方案：

方案1：抛出错误，让上层处理（推荐，符合单一职责） #

让handlePostApi专注于HTTP请求，错误处理逻辑交回给调用方（handleLogin），函数职责更清晰：

export const handlePostApi = async (link, data) => {
    const cancelToken = axios.CancelToken.source();
    const response = await axios.post(link, { ...data }, { cancelToken: cancelToken.token });
    return response.data;
};

export const handleLogin = async (e, navigate, link, data, setError) => {
    try {
        const userData = await handlePostApi(link, data);
        localStorage.setItem("token", userData.token);
        axios.defaults.headers.common["Authorization"] = userData.token;
        navigate("/");
    } catch (err) {
        if (axios.isAxiosError(err)) {
            handleAuthenticationError(setError, err.response?.data, navigate);
        }
    }
};

说明：

• handlePostApi不再接收setError、navigate等业务相关参数，只负责发起请求并返回数据，出错时直接抛出错误。
• handleLogin重新接管错误捕获，调用handleAuthenticationError处理登录相关错误逻辑。
• 这种方式让API请求函数更通用，后续其他接口也能复用。

方案2：错误场景返回null，上层判断后执行逻辑 #

如果希望保留handlePostApi内的错误处理，可以在捕获错误后返回null，并在handleLogin中判断是否获取到有效数据：

export const handlePostApi = async (navigate, link, data, setError) => {
    try {
        const cancelToken = axios.CancelToken.source();
        const response = await axios.post(link, { ...data }, { cancelToken: cancelToken.token });
        return response.data;
    } catch (err) {
        if (axios.isAxiosError(err)) {
            handleAuthenticationError(setError, err.response?.data, navigate);
        }
        return null; // 错误场景返回null
    }
};

export const handleLogin = async (e, navigate, link, data, setError) => {
    const userData = await handlePostApi(navigate, link, data, setError);
    // 只有获取到有效数据时才执行登录后续逻辑
    if (userData) {
        localStorage.setItem("token", userData.token);
        axios.defaults.headers.common["Authorization"] = userData.token;
        navigate("/");
    }
};

说明：

• 错误发生时，handlePostApi先调用handleAuthenticationError处理错误提示等逻辑，再返回null。
• handleLogin中通过判断userData是否存在，避免后续代码访问不存在的token属性。

方案3：返回统一格式的结果对象 #

如果需要更明确的状态标识，可以返回包含success状态和数据/错误信息的对象：

export const handlePostApi = async (navigate, link, data, setError) => {
    try {
        const cancelToken = axios.CancelToken.source();
        const response = await axios.post(link, { ...data }, { cancelToken: cancelToken.token });
        return { success: true, data: response.data };
    } catch (err) {
        if (axios.isAxiosError(err)) {
            handleAuthenticationError(setError, err.response?.data, navigate);
        }
        return { success: false, error: err };
    }
};

export const handleLogin = async (e, navigate, link, data, setError) => {
    const result = await handlePostApi(navigate, link, data, setError);
    if (result.success) {
        localStorage.setItem("token", result.data.token);
        axios.defaults.headers.common["Authorization"] = result.data.token;
        navigate("/");
    }
};

说明：

• 无论成功还是失败，都返回结构一致的对象，上层调用时通过success字段判断执行逻辑。
• 如果需要在handleLogin中处理额外的错误逻辑，可以通过result.error获取错误信息。

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