Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Descargando información y creando nodos

12/28
Recursos

Aportes 90

Preguntas 39

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

El fetch() con async/await

const url = "https://platzi-avo.vercel.app/api/avo";

//web api
async function fetchData() {
  const response = await fetch(url),
  data = await response.json(),
  allItems = [];

  data.data.forEach((item) => {
    // create image
    const image = document.createElement("img");
    // create title
    const title = document.createElement("h2");
    // create price
    const price = document.createElement("div");

    const container = document.createElement("div");
    container.append(image, title, price);

    allItems.push(container);
  });

  document.body.append(...allItems)
}

fetchData();

MIS APUNTES 😎🤙🤙👌

//URL API
 const url = "https://platzi-avo.vercel.app/api/avo";


 /*Web API Fetch
 
 La utilizamos para traer recursos desde cualquier otro sitio web

 Lo unico que tenemos que pasarle es nuestra url
 
 1. Nos conectaremos al servidor

 */

window
    .fetch(url)
/*2. Procesar la respuesta y despues la convertimos en JSON
    Fetch es algo que nos devuelve una promesa asi que
    trabajaremos con promesas para obtener la respuesta
    y transformarla en JSON

*/
    .then(respuesta => respuesta.json())

 /*3.
 Luego de que convirtamos la respuesta en JSON lo que obtenemos
 ahora es informacion y la obtenemos concatenando otra promesa

 
 Cuando tengamos el JSON  tendremos esa informacion que
 nos servira para renderizar esa info en nuestro navegador*/
    .then(responseJson =>{

        const todosLosItems = [];
        /*recorremos cada uno de los elementos que estan en arrays
        con un forEach
        
        */

        responseJson.data.forEach(item => {
        /*atraves del parametro de la funcion del forEach accedemos
        a los elementos de la respuesta json*/

    //creamos nuestros elementos
        const imagen = document.createElement('img');
    
        const titulo = document.createElement('h2');
       
        const precio = document.createElement('div');
      
    // cremos el contenedor donde vamos a poner nuestros elementos

        const container = document.createElement('div');

    /*agregamos los elementos a un contenedor
    
        container.appendChild(imagen);
        container.appendChild(titulo);
        container.appendChild(precio);
    
    */

        container.append(imagen,titulo,precio);
        
    //agregamos el contenedor en nuestro body
        //document.body.appendChild(container);
        todosLosItems.push(container);
        
            console.log(item.name);
            
        });

        document.body.append(...todosLosItems)

    });

/*RESUMEN: NOS CONECTAMOS A UNA API QUE ES UN PUENTE CON LA INFORMACION 
  DE UN SERVIDOR Y ESE SERVIDOR NOS DEVUELVE ESA INFORMACION, Y UTILIZAMOS
  UN CICLO POR CADA UNO DE LOS ELEMENTOS QUE NOS DEVUELVE ESE SERVIDOR
  CREAMOS NODOS Y SE LOS AGREGAMOS AL FINAL A NUESTRO HTML*/

/*RETO PARA MEJORAR ESTE CODIGO  Y ES HACERLO CON ASYNC Y AWAIT EN VES 
  DE PROMESAS */```

Y si creamos creamos un fragmento de documento vacio el cual este listo para insertar nodo en el de la siguiente forma

let fragment = document.createDocumentFragment();
fetch(url)
	.then((res) => res.json())
	.then((data) => {
		//creamos el fragment
		let fragment = document.createDocumentFragment();

		data.data.forEach((item) => {
			let image = document.createElement('img');

			let title = document.createElement('h2');

			let price = document.createElement('span');

			const container = document.createElement('div');
			container.append(image, title, price);
			//agregamos los nodos al fragment y no al DOM directamente
			fragment.appendChild(container);
		});
		//solo renderizamos una sola vez el DOM
		document.body.append(fragment);
	});```

Por si hay alguno que se pregunta cómo hace Jonathan para ver en formato json lo que arroja la API directo en el navegador, hay extensiones para el navegador que son muy útiles para ello. En mi caso uso JSON Viewer y parece que el profe igual. Se habilita en la configuración del navegador y se busca desde extensiones. El repo de github es https://goo.gl/fmphc7. Espero les sirva.

Este es el curso que estaba esperando de Platzi para poder conectar todo lo básico con el curso profesional.

Recomiendo encarecidamente trabajar con Windows Subsystem for Linux para hacer cualquier práctica de programación, en serio, creanme, les va a ahorrar demasiados dolores de cabeza, si aún no sabes cómo instalar Windows Subsystem for Linux, puedes aprenderlo en el Curso de Prework: Configuración de Entorno de Desarrollo en Windows.
.
Dicho esto, aquí les dejo los pasos de la instalación para NodeJS para Linux y para Windows Subsystem for Linux (Node en su versión más actualizada)
.
Primero, actualicemos nuestros repositorios (es muy probable que les pida su contraseña):

sudo apt update && sudo apt upgrade

Ahora, añadimos el repositorio de NodeJS el cuál nos proveerá la versión más reciente (este traerá la versión 14, si quieres puedes revisar por la versión 15):

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

Ahora sí procedemos a instalar NodeJS:

sudo apt install nodejs

.
Esto te debería instalar NPM y NodeJS, para revisarlo, puedes ejecutar en tu terminal esto

node --version && npm --version

¡Así de fácil es instalar cosas en Linux!
.
Si quieres hacerlo en Windows entonces ve a la página de NodeJS y ejecuta su instalador (recomiendo la versión LTS) 😄

Puede ser que necesiten instalar create-snowpack-app para que funcione,
Así que pueden usar npm para instalar el paquete

npm install create-snowpack-app```

por qué no actualiza los freaking cambios en mi compu? instale snowpack con npm pero aun aí hago cambios y no actualiza los cambios en el browser, no sé nunca he utilizado snopack, hasta hoy ni sabía que existía

Tarea: Obtener información con async/away

Que clase mas deliciosa, pude aplicar todos los conocimientos de la ruta como lo fue NPM, JS, Asincronismo, etc. 😃

Por si a alguien le sirve, para detener el localhost desde la terminal basta con teclear crtl + c o cmd + c

Async / await y algunas cositas mas

const base_url = 'https://platzi-avo.vercel.app/';

const fetchData = async () => {
    const respuesta = await fetch(`${base_url}api/avo`);
    const datos = await respuesta.json();
    
    let todosItems = [];
    datos.data.forEach(item => {
        const imagen = document.createElement('img');
        imagen.src = `${base_url}${item.image}`;

        const titulo = document.createElement('h2');
        titulo.textContent = `${item.name}`;

        const precio = document.createElement('p');
        precio.textContent = `${item.price}`;

        const container = document.createElement('div');

        container.append(imagen, titulo, precio);

        todosItems.push(container);
    });
    
    document.body.append(...todosItems);
}

fetchData();

Estaba teniendo problemas para crear el proyecto con npx asi que lo instalé de forma global

npm install -g create-snowpack-app

despues ejecute

create-snowpack-app my-app --template snowpack-template-tailwind```

de esta forma me funcionó, yo uso windows

Si a alguien también le sucedió que no le refresca la página automáticamente y tiene que reiniciar el localhost para poder ver los cambios… Aquí les comparto la solución que a mí me funciono:

  1. Primero vamos a crear un nuevo archivo en nuestro proyecto llamado .env

  2. Luego, dentro de este archivo vamos a agregar las siguientes 2 líneas de código:

CHOKIDAR_USEPOLLING=true
FAST_REFRESH=false 

Ojo. El archivo .env lo debemos crear en la ruta principal de nuestro proyecto, es decir, que no debe estar dentro de ninguna carpeta.

  1. reiniciamos el localhost con las teclas CTRL + C y volvemos a ejecutar el npm start.

  2. Si todavía no se reflejan los cambios automáticamente en el navegador, entonces detenemos nuevamente el localhost y lo volvemos a ejecutar con el siguiente comando:

CHOKIDAR_USEPOLLING=true npm start

Con esto se debería solucionar el problema. Espero que les sea de ayuda 😃

No sé si les pasa pero después de conocer ya bien sobre react, volver a ver estas maravillas y decir wow react gracias por tanto.
Igual amó modificar el dom así con vanilla ❤️

Un poco más gráfico para entenderlo mejor 🤣

Hola:

Para los que no tiene instalado snowpack:

$ npm install -g snowpack

y para crear el proyecto usando los templates:

$ npm i -g create-snowpack-app

y sino quieres instalarlo de forma global (-g), puedes hacerlo sólo para desarrollo ( --save-dev)

Saludos 😃

AHHHH editor en tono claro :0!!!

Asi lo hice yo espero te ayude! 😄

Async/Await de la primera parte:

const direccionUrl = "https://platzi-avo.vercel.app/api/avo";
    const resultado = async () => {
        const respuesta = await fetch(direccionUrl)
         const responseJson = await respuesta.json()
        console.log(responseJson.data.forEach(element => {
            console.log(element.name);
        })
        );
    }

    resultado();

¿Alguien sabe que fuente utiliza el profesor en su editor?

Podemos usar map en vez de forEach. También me parece que una forma más directa de crear los elementos, ya con todos los atributos, es escribir los elementos con `` y agregarlos al contenedor

const url = "https://platzi-avo.vercel.app/api/avo"

window.fetch(url)
    .then(respuesta => respuesta.json())
    .then(responseJson => {
        let allItems = ''
        const container = document.querySelector("#container")
        responseJson.data.map(item => {
            allItems += `<div>
                <img src="https://platzi-avo.vercel.app/${item.image}" alt="${item.name}"/>
                <h2>${item.name}</h2>
                <p>${item.price}</p>
            </div>`
        })
        container.innerHTML = allItems
        }
    )

Para ver los objetos del api en forma ordenada, existe una extensión de Chrome llamada “JSON Viewer”

En Ubuntu intenté de todo para hacer andar el template del profesor, pero cuando intentaba levantar el server buscaba archivos que no existen y por consiguiente resultaba en 404s, de manera que lo estoy hacieindo en HTML, CSS y JS vanilla con async/await, similar al codigo de Sebastián Gonzales

Hice los pasos para descargar la plantilla y me la mostró como un HTML sin formato, no entiendo cuál es el problema aquí.

Qué debo hacer en caso de que no se me realice la actualización automática ?? No quiero estar cerrando y abriendo el server a cada rato XD

Alguien sabe como puedo solucionar esto? cuando trato de ejecutar el script me da error.

[email protected] MINGW64 ~/documents/platzi/dom (master)
$ npx create-snowpack-app workshop-1-fetch --template snowpack-template-tailwind
npx: installed 24 in 4.918s

  - Using template snowpack-template-tailwind
  - Creating a new project in C:\Users\mumv1\documents\platzi\dom\workshop-1-fetch
  - Installing package dependencies. This might take a couple of minutes.


> [email protected] postinstall C:\Users\mumv1\documents\platzi\dom\workshop-1-fetch\node_modules\esbuild
> node install.js


> undefined prepare C:\Users\mumv1\documents\platzi\dom\workshop-1-fetch
> husky install

C:\Users\mumv1\Documents\PLATZI\dom\workshop-1-fetch\node_modules\husky\lib\commands\install.js:22
        throw new Error(`.git can't be found (see ${customDirHelp})`);
        ^

Error: .git can't be found (see https://typicode.github.io/husky/#/?id=custom-directory)
    at Object.install (C:\Users\mumv1\Documents\PLATZI\dom\workshop-1-fetch\node_modules\husky\lib\commands\install.js:22:15)
    at Object.<anonymous> (C:\Users\mumv1\Documents\PLATZI\dom\workshop-1-fetch\node_modules\husky\lib\bin.js:56:19)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
    at internal/main/run_main_module.js:17:47
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! undefined prepare: `husky install`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the undefined prepare script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\mumv1\AppData\Roaming\npm-cache\_logs\2021-03-31T23_07_44_760Z-debug.log
(node:11412) UnhandledPromiseRejectionWarning: Error: Command failed with exit code 1: npm install --loglevel error
    at makeError (C:\Users\mumv1\AppData\Roaming\npm-cache\_npx\11412\node_modules\create-snowpack-app\node_modules\execa\lib\error.js:59:11)
    at handlePromise (C:\Users\mumv1\AppData\Roaming\npm-cache\_npx\11412\node_modules\create-snowpack-app\node_modules\execa\index.js:114:26)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async C:\Users\mumv1\AppData\Roaming\npm-cache\_npx\11412\node_modules\create-snowpack-app\createSnowpackApp.js:221:5
(Use `node --trace-warnings ...` to show where the warning was created)
(node:11412) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promis
e which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_u
nhandled_rejections_mode). (rejection id: 1)
(node:11412) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zer
o exit code.

![](

Acá les dejo una ayudita!

const url = "https://platzi-avo.vercel.app/api/avo";

// Web api
// Conectar con el servidor
async function fetchData() {
  const response = await fetch(url),
    // procesar la respuesta y converitrla a JSON
    data = await response.json(),
    allItems = [];
  // Renderiza la respuesta
  data.data.forEach((item) => {
    // create image
    const image = document.createElement("img");
    // create tittle
    const tittle = document.createElement("h2");
    //create price
    const price = document.createElement("div");
    //Que se cree no quiere decir que se agregue al DOM
    const container = document.createElement("div");
    container.append(image, tittle, price);

    allItems.push(container);
  });
  // por eso acá lo agregamos
  document.body.append(...allItems)
}

fetchData();```

Uno como hace para que la API le salga asi de bonita a mi me sale ilegible.

Al parecer tiene problemas con las dependencias este template:

Problema de Recargar la Página.

La solución que apliqué, es corriendo todo desde el root (~) en WSL, no funciona mediante /mnt

Aqui tengo una forma diferente a las que hizo el profesor para imprimir el array de objetos, tanto con fetch como con async/await.

const API = "https://platzi-avo.vercel.app/api/avo";

window
  .fetch(API)
  .then((response) => response.json())
  .then((response2) => {
    const dataArry = response2.data;

    console.group("Utilizando fetch")
    for (const item of dataArry) {
      console.log(item.name);
    }
    console.groupEnd()
  });

async function traerData() {
  const response = await fetch(API),
  objetData = await response.json()
  const items = objetData.data;

  console.group("Utilizando async/await")
  for (const item of items) {
    console.log(item.name);
  }
  console.groupEnd()
}

traerData()

Y por aqui, asi quedarian los ejercicios finales cuando creamos los diferentes elementos HTML con las dos parte de codigo (fect y async/await)

const API = "https://platzi-avo.vercel.app/api/avo";

window
  .fetch(API)
  .then((response) => response.json())
  .then((response2) => {
    const dataArry = response2.data;
    const allItems = [];

    console.group("Utilizando fetch");
    for (const item of dataArry) {
      // console.log(item.name);
      const image = document.createElement("img");
      const title = document.createElement("h2");
      const price = document.createElement("p");

      const container = document.createElement("div");
      container.append(image, title, price);

      allItems.push(container);
    }
    document.body.append(...allItems);
    console.groupEnd();
  });

async function traerData() {
  const response = await fetch(API),
    objetData = await response.json();
  const items = objetData.data;
  const allItems = [];
  console.group("Utilizando async/await");
  for (const item of items) {
    // console.log(item.name);
    const image = document.createElement("img");
      const title = document.createElement("h2");
      const price = document.createElement("p");

      const container = document.createElement("div");
      container.append(image, title, price);

      allItems.push(container);
  }
  document.body.append(...allItems);
  console.groupEnd();
}

traerData();

Mi código y como se visualiza el resultado (más abajo):

const baseURL = 'https://platzi-avo.vercel.app/';
const api = 'api/avo';

const resp = await window.fetch(baseURL+api);
const { data } = await resp.json();

// Arreglo de contenedores
const allItems = [];

data.forEach( item => {
    // Crear imagen
    const image = document.createElement('img');
    image.src = baseURL+item.image
    // Crear titulo
    const title = document.createElement('h2');
    title.textContent = item.name
    // Crear precio
    const price = document.createElement('div');
    price.textContent = item.price
    // Crear contenedor
    const container = document.createElement('div')
    container.append(image, title, price)
    container.style.textAlign = 'center';
    container.style.width = '350px';
    
    allItems.push(container)
});

// Agregar al body
document.body.append(...allItems)

Hola dejo mi código con Async/await.
Me adelante un poquitito y agregue el contenido a los elementos 😅

const URL = "https://platzi-avo.vercel.app"
const API = "/api/avo"

 const app = async (url) => {

    try{
        const response = await (await (window.fetch(url))).json()
        const elementsArray = [];
        
        response.data.map(item => {
            
            const {  name, image, price  } = item;
            
            const container = document.createElement("div")
            const titulo = document.createElement("h3")
            const imagen = document.createElement("img")
            const precio = document.createElement("p")

            titulo.textContent = name
            imagen.src = `${URL + image}`
            precio.textContent = `Precio: ${price}`

            container.append(titulo, imagen, precio)
            elementsArray.push(container)
        })

        document.body.append(...elementsArray)
    }
    catch(err){
        console.error(err.message)
    }
}

app(URL + API)

Esta es mi solución😁

const url = "https://platzi-avo.vercel.app/api/avo";

function create({ imageLink, titleLink, priceLink }) {
    const image = document.createElement('img');
    image.src = imageLink
    image.alt = `image of a ${titleLink}`
    const title = document.createElement('h2');
    title.innerText = titleLink
    const price = document.createElement('div');
    price.innerText = priceLink
    const container = document.createElement('div');

    container.append(image, title, price);
    document.body.append(container);
}

async function getData(link) {
    let list = []

    await fetch(link)
        .then(res => res.json())
        .then(resJson => list = [...resJson.data])

    list.forEach(elem => {
        console.log(elem)
        create({
            imageLink: elem.image,
            titleLink: elem.name,
            priceLink: elem.price
        })

    })
}
getData(url)

Resultado

es la segunda vez que veo el video y menos claro me queda ahora.... soy el único o es normal?
//Guardar la URL Del API
const url = "https://platzi-avo.vercel.app/api/avo";
//Web api
// Conectarmos al Servidor
// fetch lo que hace es traer informacion del servidor y procesarla
window
.fetch(url)
// Procesar la respuesta y convertirla en JSON
.then((response) => response.json())
//JSON -> Data -> Renderizar info en el Browser

.then((responseJson)=> {
  //Agregar todos los items de forma dinamica
  const todosLosItems = [];

  //Ciclo para por cada uno de los items que devuelve el servidor,
  //creamos nodos y se los agregamos al final de nuestro HTML
  responseJson.data.forEach(item => {            
    // Imprime los Items de la APi de Avocados
   // console.log(item.name) 
       
   //crear la imagen
        const imagen = document.createElement('img');
       //agregando al Body document.body.appendChild(imagen)
        
        //crear el titulo
        const title = document.createElement('h2');
        //document.body.appendChild(title)
       
        //crear el precio
       const price = document.createElement('div');
      //document.body.appendChild(price)

       const container = document.createElement('div')
       //Agrega la imagen, titulo, y precio al container
       container.append(imagen, title, price);

       //document.body.appendChild(container)

       //agregando todos los items con un Array
       todosLosItems.push(container);
   });
   //cuando acabes agregalos al Body
   document.body.append(...todosLosItems);
})

Les dejo por aca mi codigo, ya se puede visualizar el price y el name en pantalla

 //--------------------Intento de hacerlo con async y await------------------------//
    
    //se crea una funcion async con x nombre
    async function fetchData() {

        //dentro de ella se crea una constante con un nombre x (en este casi se llama response) la cual va a contener el fetch que en este caso es el API, se usa await porque queremos esperar que la funcion no continue hasta que se obtenga esta respuesta 
        const response = await fetch(url),

        //aqui se usa el mismo await por lo mismo, no podemos seguir sin esta variable, y lo que se hace aca es que se pasa la respuesta a json 
        api = await response.json(),

        //se crea un array donde iran todos los documentos 
        allItems = []
        
        api.data.forEach(nombres => {
          //  console.log(nombres.name);
        const nombreScreen = document.createElement("p");
        const texto= document.createTextNode(nombres.name);
        nombreScreen.append(texto);
        const precioScreen = document.createElement("p");
        const precio= document.createTextNode(nombres.price);
        nombreScreen.insertAdjacentElement("beforeend",precioScreen);
        precioScreen.append(precio)
        const containerScreen=document.createElement("div");
        containerScreen.append(nombreScreen);
        allItems.push(containerScreen)
        document.body.append(...allItems)
    })
        
    }

    fetchData()

Me encuentro con el problema que la pagina no me lee el script y ya no se donde buscar el problema

y cuando entro a ver que dice me sale que no se encuentra una respuesta

y yo solo sigo los pasos del profesor, ya revise el enlace del JSON y esta bien escrito el código esta igual al de la clase, si alguien tuvo el mismo error y pudo solucionar se lo agradecería que me explicara como

Me está costando entender un poco la parte donde el agrega el Item y después hace un ciclo para los Item, ahora bien, cómo se relaciona el item con la API? cómo sabe Javascript que al colocar Item.name se habla de la data del API?

Creo que me tocara ver varias veces este video, necesito instalar Jason y ver y entender como me conectare a la API y después tomare nota de como agregarlo al DOM.

Que bueno es tener clases donde podamos integrar de manera practica lo que se ha venido aprendiendo!
Excelente profesor!!

La clase con async/await y función recursiva para que la puedan analizar.

const URL = 'https://platzi-avo.vercel.app/api/avo'

//web api
// connect to server
async function fetchData() {
  const res = await fetch(URL)
  const data = await res.json()
  const array = data.data

  const dataCards = []
  let i = 0
  
  createElement()

// nodes creation
  function createElement () {
    if (array[i] === array[array.length]) {
      return dataCards
    } else {
      const image = document.createElement('img')
      const title = document.createElement('h2')
      const price = document.createElement('p')

      const container = document.createElement('div')
      container.append(image, title, price)
      dataCards.push(container)
      i++
      return createElement()
    }
  }

  document.body.append(...dataCards)
}

fetchData()

Mi versión de la tarea:

function crearFetch(){
    return new Promise(resolve =>{
        const fetch = window.fetch(url)
        resolve(fetch)
    })
}
async function cargarAppend(){
    const data = await crearFetch()
    const resJson = await data.json()
    const todosNodos = []
    // console.log(resJson)
     resJson.data.forEach(element =>{
         const img = document.createElement("img")
         const title = document.createElement("h2")
         const price = document.createElement("div")
         const container = document.createElement("div")
         container.append(img,title,price)
         todosNodos.push(container)
     })
     document.body.append(...todosNodos)
}

cargarAppend(); 

Yo casualmente estaba consumiendo una API de peliculas que encontre para un portfolio y me encontre con un problema, No se como consumir los datos en el DOM !!!

para desestructurarlo de una vez

getData()
async function getData(){
const result = await fetch(‘https://platzi-avo.vercel.app/api/avo’);
const { data } = await result.json();

       console.log(data)
   }

Si alguien tiene el problema, que no recarga la pagina. Lamento informarles que tiene que ver primero el curso: https://platzi.com/clases/prework-windows/

Se agradece mucho que nos enseñen buenas practicas como el método de pasar a un array cada container.

Llamada al API con Async/Await

// ASYNC / AWAIT
const fetchData = async () => {
  try {
    const respuesta = await fetch(url);
    const responseJson = await respuesta.json();

    console.log(responseJson);
  } catch (error) {
    console.log(error);
  }
};

fetchData();

Listo con asyc await:

const API_URL = 'https://platzi-avo.vercel.app/api/avo'

const fetchData = async () => {
  const response = await window.fetch(API_URL)
  const jsonResponse = await response.json()
  const data = jsonResponse.data
  const allItems = []

  for (const item of data) {
    const image = document.createElement('img')
    document.body.appendChild(image)

    const title = document.createElement('h2')
    document.body.appendChild(title)
    
    const price = document.createElement('div')
    document.body.appendChild(price)

    const container = document.createElement('div')
    container.append(image, title, price)

    allItems.push(container)
  }

  document.body.append(...allItems)
}

fetchData() 

mi codigo en async/await

const callApi = async (url)=>{
    try {
        const response = await window.fetch(url);
        const dataJson = await response.json();
        console.log(dataJson);
        
    } catch (error) {
        console.log('erro');
    }
    
}

Toda promesa debería tener un capturador de errores:

window
    .fetch(url)
    // procesar respuesta y convertir en json
    .then(response => response.json())
    // Json -> Data, renderizar items en la vista
    .then(responseJson => {
        responseJson.data.forEach(item => {
            const allItems = [];
            // crear imagen
            const image = document.createElement('img');
            // crear título
            const title = document.createElement('h2');
            // crear precio
            const price = document.createElement('div');
            // crear Contenedor
            const container = document.createElement('div');
            container.append(image, title, price);
            allItems.push(container);
        });
        document.body.appendChild(allItems);
    })
    // Capturar error
    .catch(err => console.log(`Ha ocurrido un error de tipo: ${err}`));

Hola hice dos funciones con async/await, ambas funcionaron 😄

const URL = "https://platzi-avo.vercel.app/api/avo"

const makeitems = (jsonData) =>{
    const allItemsFromAPI = []
    // console.log(jsonData.data)
    jsonData.data.forEach(item =>{
        // console.log(item.name)
        //crear imagen
        const imagen = document.createElement("img")
        //crear titulo
        const title = document.createElement("h2")
        //crear precio
        const price = document.createElement("div")

        const container = document.createElement("div")
        container.append(imagen,title,price)

        allItemsFromAPI.push(container)
    })
    document.body.append(...allItemsFromAPI)
}
const printAvocados = async () =>{
    try{
        const avocadosData = await fetch(URL)
        .then(response => response.json())
        .then(data => makeitems(data))
        // makeitems(avocadosData)
    }catch(error){
        console.error(error)
    }finally{
        console.log("Recibiste todos los tipos de paltas :D")
    }
}

printAvocados()

Y esta es la otra:

const URL = "https://platzi-avo.vercel.app/api/avo"

const makeitems = (jsonData) =>{
    const allItemsFromAPI = []
    // console.log(jsonData.data)
    jsonData.data.forEach(item =>{
        // console.log(item.name)
        //crear imagen
        const imagen = document.createElement("img")
        //crear titulo
        const title = document.createElement("h2")
        //crear precio
        const price = document.createElement("div")

        const container = document.createElement("div")
        container.append(imagen,title,price)

        allItemsFromAPI.push(container)
    })
    document.body.append(...allItemsFromAPI)
}


const printAvocados = async () =>{
    try{
        const avocadosData = await fetch(URL), 
        data = await avocadosData.json(),
        print = await makeitems(data)
        // console.log(data)
    }catch(error){
        console.error(error)
    }finally{
        console.log("Recibiste todos los tipos de paltas :D")
    }
}

printAvocados()

ECMAScript 6 async / await

async function fetchData(){
  try {
    console.log('Calling...')
    const response = await fetch(URL),
    responseJson = await response.json()
    const allItems = [];
    responseJson.data.forEach((item) => {
      console.log(item.name);
      const title = document.createElement('h3');
      const price = document.createElement('div');
      const image = document.createElement('img');
      const container = document.createElement('div');
      container.append(title,price,image);

      allItems.push(container);

    });
      document.body.append(...allItems);
  } catch (err) {
    console.log(err)
  };
};
fetchData();

Yo lo hice así, tal vez sea un poco más largo pero es más modular y fácil de entender.

const url = "https://platzi-avo.vercel.app/api/avo";

asyncfunctionfetchData() {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

functioncreateCard(data) {
  const img = document.createElement("img");
  const title = document.createElement("h2");
  const price = document.createElement("div");

  const card = document.createElement("div");
  card.append(img, title, price);

  return card;
}

asyncfunctioncreateCardList() {
  const cardList = [];
  const data = await fetchData();

  data.data.forEach((item) => {
    const card = createCard(item);
    cardList.push(card);
  });

  document.body.append(...cardList);
}

createCardList();
const urlApi = "https://platzi-avo.vercel.app/api/avo"

const fetchData = async() => {
    const data = await fetch(urlApi)
    const dataJson = await data.json()

    const items = []
    dataJson.data.forEach( element => {
        const box = document.createElement('div')
        const imagen = document.createElement('img')
        const title = document.createElement('h1')
        const price = document.createElement('p')

        box.append(imagen, title, price)
        items.push(box)
    });
    document.body.append(...items)
}
fetchData()

Quise hacer aparte la lógica de pintar los datos 😄

//Ejercicio con Async / Await

// mi url donde estan mis datos.
const url = "https://platzi-avo.vercel.app/api/avo";

	// Creo mi funcion asincrona la cual me traera mis datos.
async function traerDatos(url) {

	// creo una variable y espero la información que trae mi fetch y la guardo en la variable
	let response = await fetch(url)

	// creo una variable donde guardaré la información parseada a JSON
	let data = await response.json()

	// para ver si voy bien xd
	console.log(data)

	//pinto los datos llamando mi función
	pintarDatos(data.data)
}

// Hago una función aparte para la lógica de pintar los datos
function pintarDatos(data) {
	const allItems = []

	for(let i of data){
		const img = document.createElement("img")
		const title = document.createElement("h2")
		const parrafo = document.createElement("p")
		const container = document.createElement("div")

		container.append(img,title,parrafo)
		allItems.push(container)
	}
	document.body.append(...allItems)
}

// llamo mis datos :D 
traerDatos(url)
const fetchData  =  async (API) => {
    const conectar = await window.fetch(API);
    const respuesta = await conectar.json();
    try{
        respuesta.data.forEach((items) =>{
            console.log(items.name);
        })
    }catch(error){
        console.error(error);
    }
}

fetchData(url);

Feliz porque pude convertir a async

Se me presentaron unos errores a la hora de iniciar el app,
tenia este error:

[16:38:29] [snowpack] ENOENT: no such file or directory, open '/my-app/node_modules/.cache/snowpack/build/[email protected]/tailwindcss/dist/base.css'

Encontre una solución en github, segun el usuario que posteo la respuesta al problema hubo un cambio en las ultimas versiones de snowpack, se puede arreglar modificando el archivo de configuración añadiendole esto:

  // snowpack.config.js  
  packageOptions: {  
    source: 'remote',  
  },  

Si a alguien mas le aparece desde la dirección del localhost localhost:8080 al abrirla en el buscador que no puede acceder al sitio, prueben accediendo con la dirección Network ```
172.24.255.78:8080

Método utilizando async y await:

async function getDataFromAPI(){
    let response = await fetch(URL);

    if(!response){
        throw new Error(`HTTP error! status: ${response.status}`);
    }else{
        const data = await response.json();
        data.data.forEach(element => {
        console.log(element.name);
        });
    }
}

getDataFromAPI()
.catch(e => {
  console.log('There has been a problem with your fetch operation: ' + e.message);
});

El reto con async await

const API= "https://platzi-avo.vercel.app/api/avo";

const ws1_async = async (url_api)=>{
    try {
        //connect server
        const response = await window.fetch(url_api);
        //process and convert JSON
        const data=await response.json();
        //JSON -> Data show information in brower
        const allItems=[];
        data.data.forEach((item)=>{
            // create image
            const image = document.createElement("img");
            // create title
            const title=document.createElement("h2");
            // create price
            const price=document.createElement("div");
            const container=document.createElement("div");
            container.append(image,title,price);
            allItems.push(container);
        });
        document.body.append(...allItems);
    } catch (error) {
        console.error(error);
    }
}

ws1_async(API); 

Señores si usan Ubuntu primero deben installar npm i snowpack-template-tailwind y después crean el template con este comando npx create-snowpack-app my-app --template snowpack-template-tailwind a mi me funcionó asi.

Desde el navegador también pueden abrir el devTools con: F12 si estan en windows.

Con async/await

const url = "https://platzi-avo.vercel.app/api/avo"

const fetchData = async url => {
    try {
        const response = await fetch(url)
        const responseJson = await response.json()
        const todosLosItem = []

        responseJson.data.forEach(item => {
            // crear imagen
            const imagen = document.createElement('img')
            // crear titulo
            const title = document.createElement('h2')
            // crear precio
            const price = document.createElement('div')

            const container = document.createElement('div')
            container.append(imagen, title, price)

            document.body.appendChild(container)

            todosLosItem.push(container)
        })
        document.body.append(...todosLosItem)
    } catch (error) {
        throw new Error(error)
    }
    
}

fetchData(url)
const url = "https://platzi-avo.vercel.app/api/avo";

// Web API
//1 Conectarnos al servidor
//Queda de reto trabajar con async/await
window
    .fetch(url)
//2 Procesar la respuesta y convertirla en JSON
    .then((respuesta) => respuesta.json())
//3 JSON ---> Data ---> Renderizar info browser
    .then(responseJson => {
        const todosLosItems = [];
        console.log(responseJson);
        responseJson.data.forEach((item) => {//De esta forma me traigo cada item de la API.
            console.log(item.name);
        //Crear imagen
        const imagen = document.createElement('img');
        document.body.appendChild(imagen);

        // Crear título
        const title = document.createElement('h2');
        document.body.appendChild(title);

        // Crear precio
        const price = document.createElement('div');
        document.body.appendChild(price);

        // Quiero que todo lo anterior esté dentro de un div
        const container = document.createElement('div');
        container.append(imagen, title, price);
        todosLosItems.push(container);
        });
        document.body.append(...todosLosItems);
    })

Tarea con async/await

const URL = 'https://platzi-avo.vercel.app/api/avo';

const fetchAvo = async (URL) => {
    try{
        const response = await window.fetch(URL);
        const responseJSON = await response.json();
        const allItems = [];

        responseJSON.data.forEach(item => {
            //crear contenedor
            const container = document.createElement('div');
            //crear imagen
            const imagen = document.createElement('img');
            //crear titulo
            const title = document.createElement('h2');
            //crear precio
            const price = document.createElement('div');


            container.append(imagen,title,price);
            allItems.push(container);
            
        });
        document.body.append(...allItems);

    }catch{
        console.log(error);
    }
}

fetchAvo(URL);

no encuentro la guia para instalar node js

Usando async-await con Try-catch 👽😊

const API = 'https://platzi-avo.vercel.app/api/avo';

const fetchData = async (url_api) => {
    try {
        const DATA = await fetch(url_api).then((RES_JSON) => RES_JSON.json());
        const ALL_ITEMS = [];
        
        DATA.data.forEach(element => {
            const image = document.createElement('img');
            const title = document.createElement('h2');
            const price = document.createElement('div');

            const containter = document.createElement('div');
            containter.append(image, title, price);

            ALL_ITEMS.push(containter);
        });
        document.body.append(...ALL_ITEMS);
    } catch (error) {
        console.error(error);
    }
}
fetchData(API);

Con async/ await + comentarios

console.log('Happy hacking 😄')

const url = `https://platzi-avo.vercel.app/api/avo`

const getAvo = async ()=>{
  const response = await fetch(url)
  const {data} = await response.json()
//create items as array empty
  const items = []
    data.forEach( n =>{
        console.log(n.name)
        //Create Elements
        const img = document.createElement('img')
        const title = document.createElement('h2')
        const price = document.createElement('div')
        //Create container
        const container = document.createElement('div')
        //Add elements to container
        container.append(img, title, price)
        //Add container to conts items
        items.push(container)

        })
        //Add to DOM items, we can use spread operator
        document.body.append(...items)

  return data
}
getAvo()

que gran vista del curso
https://platzi.com/cursos/dom/

platzi-avo.vercel.app/api/avo

Genial

Explicaste muy bien el proceso de fetch, estoy aprendindo a usarlo y aun así me ha quedado más claro con tu explicacion ^_^

Aquí un snippet de mi código con arrow function async/await

Les dejo mi version del fetch() con async/await en arrow function y con comentarios.

const url = 'https://platzi-avo.vercel.app/api/avo';

const fetchData = async () => {
	//1.-Conectarnos al servidor
	const respuestaDelApi = await fetch(url);
	//2.-Procesar respuesta a JSON
	const respuestaJSON = await respuestaDelApi.json();
	//3.-Crear array contenedor de Items
	const todosLosItems = [];

	//4.-ForEach para recorrer los items y...
	respuestaJSON.data.forEach((el) => {
		//crear imagen
		const imagen = document.createElement('img');
		//crear titulo de
		const titulo = document.createElement('h2');
		//crear precio
		const precio = document.createElement('div');
		//crear div contenedor para los elementos creados
		const contenedor = document.createElement('div');
		//meter al contenedor los elementos creados
		contenedor.append(imagen, titulo, precio);
		//meter en el array de todosLosItems el contenedor con los elementos creados
		todosLosItems.push(contenedor);
	});

	//agregar al body todos los elementos creados a través del array todosLosItems con spread opperator
	document.body.append(...todosLosItems);
};

//Invocar función
fetchData();
const url ='https://platzi-avo.vercel.app/api/avo'

window
// conectarnos al servidor
    .fetch(url)    
// Procesar la respuesta y convertirla en json
    .then(response => response.json())
// Json -> data -> renderizar informacion browser
    .then(( { data } ) => {
        const container = document.getElementById('root') //agregue un div con un id de root
        data.forEach(element => {
            const containerElements = document.createElement('div')
            const title = document.createElement('h2')
            
            const image = document.createElement('img')
            
            const price = document.createElement('p')
            
            containerElements.append(image, title, price)

            container.appendChild(containerElements)
        });

        console.log(container)
       
    });```

👌

Agrega cada uno de los nombres de la API y los crea a cada uno en un <li>.

Ejemplo del minuto 11.52 pero con Async - await 😃

const API_URL = "https://platzi-avo.vercel.app/api/avo";
window.fetch(API_URL);

const obtenerNombre = async function () {
  const respuesta = await fetch(API_URL);
  const respuesta2 = await respuesta.json();
  respuesta2.data.forEach((item) => {
    console.log(item.name);
  });
};
obtenerNombre();

Acá está mi aporte. async await poniendo los contenedores en una seccion y usando insertAdjacentElement para insertar dicha seccion:

const url = "https://platzi-avo.vercel.app/api/avo"
const todosLosItems = []
const aguacates = document.createElement('section')
const parrafoReferencia = document.querySelector('p.mt-16.text-xl.leading-7.text-gray-500.underline')


//fetch - web API
const conectarseServer =  async() => {
    //Conectarnos al server
    const respuesta = await fetch(url)
    //procesar la respuesta y convertirla en JSON
    const respuestaJson = await respuesta.json()
    //JSON -> data -> Renderizamos info en el browser
    respuestaJson.data.forEach((aguacate) => {
        //Crear imagen, titulo y precio
        const imagen = document.createElement('img')
        const titulo = document.createElement('h3')
        const precio = document.createElement('p')
        const container = document.createElement('div')

        //append imagen, precio y titulo
        container.append(imagen, titulo, precio)

        //Hacer push del contenedor a todos los items
        todosLosItems.push(container)
    })
    aguacates.append(...todosLosItems)
    parrafoReferencia.insertAdjacentElement('beforebegin', aguacates)
}
conectarseServer()
const url = "https://platzi-avo.vercel.app/api/avo";
async function fetchData() {
    const allItems= []
    const response = await fetch(url)
    const responseJS = await response.json()
    // console.log(responseJS.data);
        responseJS.data.map(item =>{
        //    console.log(item.name)
        const image = document.createElement('img')
        const title = document.createElement('h2')
        const price = document.createElement('div')
        
        const container = document.createElement('div')
        container.append(image, title, price);
        allItems.push(container);
        
        })
        // console.log(allItems);
        document.body.append(...allItems)
}

fetchData()```
  • Con async/await:
const url = "https://platzi-avo.vercel.app/api/avo";

const fetchData = async () => {
    const response = await fetch(url);
    const responseJson = await response.json();

    try {
        const allOfItems = [];

        responseJson.data.forEach((item) => {
        const image = document.createElement('img');
        const title = document.createElement('h2');
        const price = document.createElement('p');

        const container = document.createElement('div');
        container.append(image, title, price);

        allOfItems.push(container)
    });

    document.body.append(...allOfItems);
    } catch(error) {
        console.error(error.message);
    }
}
fetchData()