En mi repository.js tengo lo siguiente:
async getAllContactRequests() { return new Promise(() => { axios .get("http://127.0.0.1:8000/api/contactRequests", { headers: { "Authorization": "Bearer " + sessionStorage.getItem("user_token") } }) }) }En mi componente Vue tengo:
<script> import repository from "@/api/repository"; export default { name: "posts-index", data() { return { apiData: null, }; }, async mounted() { console.log("This prints"); this.apiData = await repository.getAllContactRequests().then(result => result.data); console.log("This doesn't print"); }, }; </script>No obtengo los datos de la promesa, y cada línea después de la llamada a la función api no se ejecuta. ¿Qué estoy haciendo mal?
Suponiendo que la API devuelve datos JSON, puede refactorizar los códigos anteriores en:
async getAllContactRequests() { return axios .get("http://127.0.0.1:8000/api/contactRequests", { headers: { "Authorization": "Bearer " + sessionStorage.getItem("user_token") } }) }Esto se debe a que Axios devuelve Promise y no es necesario envolverlo de forma redundante en Promise.
Para consumir los datos de respuesta, simplemente espera la solicitud de la API:
import repository from "@/api/repository"; export default { name: "posts-index", data() { return { apiData: null, }; }, async mounted() { const response = await repository.getAllContactRequests() if (response && response.data) { this.apiData = response.data } }, };