如何提取axios post请求逻辑，而重构一个函数?

Question

我试图实现一个登录功能，我通过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 request部分成为一个不同的功能。

这是我的重构版本:

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

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

请指引我。

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