¿Cómo acceder a las propiedades del objeto desde el resultado devuelto por la función async() en JavaScript?

En este artículo, veremos cómo acceder a las propiedades de un resultado de objeto javascript devuelto por la función async() en Javascript.

Una propiedad de objeto de javascript es una variable que está asociada (leer adjunto) con el objeto en sí, es decir, las propiedades tienen un nombre y el valor es uno de los atributos vinculados con la propiedad, que define el acceso otorgado a la propiedad. Puede acceder a una propiedad de un objeto usando la notación de punto ( . ) o la notación de corchete ( [] ). Por ejemplo, la clave es una propiedad del objeto obj , y se accede al valor de la propiedad utilizando tanto la notación de puntos como la notación de corchetes .

var obj = {"key": "value"}
console.log(obj.key) // dot notation
console.log(obj["key"]) // bracket notation

Producción:

value
value

Aquí, entenderemos cómo acceder a la respuesta de un objeto de promesa. Una Promesa es un objeto javascript que regresa al completar una operación asíncrona. Una Promesa tiene 3 estados:

• Cumplido: cuando una operación asincrónica se completa sin arrojar ningún error.
• Rechazado: cuando una operación asincrónica no se pudo completar y arroja un error a mitad de camino.
• Pendiente: cuando una operación asincrónica está en curso.

Ahora, para comprender cómo acceder a las propiedades de un objeto JavaScript cuando el objeto es una respuesta a una promesa, veamos los enfoques a continuación.

Enfoque 1: usar la sintaxis async/await para manejar el comportamiento basado en promesas

Async/Await ayuda a escribir un código más limpio para manejar las promesas. La palabra clave async se usa con funciones que manejan operaciones asíncronas, y la palabra clave await se usa en una función asíncrona, que espera la respuesta de una operación asíncrona, por ejemplo, una promesa.

Ejemplo: Este ejemplo describe el proceso para acceder a las propiedades del objeto en Javascript.

<script>
  // A function that returns a promise object
  const call = (input) => {
      return new Promise((resolve, reject) => {
          return resolve({
              val: input
          })
      })
  }
  
  // Let’s await the response of the promise 
  // and log the result to the console
  async function test() {
      const res = await call("Hello World!")
      console.log(res.val); // dot notation
      console.log(res["val"]) // bracket notation   
  }
  test();
</script>

Si no desea utilizar la palabra clave await para esperar la respuesta de Promise, también puede optar por la técnica de enstringmiento de Promise usando la palabra clave then para esperar una respuesta de promesa antes de continuar con una string de devolución de llamada.

Producción:

Salida de código

Enfoque 2: Usar la palabra clave ‘entonces’ para implementar una string de promesas

El método then() maneja la respuesta de la promesa , ya sea que el estado de la promesa se cumpla o se rechace . Se necesitan dos funciones de devolución de llamada, una para cada uno de los estados de promesa mencionados anteriormente. 

Ejemplo: este ejemplo describe el proceso para acceder a las propiedades del objeto en Javascript mediante el uso de la palabra clave ‘ entonces ‘ para implementar una string de promesa.

<script>
  // A function that returns a promise object
  const call = (input) => {
    return new Promise((resolve, reject) => {
      return resolve({
        val: input,
      });
    });
  };
  
  // Use then keyword to wait for the response
  // and use a callback function to log the 
  // result to the console
  
  // Dot notation
  call("Hello World!")
    .then((res) => console.log(res.val));
  
  // Bracket notation
  call("Hello World!")
    .then((res) => console.log(res["val"]));
</script>

Producción:

Salida de código