0

de que manera puedo refactorizar y aplicar mejores practicas a el siguiente codigo ?

function sumar(num1,num2) {

    return new Promise((resuelta, rechazada) => {

        if (!num1 || !num2) {
            rechazada(`falta un numero`)
        } else {
            resuelta(num1+num2);
        }
    });

}

function multiplicar (resultSuma){
    return new Promise((resuelta) => {
        resuelta(resultSuma*5)
    }
)}

function verificar (resultMultiplicacion){
    return new Promise ((resuelta, rechazada) => {
        if(resultMultiplicacion > 10){
            resuelta ("el sultado es mayor a 10")
        } else {
            rechazada ("el resultado en menor a 10")
        }
    }
)}

sumar(1,2).then((result) => {
    console.log(result)
    return multiplicar(result)
    .then(resp => {
        console.log(resp)
        return verificar(resp)
        .then(resultVerificado => {
            console.log(resultVerificado)
        })
    })
})
1
  • Con refactorizar te refieres a mejorar el código? o a que te refieres?
    – darioxlz
    el 24 ago. 2018 a las 21:16

1 respuesta 1

1

esto fue lo que hiciste al llamar la promesa:

sumar(1,2).then((result) => {
    console.log(result)
    return multiplicar(result)
    .then(resp => {
        console.log(resp)
        return verificar(resp)
        .then(resultVerificado => {
            console.log(resultVerificado)
        })
    })
})

De hecho, No estás aplicando el concepto adecuadamente; justamente lo que se trata de evitar es ese tipo de anidamiento y de indentación que haces cuando llamas la promesa.

Tampoco entiendo el porqué creaste promesas en cada una de las funciones.

Por otra parte, yo preferiría encapsular todo en una clase con métodos estáticos para darle orden así que te haré un ejemplo con la clase Calc y 4 métodos .

3 con los procesos requeridos donde, quien tiene la promesa es sólo el método sumar y Adiciono un método triggerAll() para poder ejecutar todo el encadenamiento. Ese encadenamiento es justamente uno de los grandes beneficios de las promesas que es muy diferente al -anidamiento- que hiciste.

Utilizo 2 input y un botón, luego, arrojo los resultados a unas etiquetas <span>.

Las líneas donde se envian los datos al dom son sólo para mostrar el resultado mas no son necesarios pues evidentemente en una aplicación real sólo estaría esperando un resultado para usarlo en algo. si quitamos esto y también la asignación de los resultados y devolvemos todo por return notarás que el código se reduce demasiado y con el beneficio que ese encadenamiento (en el método triggerAl()) de la promesa lo vuelve mucho mas legible.

No validé los campos, por lo tanto si no los llenas te arrojará un NaN pero te mostrará por consola el error que captura de la promesa.

Espero te sea de utilidad y me cuentas si te sirvió.

Tu ejercicio quedaría mas o menos así:

//  obtengo los elementos del Dom con los que voy a interactuar

const num1 = document.querySelector('#num1'),
      num2 = document.querySelector('#num2'),
      clear = document.querySelector('#btnClear'),
      result = document.querySelector('#btnResult'),
      txtAdd = document.querySelector('#s'),
      txtMult = document.querySelector('#m'),
      txtCheck = document.querySelector('#v');


// ----------------------------------------
// Clase que contiene los métodos estáticos
// sumar, multiplicar y verificar y él método 
// [triggerAll] que es el que aplica el "Promise"
// ----------------------------------------
class Calc {
   
   static sumar(a, b) {      
      return new Promise((resolve, reject) => {
        a && b ? resolve(a + b) : reject('Error:  Falta un número !');
         
        txtAdd.innerHTML = (a+b);  // sólo para comprobar resultado
      });
   }

   static multiplicar(result) {
      result *= 5
      txtMult.innerHTML = result  // sólo para comprobar resultado
      return result;
   }

   static verificar(newResult) {
     let msg = newResult > 10 ? 'El resultado es Mayor que 10'
                           : 'El Resultado es igual o menor que 10';
     
     txtCheck.innerHTML = msg;   // sólo para comprobar resultado
   }
  
  // Método que aplica todo el [Promise]
    static triggerAll(a,b){
      Calc.sumar(a,b)
      .then(result => Calc.multiplicar(result))
      .then(newResult => Calc.verificar(newResult))
      .catch(error => console.error(error));
   }
}  // Fin de la clase Calculo


// Evento del botón 
result.addEventListener('click', () => {
  Calc.triggerAll(parseInt(num1.value), parseInt(num2.value));
});
/* un poquito de **CSS**  */

span{
  color: green;
  font-size: 1.2rem;
}
<div class="input">
  <label for="num1">Numero 1</label>
  <input type="number" id="num1" name="num1">
</div>

<div class="input">
  <label for="num2">Numero 2</label>
  <input type="number" id="num2" name="num2">
</div>
<button id="btnResult">Resultado</button>

<p>Resultado de la suma :<span id="s"></span> </p>
<p>Resultado de la Multiplicación por 5 :<span id="m"></span> </p>
<p>Resultado de la Verificación :<span id="v"></span> </p>

5
  • Completamente de acuerdo, no tiene sentido hacer uso de una promesa para hacer un procesamiento de datos inmediato y que no requiere de esperar a la satisfacción de condiciones para ser realizado. el 28 ago. 2018 a las 7:19
  • Gracias me puedes pasar por favor un link donde salga documentado el funcionamiento de el metodo triggerAll por otro lado hice el ejercicio de esa manera por que solo sabia hacer callbacks ahora estoy aprendiendo hacer promesas y es la primera que hice sabia que no estaba bien y por eso realice la pregunta gracias por la ayuda.
    – Rangel
    el 28 ago. 2018 a las 14:01
  • @Jarvi Rangel , el método triggerAll() es un método estático que yo creé (al igual que los otros métodos de la clase Calc) sólo para mostrarte el uso del promise mas NO hace parte de javascript. podría haberlo llamado de cualquier manera.
    – Tato OC
    el 28 ago. 2018 a las 17:55
  • Por otra parte, esa manera de anidamiento en los callbacks, si los usabas así, tampoco es la manera correcta de aplicarlos, pues en un posible código con N callbacks se tendría un código desordenado y de difícil mantenimiento.
    – Tato OC
    el 28 ago. 2018 a las 17:58
  • Gracias estoy profundizando en javascript los algoritmos que realizo funcionan pero no de la mejor manera por eso formule la pregunta para hacerlos de la manera mas optima nueva mente gracias y saludos.
    – Rangel
    el 30 ago. 2018 a las 19:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.