Usando el módulo HTTP para consumir nuestro backend
Contenido del curso
Carlos Perilla
Carlos Perilla
Emanuel Borbon
Si estas usando Nuxt 3, recomiendo usar useAsyncData.
Mi codigo:
<script setup> const articleContent = reactive({ articles: [], }) const url = 'http'+'://localhost:9999/.netlify/functions/articles' // Desestructuramos data, y el proxy value, para obtener el proxy articles. const { data: {value: { articles }}} = await useAsyncData('articles', () => $fetch(url)) onMounted(async () => { articleContent.articles = articles.map((a) => ({ // Hacemos copia de los datos en a ...a, // Sobreescribimos author, date y cover. // Para tener un acceso más directo a los datos. author: a['author-name'][0], date: new Date(a.updated), cover: a.cover[0]?.thumbnails.large.url, })) }) </script>
Más info:
Una corrección, el async en la función flecha dentro del ciclo de vida onMounted, es irrelevante, no es necesario.
Así que es un tipo.
Tambien Nuxt 3 mejoro esto para solo usar useFetch(url) que es lo mismo que useAsyncData + $fetch
