Así que este no es un problema técnico, sino más bien la cuestión fundamental.
async getBestServer() { await axios .get("https://api.gofile.io/getServer") .then((response) => { (this.server = response.data.data.server); console.log("on axios = " + this.server); }) .catch((error) => console.log(error)); console.log("on data = " + this.server); },Traté de obtener una solicitud en este archivo go api (es público, así que está bien), luego quiero almacenarlo en mi objeto de datos, lo que confundo aquí es lo que realmente hace async/await en esta función. lo que sé es await esperará a que axios establezca la respuesta a los datos, luego ejecute el segundo registro de la consola a continuación, pero ¿qué sucede si no uso await? ¿Por qué el javascript no puede esperar a que axios establezca los datos primero? Quiero decir, ¿no es así como funciona Synchronus, verdad?
Agradezco si me da una explicación simple, no solo responda con una redirección a un artículo porque he leído muchos de ellos, pero aún así me confundo con esta función que hice.
Gracias.
El patrón async / await es una alternativa fácil de leer pero a prueba de errores al patrón then/catch que ha utilizado.
Básicamente, en lugar de escribir:
getBestServer() { axios .get("https://api.gofile.io/getServer") .then((response) => { (this.server = response.data.data.server); console.log("on axios = " + this.server); }) .catch((error) => console.log(error)); console.log("on data = " + this.server); } Puede hacer lo mismo con async / await , pero de forma imperativa:
async getBestServer() { try { const response = await axios.get("https://api.gofile.io/getServer"); this.server = response.data.data.server; console.log("on axios = " + this.server); } catch (error) { console.log(error) } } Como puede ver, en el primer fragmento, el último console.log se ejecutará inmediatamente cuando se genere el get . Sin embargo, dado que la solicitud HTTP tomaría un tiempo (con respecto a la ejecución del script), se vuelve confuso "esperar" hasta que se hayan recibido los datos reales.
En el segundo fragmento, magic- await hace esto "esperar" por ti. Mucho más fácil de mantener, mucho más fácil de entender lo que hace el código, pero mucho menos error debido al código sucio.
La claridad de la diferencia se vuelve aún mayor si necesita conectar en cascada dos o tres llamadas.
El código antiguo se vería así:
getBestServer() { axios .get("https://api.gofile.io/getServer") .then((response1) => { (this.server = response1.data.data.server); console.log("on axios = " + this.server); axios.get("https://another-service") .then(response2 => { console.log("second call served...") }) .catch(error => console.log(error)) }) .catch((error) => console.log(error)); }Bastante desordenado, ¿no?
Sin embargo, puede aprovechar async / await , por lo que se convertiría en:
async getBestServer() { try { const response1 = await axios.get("https://api.gofile.io/getServer"); this.server = response.data.data.server; console.log("on axios = " + this.server); const response2 = await axios.get("https://another-service"); console.log("second call served...") } catch (error) { console.log(error) } }Bonificación: ¡una sola captura de error sin ningún esfuerzo!
Javascript es asíncrono de un solo subproceso, cada vez que envía una solicitud al servidor, tiene que esperar, primero para llegar al servidor y luego para obtener una respuesta del servidor, y hacer que ese único subproceso espere pausará todo el proceso. Entonces, para minimizar el tiempo perdido en la espera, Javascript pasa a hacer otras cosas antes de que la respuesta regrese. Pero habrá situaciones en las que necesite esperar algo, en esa situación, al marcar la llamada api con esperar, Javascript sabe que primero debe esperar la respuesta y luego pasar al siguiente paso en esa función.