¿Cómo convertir una función asíncrona para devolver una promesa en JavaScript?

En este artículo, aprenderemos cómo convertir una función asíncrona para devolver una promesa en JavaScript .

Enfoque:  primero debe declarar una función simple (ya sea una función normal o una función de flecha (que es la preferida)). Debe crear una función asíncrona y luego debe devolver la promesa como una salida de esa función asíncrona.

Necesitamos crear una función (método), ya sea una función simple o una función de flecha (estamos analizando los hechos usando funciones de flecha). Cree una función asíncrona y luego, al llamar a esa función, deberíamos devolver la salida en forma de promesa.

Primero comprendamos cómo declarar una función de flecha simple en JavaScript y devolver el resultado asociado con esa función en la consola.

Ejemplo:

<script>
 let name = () =>{
      console.log("GeeksforGeeks");
  }
  name();
</script>

Producción:

GeeksforGeeks

Acercarse:

• Agregaremos async() junto con la sintaxis de la función que eventualmente manejará todo tipo de operaciones y eventos asincrónicos.
• Después de agregar la palabra clave asíncrona , almacenaremos los resultados.
• Después de almacenar los resultados, llamaremos a la función y veremos que se devuelve una promesa que contiene el estado (como cumplido) y el valor asociado.

Ejemplo 1:

<script> 
 let name = async () => {
    return "GeeksforGeeks";
  };
  console.log(name());
</script>

Producción:

Promise {<fulfilled>: "GeeksforGeeks"}
__proto__: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "GeeksforGeeks"

Ejemplo 2: también puede agregar la palabra clave await y almacenar ese resultado en alguna variable. Esto es útil cuando obtenemos datos de la API para esperar a que los datos lleguen correctamente.

<script>
  let name = async () => {
    let output = await ( "GeeksforGeeks");
      return output;
  };
  console.log(name());
</script>

Producción:

Promise {<pending>: "GeeksforGeeks"}
__proto__: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "GeeksforGeeks"

Ejemplo 3: Para echar un vistazo al resultado, usaremos  el método then() para imprimir el resultado.

<script> 
 let name = async () => {
    return "GeeksforGeeks";
  };
  name().then((value) => {
    console.log(value);
  });
</script>

Producción:

GeeksforGeeks

Enfoque 2: 

• Usaremos el estado resolve() de la Promesa.
• Almacenaremos nuestro resultado y luego usaremos la palabra clave async (junto con la sintaxis de la función) y await (antes de almacenar el resultado en una variable).

Ejemplo 1:

<script>
  let name = async() =>{
      let output = await Promise.resolve("GeeksforGeeks");
      return output;
  }
  console.log(name());
</script>

Producción:

Promise {<pending>: "GeeksforGeeks"}
__proto__: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "GeeksforGeeks"

Ejemplo 2: si desea ver el resultado también, como se explicó en el enfoque anterior, utilizará el método then() , con la ayuda del cual verá el resultado en la consola.

<script>
let name = async() =>{
    let output = await Promise.resolve("GeeksforGeeks");
    return output;
}
name().then((result)=>{
    console.log(result);
});
</script>

Producción:

GeeksforGeeks