如何在重构函数的同时提取axios post请求逻辑？答案

【问题标题】：How to extract axios post request logic while refactoring a function?如何在重构函数的同时提取axios post请求逻辑？
【发布时间】：2023-01-16 15:59:20
【问题描述】：

我正在尝试实现一个登录功能，我通过 emailId 和 password 并从服务器接收登录用户数据。此外，如果发生某些错误，也会相应地进行处理。

这是代码：

export const handleLogin = async (e, navigate, link, data, setError) => {
    try {

        const cancelToken = axios.CancelToken.source();
        const response = await axios.post(link, { ...data }, { cancelToken: cancelToken.token });  //this is the axios post request part
        localStorage.setItem("token", response.data.token);
        axios.defaults.headers.common["Authorization"] = response.data.token;
        navigate("/");

    } catch (err) {

        if (axios.isAxiosError(err)) {
            handleAuthenticationError(setError, err.response?.data, navigate);
        }
    
    }
};

在我的重构版本中，我试图让 Axios post 请求部分成为一个不同的功能。

这是我的重构版本：

export const handlePostApi = async (e,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);
        }
    }
};


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

现在，特定于登录的逻辑和特定于后请求的逻辑是分开的。但是对于 Axios 成功的 handlePostApi 函数，我返回 response.data 但我无法理解 error 应该返回什么。

请指导我。

【问题讨论】：

标签： reactjs axios refactoring

【解决方案1】：

您可以在调用方法中处理错误。
此外，您可能应该将所有逻辑移动到单独的方法中，不要将其保留在单独的函数中：

export const handlePostApi = async (link, data) => {
  const cancelToken = axios.CancelToken.source();
  const response = await axios.post(
    link,
    { ...data },
    { cancelToken: cancelToken.token }
  );
  const userData = response.data;
  localStorage.setItem('token', userData.token);
  axios.defaults.headers.common['Authorization'] = userData.token;
};

export const handleLogin = async (e, navigate, link, data, setError) => {
  try {
    await handlePostApi(link, data);
    navigate('/');
  } catch (err) {
    if (axios.isAxiosError(err)) {
      handleAuthenticationError(setError, err.response?.data, navigate);
    }
  }
};

【讨论】：