Estoy construyendo a partir de una aplicación React bifurcada. Hay un módulo de dependencia que se basa en un par de archivos json estáticos para mapear y exportar un par de constantes que se consumen en los componentes React de la aplicación. En lugar de depender de estos archivos json estáticos, usamos una API como fuente. En este momento, mi proceso de compilación es obtener el json y transformarlo para generar nuestros archivos json personalizados, que luego se consumen durante el proceso de compilación.
En cambio, quiero que el proceso se realice del lado del cliente.
export const GALAXY = async () => { const result = await fetch(JSON , { headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' } }); if (result.ok) { console.log('GALAXY LOADED') return result.json(); } else { console.log('GALAXY FAILED') return undefined } }Parece que cualquier cosa que dependa de una función async/await solo devolverá una Promesa. De los documentos:
Return resolved promise from async function Async functions always return a promise. If the return value of an async function is not explicitly a promise, it will be implicitly wrapped in a promise.La mayoría de los ejemplos que he encontrado muestran alguna variación del patrón .then:
const galaxy = Promise.resolve(GALAXY()).then((value) => { console.log(value); });pero si lo intento
const galaxy = Promise.resolve(GALAXY()).then((value) => { return value }); console.log(galaxy); Me Promise{pending}
Espero evitar reescribir un montón de código no asíncrono. Tenemos un archivo TS que es importado por varios componentes de React:
import TokenMints from './token-mints.json'; export const TOKEN_MINTS: Array<{ address: PublicKey; name: string; }> = TokenMints.map((mint) => { return { address: new PublicKey(mint.address), name: mint.name, }; });Entonces, ¿cómo puedo obtener de la API de JSON y pasar los datos a esta constante no asíncrona para que pueda usarse en el resto de la aplicación?
Si tienes algo como esto:
const example = async () => { return true }Luego, en cualquier lugar que lo llame o lo use, dará como resultado una promesa, así es como funciona async.
example().then(() => { // any code here will execute after the promise resolved } // any code here can not directly use the promise data as it's not resolved yet.El código dentro y fuera de then se ejecutará en paralelo, o al menos el código fuera continuará ejecutándose mientras se resuelve la promesa y una vez que finalmente se resuelva, ejecutará el código dentro de then.
Alternativamente, puede usar await.
const data = await example() // this forces all code execution to wait for the promise to resolve // code here will not execute until that promise resolvedTienes que usar correctamente async/await.
Varias posibilidades a tener en cuenta
Obtenga el JSON mediante una operación sincrónica XMLHttpRequest . Sin embargo, el uso de este tipo de solicitudes sincrónicas en el hilo principal está mal visto ( nota ).
Convierta la fuente de JSON a JavaScript en el servidor (si es necesario, en muchos o en la mayoría de los casos, JSON es JavaScript válido), asígnelo a una variable global e inclúyalo en la sección principal de la página del cliente usando etiquetas <script> .
Una variación de (2): convertir el JSON en un archivo de módulo en el servidor que exporta los datos JSON convertidos a la fuente JavaScipt, que el código del cliente incluye como un módulo y desde el cual importa los datos como un objeto JavaScript.
Si el código del cliente usa los datos después de esperar un evento como DOMContentLoaded (luego llamar a una función main en lugar de escribir la aplicación en código de nivel de archivo), puede prometer la llegada del evento DomContentLoaded y pasarlo a través Promise.all junto con el promesa de galaxy antes de llamar a main , en la línea de
Promise.all( new Promise( resolve=> document.addEventListener("DOMContentLoaded", resolve) ), galaxy ).then( data => main( data[1])); // passing galaxy value Acerca de async
Como ya se notó, las funciones async devuelven una promesa para el valor devuelto sintácticamente en el cuerpo de la función, porque las funciones async regresan de forma síncrona cuando se las llama, sin esperar a que se complete ninguna operación asíncrona realizada en el cuerpo de la función. Dado que JavaScript tiene un solo subproceso, la persona que llama no se pone en espera hasta que se hayan llevado a cabo todas las operaciones, y debe volver al bucle de eventos para que se ejecuten otras piezas de código JavaScript.