¿Cómo devolver la respuesta de una llamada asincrónica en JavaScript?

JavaScript es un lenguaje de programación de subproceso único y la programación asincrónica es un concepto fundamental en torno al cual se construye el lenguaje. Hay tres métodos para manejar las llamadas asincrónicas integradas en JavaScript, como se muestra a continuación:

• Funciones de devolución de llamada
• Promesas y manejo de promesas con el método .then() y .catch()
• Funciones asíncronas de estilo ES6+/ESNext usando await

En este artículo, discutiremos cómo lidiar con llamadas asincrónicas en todas las formas mencionadas anteriormente. Usaremos el módulo de solicitud proporcionado en Node.js para solicitar datos JSON de la API DOG CEO del sitio web que devuelve un enlace URL para una imagen de perro aleatoria en formato JSON.

1. Usando una función de devolución de llamada:

   // Callback method const request = require('request'); const url ='https://dog.ceo/api/breeds/image/random';    function callback(res, body) {      console.log(JSON.parse(body)); }    function getData(callback) {        // Using the request module to request     // data asynchronously     request(url, (err, res, body) => {         if (err) throw err;         callback(res, body);     }); }    // Here we call the getData function // with the callback function  getData(callback); console.log('asynchronous is awesome');

   Producción:

   asynchronous is awesome {
     message: 
   'https://images.dog.ceo/breeds/vizsla/n02100583_11450.jpg',  
     status: 'success'
   }
   

   Explicación: en este método, solicitamos la API para datos JSON y realizamos funciones en los datos mediante funciones de devolución de llamada. Para facilitar la comprensión, simplemente registramos los datos recibidos en la consola, pero se pueden realizar otras funciones. Todo este proceso ocurre de forma asíncrona. El comando console.log('asynchronous is awesome');, aunque se coloca después de la llamada a la función getData, se ejecuta antes de que se complete getData.

2. Usando Promesas con el método .then() y .catch():

   // Promise with then catch const promise = new Promise((resolve, reject) => {     request(url, (err, res, body) => {         if (err) return reject(err);         try {             resolve(JSON.parse(body));         } catch(error) {             reject(error);         }     }); });    promise.then((data) => {     console.log(data); }) .catch((err)=>{     console.error(err); });    console.log('asynchronous is awesome');

   Producción:

   asynchronous is awesome {
     message:
   'https://images.dog.ceo/breeds/pointer-germanlonghair/hans2.jpg',
     status: 'success'
   }
   

   Explicación: el módulo de solicitud no devuelve promesas de forma nativa. Por lo tanto, usamos el constructor de promesas para envolver la posible respuesta recibida de la solicitud HTTP en una promesa nativa. Esta promesa luego se maneja con el método .then() y .catch(). Las ventajas de utilizar este método son múltiples. En primer lugar, resolver las promesas con el método .then() y .catch() es la mejor práctica para el manejo de errores y nos ayuda a escribir código con una mentalidad de error primero. En segundo lugar, los módulos de JavaScript se están adaptando a las promesas de soporte y están descartando el manejo de errores de estilo de devolución de llamada anterior. Los módulos más nuevos como Axios, fetch, etc. solo admiten promesas. Una vez más, las promesas son una forma relativamente nueva de escribir código asíncrono. Esto se prueba por el hecho de que el comandoconsole.log('asynchronous is awesome');aunque se coloca después de la llamada al controlador de la promesa, se realiza antes de que se complete la promesa.

3. Funciones asincrónicas de estilo ES6+/ESNext usando await:

   const getData = async() => {     let data = await new Promise((resolve, reject) => {         request(url, (err, res, body) => {             if (err) return reject(err);             try{                 resolve(JSON.parse(body));             } catch(error) {                 reject(error);             }         });     });        try{         console.log(data);     }     catch(err){         console.error(err);     } }    getData(); console.log('asynchronous is best');

   Producción:

   asynchronous is awesome {
     message: 
   'https://images.dog.ceo/breeds/sheepdog-shetland/n02105855_15196.jpg',
     status: 'success'
   }
   

   Explicación: Las funciones asíncronas en Javascript nos permiten apegarnos a las estrategias de programación convencionales, como usar for, while y otros métodos que, de otro modo, son de naturaleza síncrona y no se pueden usar en Javascript. En este ejemplo, envolvemos la posible respuesta devuelta por la solicitud HTTP en una promesa. Dado que la promesa tarda una cierta cantidad de tiempo en resolverse o rechazarse, usamos la palabra clave await para esperar a que la promesa devuelva una respuesta. Es una buena práctica usar una secuencia try()/catch() para manejar la respuesta recibida de la promesa después de usar await, para ayudarnos a manejar los errores, si los hay. Aunque el código síncrono se puede escribir en la secuencia try()/catch(), la función asíncrona se ejecuta de forma asíncrona, lo que se demuestra por el hecho de que el comandoconsole.log('asynchronous is awesome');aunque se coloca después de la llamada a la función getData, se realiza antes de que se complete la función asíncrona.