Creo que es mejor dividir los comandos axios y los componentes vue.
Esta es mi estructura de directorios:
src api - products.js components - Products.vue
products.js
import axios from 'axios'; const listProducts = () => { const headers = { "Content-Type": "application/json" }; let url = "http://localhost:8001/api/v1/products"; const response = axios.get(url, headers); return response.data } export default { listProducts, }
Products.vue
:
<template> <div>{{ products }}</div> </template> <script> import { listProducts } from "@/api/products.js" export default { data () { return { products: {}, } }, created() { this.getProducts(); }, methods: { getProducts() { this.products = listProducts(); } } } </script>
Pero this.products
no está definido. Probé algunas cosas con async y await, pero nada funciona.
¿Y cuál sería la mejor práctica en vue3?
axios.get()
devuelve una Promise
, por lo que la response
en la siguiente línea es en realidad una Promise
(no la respuesta de Axios en sí):
const listProducts = () => { ⋮ const response = axios.get(url, headers); return response.data // ❌ `response` is a `Promise` }
Para obtener la respuesta, puede esperar el resultado de la llamada axios.get()
:
👇 const listProducts = async () => { ⋮ 👇 const response = await axios.get(url, headers); return response.data }
De manera similar, esta función listProducts()
actualizada ahora devuelve una Promise
porque es async
. Su componente ahora debe esperar el resultado de listProducts()
:
// Products.vue export default { ⋮ methods: { 👇 async getProducts() { 👇 this.products = await listProducts(); } } }