如何在重构 function 的同时提取 axios post 请求逻辑？

Question

I am trying to implement a login functionality where I pass the emailId and password and receive the logged-in user data from the server. Also if some error occurs it is handled accordingly.

Here is the code:

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);
        }
    
    }
};

In my refactored version, I am trying to make the Axios post request part a different function.

Here is my refactored version:

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("/");
};

Now login-specific logic and post-request-specific logic are separated. But in the case of the handlePostApi function for Axios success, I am returning response.data but I am unable to understand in case of error what should be returned.

Please guide me.

Answer 1

You can handle the error in the calling method.
Also, you should probably move all the logic in the separate method and don't keep it in separate functions:

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);
    }
  }
};