Usando el módulo HTTP para consumir nuestro backend

Clase 15 de 21 • Curso de Server Side Rendering con Nuxt 2

Carlos Perilla

student•

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:

Sobre desestructurar: https://medium.com/@pyrolistical/destructuring-nested-objects-9dabdd01a3b8
Data Fetching: https://nuxt.com/docs/getting-started/data-fetching

Carlos Perilla

student•

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.

Emanuel Borbon

student•

Tambien Nuxt 3 mejoro esto para solo usar useFetch(url) que es lo mismo que useAsyncData + $fetch