Skip to main content
El moderador quita la wiki por Alvaro Montoro
Publicación convertida en wiki de comunidad por Jorgesys
Aclaraciones sobre asincronia, E/S y paralelismo
Origen Enlace
abulafia
  • 58.7k
  • 3
  • 54
  • 89

La solución es hacer uso de versiones asíncronas de estas funciones. Llamémoslas asinc1() y asinc2(). Estas funciones retornan inmediatamente en el hilo principal, pero dejan "encargado" al Navegador que en otro hilo (dedicado a comunicaciones de red) haga las peticiones correspondientes.

Nota el hacer una función asíncrona no hace que se ejecute automáticamente en otro hilo, ni es un método mágico de ejecución "en paralelo". Si la rutina que llamamos de forma asíncrona se pone a hacer cálculos que acaparen la CPU, el hilo de GUI se resentiría igualmente. Sólo si la función asíncrona hace uso de entrada/salida bloqueante, típicamente acceso a red o disco, se puede beneficiar, pues en ese caso no se queda esperando a que la operación de entrada/salida termine, sino que vuelve inmediatamente y sólo más tarde, cuando la operación ha terminado (otros procesos como el operativo u otro hilo en el navegador la habrá completado), la tarea se reanuda y puede obtener la respuesta.

El problema es ¿qué ocurre una vez que esas peticiones se han completado? ¿A dónde va a parar la respuesta? Ya que necesitamos la respuesta de asinc1() antes de poder invocar asinc2() ¿cómo se entera el hilo principalnuestro programa de cuándo terminó asinc1() y cuál ha sido el resultado?

La anidación sería peor a medida que tengamos más funciones encadenadas (que se necesite el resultado de una para llamar a la siguiente), dando lugar a funciones que son parámetros de otras funciones, que son parámetros de otras, etc. y el código fuente adquiere una característica forma en la que se va indentando más y más para luego ir deshaciendo esa indentación a medida que se cierran llaves y paréntesis, estructura conocida como Pyramid of Doom, o Callback hell.

Por otro lado, en este código todotoda la lógica está "al revés" de algún modo, pues las funciones no retornan resultados, sino que pasan esos resultados como parámetros (a otras funciones), y las funciones que manejan la respuesta son a su vez pasadas como parámetros. El flujo de errores (en el que no entraré en esta respuesta) también se complica, pues ya no pueden usarse excepciones, sino que típicamente habría dos funciones callback, una a la que se llamaría en caso de éxito y otra en caso de error.

Las Promises evitan esta anidación, y hacen más simple el manejo de errores (cosa en la que no entro en esta respuesta). Una Promise tiene un método then() al que le pasas una función, que será ejecutada automáticamente cuando la promesa se resuelva (o inmediatamente si ya estaba resuelta en el momento en que invocamos .then()). Esta función recibirá como parámetro el valor de la promesa (el resultado esperado). Y lo mejor es que .then() retorna a su vez una nueva Promise, que se resolverá cuando se ejecute la función que le habíamos asociado. De este modo se pueden encadenar varios .then() para "simular" un código secuencial, del estilo de "cuando esta promesa se resuelva haz esto, y después, cuando esta otra se resuelva, haz esto otro, y después...)

La solución es hacer uso de versiones asíncronas de estas funciones. Llamémoslas asinc1() y asinc2(). Estas funciones retornan inmediatamente en el hilo principal, pero dejan "encargado" al Navegador que en otro hilo (dedicado a comunicaciones de red) haga las peticiones correspondientes. El problema es ¿qué ocurre una vez que esas peticiones se han completado? ¿A dónde va a parar la respuesta? Ya que necesitamos la respuesta de asinc1() antes de poder invocar asinc2() ¿cómo se entera el hilo principal de cuándo terminó asinc1() y cuál ha sido el resultado?

La anidación sería peor a medida que tengamos más funciones encadenadas (que se necesite el resultado de una para llamar a la siguiente). Por otro lado, en este código todo está "al revés" de algún modo, pues las funciones no retornan resultados, sino que pasan esos resultados como parámetros (a otras funciones).

Las Promises evitan esta anidación, y hacen más simple el manejo de errores (cosa en la que no entro en esta respuesta). Una Promise tiene un método then() al que le pasas una función, que será ejecutada automáticamente cuando la promesa se resuelva (o inmediatamente si ya estaba resuelta en el momento en que invocamos .then()). Esta función recibirá como parámetro el valor de la promesa (el resultado esperado). Y lo mejor es que .then() retorna a su vez una nueva Promise, que se resolverá cuando se ejecute la función que le habíamos asociado. De este modo se pueden encadenar varios .then() para "simular" un código secuencial, del estilo de "cuando esta promesa se resuelva haz esto, y después, cuando esta otra se resuelva, haz esto otro, y después...)

La solución es hacer uso de versiones asíncronas de estas funciones. Llamémoslas asinc1() y asinc2(). Estas funciones retornan inmediatamente en el hilo principal, pero dejan "encargado" al Navegador que en otro hilo (dedicado a comunicaciones de red) haga las peticiones correspondientes.

Nota el hacer una función asíncrona no hace que se ejecute automáticamente en otro hilo, ni es un método mágico de ejecución "en paralelo". Si la rutina que llamamos de forma asíncrona se pone a hacer cálculos que acaparen la CPU, el hilo de GUI se resentiría igualmente. Sólo si la función asíncrona hace uso de entrada/salida bloqueante, típicamente acceso a red o disco, se puede beneficiar, pues en ese caso no se queda esperando a que la operación de entrada/salida termine, sino que vuelve inmediatamente y sólo más tarde, cuando la operación ha terminado (otros procesos como el operativo u otro hilo en el navegador la habrá completado), la tarea se reanuda y puede obtener la respuesta.

El problema es ¿qué ocurre una vez que esas peticiones se han completado? ¿A dónde va a parar la respuesta? Ya que necesitamos la respuesta de asinc1() antes de poder invocar asinc2() ¿cómo se entera nuestro programa de cuándo terminó asinc1() y cuál ha sido el resultado?

La anidación sería peor a medida que tengamos más funciones encadenadas (que se necesite el resultado de una para llamar a la siguiente), dando lugar a funciones que son parámetros de otras funciones, que son parámetros de otras, etc. y el código fuente adquiere una característica forma en la que se va indentando más y más para luego ir deshaciendo esa indentación a medida que se cierran llaves y paréntesis, estructura conocida como Pyramid of Doom, o Callback hell.

Por otro lado, en este código toda la lógica está "al revés" de algún modo, pues las funciones no retornan resultados, sino que pasan esos resultados como parámetros (a otras funciones), y las funciones que manejan la respuesta son a su vez pasadas como parámetros. El flujo de errores (en el que no entraré en esta respuesta) también se complica, pues ya no pueden usarse excepciones, sino que típicamente habría dos funciones callback, una a la que se llamaría en caso de éxito y otra en caso de error.

Las Promises evitan esta anidación, y hacen más simple el manejo de errores. Una Promise tiene un método then() al que le pasas una función, que será ejecutada automáticamente cuando la promesa se resuelva (o inmediatamente si ya estaba resuelta en el momento en que invocamos .then()). Esta función recibirá como parámetro el valor de la promesa (el resultado esperado). Y lo mejor es que .then() retorna a su vez una nueva Promise, que se resolverá cuando se ejecute la función que le habíamos asociado. De este modo se pueden encadenar varios .then() para "simular" un código secuencial, del estilo de "cuando esta promesa se resuelva haz esto, y después, cuando esta otra se resuelva, haz esto otro, y después...)

se añadieron 196 caracteres en el cuerpo
Origen Enlace
JackNavaRow
  • 7.2k
  • 6
  • 25
  • 49
  • Callbacks. La llamada asíncrona recibe como parámetro una función. Cuando el resultado esté disponible, invocará a esa función pasándole como parámetro el resultado. Esta forma hace en muchas ocasiones el código ilegible ,esto se conoce como Callback Hell
  • PromisesPromises. La llamada asíncrona retorna como resultado "provisional" una Promise. Este es un objeto que contendrá en el futuro el resultado. Este objeto tiene una serie de métodos bien definidos que permiten consultar su estado (si ha sido resuelta o aún no, si han habido errores), asignarle un estado (cosa que hará la función asíncrona cuando obtenga el resultado), e incluso asignarle una función a modo de callback que será invocada cuando el estado de la Promise se resuelva.
  • Callbacks. La llamada asíncrona recibe como parámetro una función. Cuando el resultado esté disponible, invocará a esa función pasándole como parámetro el resultado.
  • Promises. La llamada asíncrona retorna como resultado "provisional" una Promise. Este es un objeto que contendrá en el futuro el resultado. Este objeto tiene una serie de métodos bien definidos que permiten consultar su estado (si ha sido resuelta o aún no, si han habido errores), asignarle un estado (cosa que hará la función asíncrona cuando obtenga el resultado), e incluso asignarle una función a modo de callback que será invocada cuando el estado de la Promise se resuelva.
  • Callbacks. La llamada asíncrona recibe como parámetro una función. Cuando el resultado esté disponible, invocará a esa función pasándole como parámetro el resultado. Esta forma hace en muchas ocasiones el código ilegible ,esto se conoce como Callback Hell
  • Promises. La llamada asíncrona retorna como resultado "provisional" una Promise. Este es un objeto que contendrá en el futuro el resultado. Este objeto tiene una serie de métodos bien definidos que permiten consultar su estado (si ha sido resuelta o aún no, si han habido errores), asignarle un estado (cosa que hará la función asíncrona cuando obtenga el resultado), e incluso asignarle una función a modo de callback que será invocada cuando el estado de la Promise se resuelva.
Revertido a la revisión 2
Origen Enlace
JackNavaRow
  • 7.2k
  • 6
  • 25
  • 49
  • Callbacks. La llamada asíncrona recibe como parámetro una función. Cuando el resultado esté disponible, invocará a esa función pasándole como parámetro el resultado. esta forma hace en algunas ocasiones el código ilegible ,esto se conoce como Callback Hell
  • PromisesPromises. La llamada asíncrona retorna como resultado "provisional" una Promise. Este es un objeto que contendrá en el futuro el resultado. Este objeto tiene una serie de métodos bien definidos que permiten consultar su estado (si ha sido resuelta o aún no, si han habido errores), asignarle un estado (cosa que hará la función asíncrona cuando obtenga el resultado), e incluso asignarle una función a modo de callback que será invocada cuando el estado de la Promise se resuelva.

Versión asíncrona. Se supone que asinc1() y asinc2() son funciones que admiten un callback como parámetro, al cual llamarán pasándole el resultado

//Funcion que simula un servicio
function service(param, fn){
    setTimeout(function(){
        fn("¡Éxito!" + param);
    }, 1000);
}

function asinc1(params, fn){
    return service(params, fn)
}
function asinc2(r1, fn){
    return service(r1, fn)
}
function main() {

    asinc1("parametros 1 ", function(r1){
    console.info(r1)
        asinc2("parametros 2 ", function(r2) {
        console.log("valor r1 " + r1);
            console.info("Resultado final: " + r2);
        });
    });
}
main()

// Versión asíncrona. Se supone que asinc1() y asinc2() son funciones que admiten 
// un callback como parámetro, al cual llamarán pasándole el resultado
function main() {
    asinc1(parametros, function(r1){
        // Tenemos el resultado de asinc1
        asinc2(r1, function(r2) {
            console.log("Resultado final: " + r2);
        });
    });
}

Versión con Promises Ahora asinc1 y asinc2 se supone que retornan una Promise

//Funcion que simula un servicio
function servicio(param){
  return new Promise((resolve, reject) => {
    setTimeout(function(){
      resolve("¡Éxito!", param); // ¡Todo salió bien!
    }, 1250);
  });
}
function asinc1(a1){
  return servicio(a1)
}
function asinc2(a2){
  return servicio(a2)
}
function promesa1() {
    asinc1("params promesa1")
    .then(function(r1){ return asinc2(r1); })
    .then(function(r2){
    console.info("Resultado promesa1 final: " + r2); 
    })
}

// Lo anterior puede escribirse aún más concisamente así:
function promesa2() {
    asinc1("params PROMESA2")
    .then(asinc2)
    .then(function(r2){
    console.error("Resultado  promesa2 final: " + r2); 
    })
}
promesa1()
promesa2()

// Versión con Promises
// Ahora asinc1 y asinc2 se supone que retornan una Promise
function main() {
    asinc1(parametros)
    .then(function(r1){ return asinc2(r1); })
    .then(function(r2){
    console.log("Resultado final: " + r2); 
    })
}

// Lo anterior puede escribirse aún más concisamente así:
function main() {
    asinc1(parametros)
    .then(asinc2)
    .then(function(r2){
    console.log("Resultado final: " + r2); 
    })
}

Desde 2017 JavaScript tiene además las palabras async/await, que son azúcar sintáctico para usar Promesas con una nueva sintaxis que las oculta, y las hace parecerparecer código síncrono.

async function  main() {
  const promesa1 =  await asinc1("promesa1")
  console.info("resultado promesa 1: ", promesa1)
  const promesa2 =  await asinc2("promesa2 enviando promesa1"+ promesa1)
  
  console.info("resultado Promesa 2", promesa2)


}
//Funcion que simula un servicio
function servicio(param){
  return new Promise((resolve, reject) => {
    setTimeout(function(){
      resolve("¡Éxito!"+ param);
    }, 750);
  });
}
function asinc1(a1){
  return servicio(a1)
}
function asinc2(a2){
  return servicio(a2)
}
main()

async function main() {
    r1 = await asinc1(parametros);
    r2 = await asinc2(r1);

    console.log("Resultado final: " + r2);
}
  • Callbacks. La llamada asíncrona recibe como parámetro una función. Cuando el resultado esté disponible, invocará a esa función pasándole como parámetro el resultado. esta forma hace en algunas ocasiones el código ilegible ,esto se conoce como Callback Hell
  • Promises. La llamada asíncrona retorna como resultado "provisional" una Promise. Este es un objeto que contendrá en el futuro el resultado. Este objeto tiene una serie de métodos bien definidos que permiten consultar su estado (si ha sido resuelta o aún no, si han habido errores), asignarle un estado (cosa que hará la función asíncrona cuando obtenga el resultado), e incluso asignarle una función a modo de callback que será invocada cuando el estado de la Promise se resuelva.

Versión asíncrona. Se supone que asinc1() y asinc2() son funciones que admiten un callback como parámetro, al cual llamarán pasándole el resultado

//Funcion que simula un servicio
function service(param, fn){
    setTimeout(function(){
        fn("¡Éxito!" + param);
    }, 1000);
}

function asinc1(params, fn){
    return service(params, fn)
}
function asinc2(r1, fn){
    return service(r1, fn)
}
function main() {

    asinc1("parametros 1 ", function(r1){
    console.info(r1)
        asinc2("parametros 2 ", function(r2) {
        console.log("valor r1 " + r1);
            console.info("Resultado final: " + r2);
        });
    });
}
main()

Versión con Promises Ahora asinc1 y asinc2 se supone que retornan una Promise

//Funcion que simula un servicio
function servicio(param){
  return new Promise((resolve, reject) => {
    setTimeout(function(){
      resolve("¡Éxito!", param); // ¡Todo salió bien!
    }, 1250);
  });
}
function asinc1(a1){
  return servicio(a1)
}
function asinc2(a2){
  return servicio(a2)
}
function promesa1() {
    asinc1("params promesa1")
    .then(function(r1){ return asinc2(r1); })
    .then(function(r2){
    console.info("Resultado promesa1 final: " + r2); 
    })
}

// Lo anterior puede escribirse aún más concisamente así:
function promesa2() {
    asinc1("params PROMESA2")
    .then(asinc2)
    .then(function(r2){
    console.error("Resultado  promesa2 final: " + r2); 
    })
}
promesa1()
promesa2()

Desde 2017 JavaScript tiene además las palabras async/await, que son azúcar sintáctico para usar Promesas con una nueva sintaxis que las oculta, y las hace parecer código síncrono.

async function  main() {
  const promesa1 =  await asinc1("promesa1")
  console.info("resultado promesa 1: ", promesa1)
  const promesa2 =  await asinc2("promesa2 enviando promesa1"+ promesa1)
  
  console.info("resultado Promesa 2", promesa2)


}
//Funcion que simula un servicio
function servicio(param){
  return new Promise((resolve, reject) => {
    setTimeout(function(){
      resolve("¡Éxito!"+ param);
    }, 750);
  });
}
function asinc1(a1){
  return servicio(a1)
}
function asinc2(a2){
  return servicio(a2)
}
main()

  • Callbacks. La llamada asíncrona recibe como parámetro una función. Cuando el resultado esté disponible, invocará a esa función pasándole como parámetro el resultado.
  • Promises. La llamada asíncrona retorna como resultado "provisional" una Promise. Este es un objeto que contendrá en el futuro el resultado. Este objeto tiene una serie de métodos bien definidos que permiten consultar su estado (si ha sido resuelta o aún no, si han habido errores), asignarle un estado (cosa que hará la función asíncrona cuando obtenga el resultado), e incluso asignarle una función a modo de callback que será invocada cuando el estado de la Promise se resuelva.
// Versión asíncrona. Se supone que asinc1() y asinc2() son funciones que admiten 
// un callback como parámetro, al cual llamarán pasándole el resultado
function main() {
    asinc1(parametros, function(r1){
        // Tenemos el resultado de asinc1
        asinc2(r1, function(r2) {
            console.log("Resultado final: " + r2);
        });
    });
}
// Versión con Promises
// Ahora asinc1 y asinc2 se supone que retornan una Promise
function main() {
    asinc1(parametros)
    .then(function(r1){ return asinc2(r1); })
    .then(function(r2){
    console.log("Resultado final: " + r2); 
    })
}

// Lo anterior puede escribirse aún más concisamente así:
function main() {
    asinc1(parametros)
    .then(asinc2)
    .then(function(r2){
    console.log("Resultado final: " + r2); 
    })
}

Desde 2017 JavaScript tiene además las palabras async/await, que son azúcar sintáctico para usar Promesas con una nueva sintaxis que las oculta, y las hace parecer código síncrono.

async function main() {
    r1 = await asinc1(parametros);
    r2 = await asinc2(r1);

    console.log("Resultado final: " + r2);
}
agregar documentacion y codigo ejecutable
Origen Enlace
JackNavaRow
  • 7.2k
  • 6
  • 25
  • 49
Loading
se añadieron 14 caracteres en el cuerpo
Origen Enlace
abulafia
  • 58.7k
  • 3
  • 54
  • 89
Loading
Origen Enlace
abulafia
  • 58.7k
  • 3
  • 54
  • 89
Loading