platzi - ¿Cómo funcionan las promesas en JavaScript?
promise para javascript (3)
Acabo de implementar mi primera función que devuelve una promesa basada en otra promesa en AngularJS, y funcionó. Pero antes de decidir simplemente hacerlo, pasé 2 horas leyendo e intentando entender los conceptos detrás de las promesas. Pensé que si podía escribir un código simple que simulara cómo funcionaban las promesas, sería capaz de entenderlo conceptualmente en lugar de poder usarlo sin saber realmente cómo funciona. No pude escribir ese código.
Entonces, ¿podría alguien por favor ilustrar en color de rosa JavaScript cómo funcionan las promesas?
Por la simplicidad para comprender las promesas en Javascript. Puede referirse a continuación del ejemplo. Simplemente copie y pegue en un nuevo archivo php / html y ejecútelo.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function test(n){
alert(''input:''+n);
var promise = new Promise(function(fulfill, reject) {
/*put your condition here */
if(n) {
fulfill("Inside If! match found");
}
else {
reject(Error("It broke"));
}
});
promise.then(function(result) {
alert(result); // "Inside If! match found"
}, function(err) {
alert(err); // Error: "It broke"
});
}
</script>
</head>
<body>
<input type="button" onclick="test(1);" value="Test"/>
</body>
</html>
- Haga clic en el botón Prueba ,
- Creará una nueva promesa,
- si la condición será verdadera, cumple la respuesta,
- después de esa promesa. Luego se llama y, según el cumplimiento, se imprimirá el resultado .
- En caso de rechazar la promesa, luego devuelve el mensaje de error.
Probablemente el ejemplo más simple de uso de promesas tenga ese aspecto:
var method1 = (addings = '''') => {
return new Promise(resolve => {
console.log(''method1'' + addings)
resolve(addings + ''_adding1'');
});
}
var method2 = (addings = '''') => {
return new Promise(resolve => {
console.log(''method2'' + addings)
resolve(addings + ''_adding2'');
});
}
method1().then(method2).then(method1).then(method2);
// result:
// method1
// method2_adding1
// method1_adding1_adding2
// method2_adding1_adding2_adding1
Eso es básico de lo básico. Teniéndolo, puedes experimentar con rechazos:
var method1 = (addings = ''*'') => {
return new Promise((resolve, reject) => {
console.log(''method1'' + addings)
resolve(addings + ''_adding1'');
});
}
var method2 = (addings = ''*'') => {
return new Promise((resolve, reject) => {
console.log(''method2'' + addings)
reject();
});
}
var errorMethod = () => {
console.log(''errorMethod'')
}
method1()
.then(method2, errorMethod)
.then(method1, errorMethod)
.then(method2, errorMethod)
.then(method1, errorMethod)
.then(method2, errorMethod);
// result:
// method1*
// method2*_adding1
// errorMethod
// method2*
// errorMethod
// method2*
Como podemos ver, en caso de falla, se dispara la función de error (que es siempre el segundo argumento de then ) y luego se dispara la siguiente función en la cadena sin ningún argumento dado.
Para conocimiento avanzado te invito here .
Una promesa es básicamente un objeto con dos métodos. Un método es para definir qué hacer, y uno es para decir cuándo hacerlo. Tiene que ser posible llamar a los dos métodos en cualquier orden, por lo que el objeto necesita realizar un seguimiento de cuál se ha llamado:
var promise = {
isDone: false,
doneHandler: null,
done: function(f) {
if (this.isDone) {
f();
} else {
this.doneHandler = f;
}
},
callDone: function() {
if (this.doneHandler != null) {
this.doneHandler();
} else {
this.isDone = true;
}
}
};
Puede definir la acción primero y luego activarla:
promise.done(function(){ alert(''done''); });
promise.callDone();
Puede disparar la acción primero y luego definirla:
promise.callDone();
promise.done(function(){ alert(''done''); });
Demostración: http://jsfiddle.net/EvN9P/
Cuando utiliza una promesa en una función asincrónica, la función crea la promesa vacía, mantiene una referencia a ella y también devuelve la referencia. El código que maneja la respuesta asincrónica activará la acción en la promesa, y el código que llama a la función asíncrona definirá la acción.
Como cualquiera de estos puede suceder en cualquier orden, el código que llama a la función asincrónica puede cumplir la promesa y definir la acción en cualquier momento que lo desee.