1

Tengo toda mi aplicación en html y javascript conectada a la constante bugsToRender, que recibe un json de bugs por default en caso de que el localStorage esté vacío. Antes lo hacía llamando al array, pero ahora necesito hacerlo con async await, sin embargo no funciona, no me muestra nada.

const fetchOrLocal = async () => {
const res = await fetch('/bugsDefault.json')
const data = await res.json()
return JSON.parse(localStorage.getItem('bugs')) || data;
}

export const bugsToRender = await fetchOrLocal()
console.log(bugsToRender)

PD: necesito sí o sí exportar la constante.

1
  • puedes exportar una constante, pero debiera ser una promesa y en los demás módulos obtener los bugs con bugsToRender.then(bugs=>...) El top level await todavía está en la adolescencia. Hasta hace poco la exportación como la estás planteando sólo era viable para el default y no para named exports
    – ffflabs
    el 17 mar. 2022 a las 3:35

1 respuesta 1

1

Para utilizar funciones js desde otro archivo, es necesario implementar unos pequeños conceptos como funciones asincronas que tiene como finalidad esperar a que me traiga la información y luego continúa. Personalmente para realizar esos procesos utilizaría en un archivo como controller.js

const setBugs = () => {
  // pasamos al localStorage en formato json el dato
  //también puedes recibir como parámetro la data que quieres guardar
  localStorage.bugs = JSON.stringify([
    { id: '1', name: 'bug1' },
    { id: '2', name: 'bug2' },
    { id: '3', name: 'bug3' },
  ])
}

const getBugs = async () => {
  //capturamos lo que hay en el localStorage
  let data = await localStorage.bugs;
  //volvemos a llenar data correctamente
  //si existe algún valor en data entonces devuelve data en json de lo contrario devuelve array vacio
  data = await data ? JSON.parse(data) : [];
  return data;
}


module.exports = {
  setBugs,
  getBugs
};

Y llamaría el archivo importándolo, destructurando los métodos y variables que me devuelve y claramente usandolas.

// Éste va a ser el archivo de donde vas a llamar a ese otro que hace como controlador
// importamos el archivo y destructuramos las variables que se exportan
import {
  setBugs,
  getBugs
} from "./controller.js";

//por último usas la constante
const setData = () => setBugs();

const getData = async () => {
  let bugs = await getBugs();
  console.log(bugs);
}

const executeFunctions = async () => {
  await setData();
  getData();
}

executeFunctions();

De esa manera se usan, sin embargo busca documentación sobre funciones asincronas y como lo mejor está en ingles asynchronous functions. Un gran saludo, quedo atento...

1
  • Bueno te agradecería que si fue de ayuda la respuesta por favor marcarla como resuelta. Un saludo.
    – Weizman
    el 18 mar. 2022 a las 2:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.