¿Por qué usamos el método then() en JavaScript?

El método then() en JavaScript se definió en la API de Promise y se utiliza para gestionar tareas asincrónicas, como una llamada a la API. Anteriormente, se usaban funciones de devolución de llamada en lugar de esta función, lo que dificultaba el mantenimiento del código.

Sintaxis:

demo().then(
    (onResolved) => {
        // Some task on success
    },
    (onRejected) => {
        // Some task on failure
    }
)

Note: demo is a function that returns a promise prototype.

Parámetros: Esta función tiene dos parámetros para manejar el éxito o rechazo de la promesa:

• onFulfilled: Esta es una función que se invoca en el éxito de la promesa. Este es un parámetro opcional.
• onRejected: Esta es una función que se invoca ante el rechazo de la promesa. Este es un parámetro opcional.

Valor devuelto: Este método puede devolver una Promesa (si se llama a otro entonces()) o nada.

Ejemplo 1: no pasar argumentos

<script type="text/javascript">
    function demo() {
      document.write("Function called!!<br>")
      return Promise.resolve("Success");
      // or
      // return Promise.reject("Failure");
    }
    demo().then()
 </script>

 
 Producción: 

Function called!!

Ejemplo 2: pasar solo la primera devolución de llamada

<script type="text/javascript">
    function demo() {
      document.write("Function called!!<br>")
      return Promise.resolve("Success");
      // or
      // return Promise.reject("Failure");
    }
    demo().then(
      (message) => {
        document.write("Then success:" + message);
      }
    )
</script>

Producción: 

Function called!!
Then success:Success

Tenga en cuenta que si la función de demostración devuelve un rechazo, generará un error.

Ejemplo 3: pasar ambos argumentos

<script type="text/javascript">
    function demo() {
      document.write("Function called!!<br>")
      return Promise.resolve("Success");
      // or
      // return Promise.reject("Failure");
 
    }
    demo().then(
      (message) => {
        document.write("Then success:" + message);
      },
      (message) => {
        document.write("Then failure:" + message);
      }
    )
</script>

 
Producción: 

Function called!!
Then success:Success

Ejemplo 4: Enstringmiento de varios métodos then(): cada método then() puede devolver una promesa (una resolución o un rechazo) y, por lo tanto, se pueden enstringr varios métodos then().

<script type="text/javascript">
    function demo() {
      document.write("Function called!!<br>")
      return Promise.resolve(1);
      // or
      // return Promise.reject("Failure");
 
    }
    demo().then(
      (value) => {
        document.write(value);
        return ++value;
      },
      (message) => {
        document.write(message);
      }
    ).then(
      (value) => {
        document.write(value);
      },
      (message) => {
        document.write(message);
      }
    )
</script>

 
 Producción: 

Function called!!
12 

Ejemplo 5: Uso de then() como una función asíncrona
 

<script type="text/javascript">
    var demo = new Promise((resolve, reject) => {
      resolve(1);
    })
    let call = demo.then(
      (value) => {
        console.log(value);
        return ++value;
      },
      (message) => {
        document.write(message);
      });
    console.log(call);
    setTimeout(() => {
      console.log(call);
    });
</script>

Salida de la consola: 

Promise {status: "pending"}
1
Promise {status: "resolved", result: 2}

Navegadores compatibles:

• Google Chrome 6.0 y superior
• Internet Explorer 9.0 y superior
• Mozilla 4.0 y superior
• Ópera 11.1 y superior
• Safari 5.0 y superior