Espero que esté bien, tengo un problema para cancelar mi solicitud axios con el gancho useEffect en ReactJS.
Explicación
En primer lugar, debes saber que mi código usa un archivo llamado Requests.js, allí se almacenan mis solicitudes personalizadas, tales como: registro, inicio de sesión y consultar información de usuario.
En estas funciones recibo la url, los datos a enviar y algunos encabezados.
Cuando uso estas funciones en mi código principal, paso un token de cancelación creado por axios, este token se crea cuando se envía el formulario, y si el usuario abandona la página en ese período de tiempo, cancelo la solicitud de axios.
Donde puede tener el problema es cómo le paso el token de cancelación a axios, ya que lo paso en función en función, hasta que llego a la función de axios.
Request.js
```import { LOGIN_URL, SIGNUP_URL, GET_INFO_USER_LOGGED } from "../Config/api";
import { alertDanger } from "./notifications";
class Requests {
_showNetworkErrorAlert(status) {
if (status >= 400 && status < 500) {
alertDanger("A client network error occurred.");
} else if (status >= 500 && status < 600) {
alertDanger("Platform server error.");
} else {
alertDanger("A connection error occurred.");
}
}
async _post(url, args, headers) {
console.log({ ...headers });
try {
const res = await axios.post(
url,
{
...args,
},
{
...headers, // Aquí recibo las configuraciónes y el token de cancelación
}
);
return res;
} catch (error) {
this._showNetworkErrorAlert(error?.response?.status);
}
}
async _get(url, args, headers) {
console.log(headers);
try {
const res = await axios.get(url, {
...args,
headers,
});
return res;
} catch (error) {
this._showNetworkErrorAlert(error.response.status);
}
}
async login({ email, password, headers }) {
// Aquí paso los parametros y el argumento "headers" tiene mi token
const loginUser = await this._post(LOGIN_URL, { email, password }, headers);
return loginUser;
}
async signup({ username, email, password, headers }) {
const signupUser = await this._post(
SIGNUP_URL,
{
username,
email,
password,
},
headers // lo mismo que el anterior...
);
return signupUser;
}
async getInfoUserLogged(token) {
const userInfoLogged = await this._get(
GET_INFO_USER_LOGGED,
{},
{
authorization: `Bearer ${token}`,
}
);
return userInfoLogged?.data?.data?.user;
}
}
export default new Requests();```
El archivo que pienso que genera el problema:
```import { Redirect } from "react-router-dom";
import axios from "axios";
// import { useSelector } from 'react-redux';
// components
import LoginComponent from "./LoginComponent";
import { alertDanger, alertSuccess } from "../../../Helpers/notifications";
// Redux elements
import { connect } from "react-redux";
import { SetCurrentUserInfo } from "../../../Redux/Actions/UserActions";
// api links
import Resquests from "../../../Helpers/Resquests";
const LoginContainer = (props) => {
const [credentials, setCredentials] = useState({
email: "",
password: "",
});
const [isLogged, setLogged] = useState(false);
const [isLoading, setLoading] = useState(false);
let cancelResquest = null;
/*
Aquí debería de cancelar mi petición, pero axios no lo hace.
*/
useEffect(() => {
return () =>
cancelResquest && cancelResquest.cancel("Finalizando peticion");
}, []);
const onChangeCredentials = ({ target }) => {
setCredentials({
...credentials,
[target.name]: target.value,
});
};
const onSubmitForm = async (ev) => {
ev.preventDefault();
setLoading(true);
/*
Aquí genero el token de cancelación y lo envio por un parámetro.
*/
cancelResquest = axios.CancelToken.source();
const res = await Resquests.login(
{
email: credentials.email,
password: credentials.password,
}, // El tercer parametro es un objeto que llamé "cabeceras" allí coloco mi token
{
cancelToken: cancelResquest.token, // the token
}
);
setLoading(false);
if (res?.data?.ok === false) {
alertDanger("Error in your credentials");
} else if (res?.data?.ok === true) {
alertSuccess("Successful login.");
const userInfoLogged = await Resquests.getInfoUserLogged(
res.data.data.token
);
props.SetCurrentUserInfo(userInfoLogged);
console.log("en la linea 49", props.UserInformation);
setLogged(true);
}
};
return isLogged ? (
<Redirect to="/" />
) : (
<LoginComponent
{...{ onChangeCredentials, ...credentials, onSubmitForm, isLoading }}
/>
);
};
const mapStateToProps = (state) => ({
UserInformation: state.UserInformation,
});
const mapDispatchToProps = {
SetCurrentUserInfo,
};
export default connect(mapStateToProps, mapDispatchToProps)(LoginContainer);```
Muchas gracias de antemano por leer esto.