Usando el módulo HTTP para consumir nuestro backend

Curso de Server Side Rendering con Nuxt 2

Clase 15 de 21

Clase 15 / 21

Comentarios (1)1 comentarios

Carlos Perilla

Hace 4 años

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

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

Hace un año

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

Usando el módulo HTTP para consumir nuestro backend

Progreso del curso

Fundamentos de NuxtJS

Rutas y Componentes con NuxtJS

Backend con Airtable y Netlify Functions

Consumo de nuestro backend con Netlify

Cierre del curso