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