Quiero estructurar mi aplicación con algún tipo de clase de servicio, pero cada vez que extraigo mis llamadas axios de la página, la función axios parece devolver "indefinido".
Mi página se ve así. La función de inicio de sesión se llama cuando el usuario presiona el botón. Cuando pongo la llamada axios en la página como esta, todo funciona bien. El estado de uso se actualiza y se muestra.
export default function AccountPage() { const [signinResponse, setSigninResponse] = useState(); async function signin() { await axios .get( `...url...` ) .then((res) => { setSigninResponse(res) }); } ...Sin embargo, cuando tomo la función axios y la muevo a una clase de servicio como esta
import axios from "axios"; export async function tableauSignin() { await axios .get( `...url...` ) .then((res) => { console.log(res); return res; }); }y luego importar y hacer la llamada así
import { tableauSignin } from "../services/tableau-online.service"; ... export default function AccountPage() { const [signinResponse, setSigninResponse] = useState(); async function signin() { const r = await tableauSignin(); setSigninResponse(r); console.log(r); } ...el registro de la clase de servicio es bueno, pero el registro en la página de la cuenta no está definido.
Como @RobinZigmond mencionó en el comentario. La siguiente solución funcionará, pero es innecesaria.
es una forma detallada innecesaria de simplemente hacer la función de exportación tableauSignin() { return axios.get(url).then(response => response.data) }.
export async function tableauSignin() { return await axios.get(url).then(response => response.data) }Esta solución puede ser más útil
const getData = async () => { let res = await axios.get("url"); let { data } = res.data; //or res return data; };También puedes importar de esta manera
var response = await getData();