Flutter DART Programación asíncrona

Introducción

• Más información:

• https://dart.dev/language/async
• https://dart.dev/libraries/async/async-await
• https://dart.dev/language/concurrency

• La programación asíncrona permite iniciar operaciones que pueden tardar un tiempo en completarse, como una petición HTTP, la lectura de un fichero o el acceso a una base de datos, sin bloquear la ejecución del programa mientras se espera por el resultado.

• En Dart, la programación asíncrona se basa principalmente en:

• Future: representa un resultado que estará disponible en el futuro.
• async / await: permiten escribir código asíncrono con una estructura similar al código síncrono.
• Stream: permite recibir una secuencia de valores de forma asíncrona.

• Es importante distinguir asincronía de paralelismo.

Un Future no implica que el código se ejecute automáticamente en un hilo diferente.

Normalmente el código Dart se ejecuta dentro de un isolate que dispone de su propio event loop y su propia zona de memoria. Mientras una operación asíncrona está esperando por una operación externa (como un Future), el event loop puede continuar procesando otros eventos. Cada isolate emplea su propio hilo de ejecución.

Si necesitamos ejecutar cálculos intensivos realmente en paralelo, Dart permite utilizar otros isolates. Para tareas puntuales puede emplearse, por ejemplo, Isolate.run().

Futures

• Más información:

• https://api.dart.dev/dart-async/Future-class.html
• https://dart.dev/libraries/dart-async
• https://dart.dev/libraries/async/async-await
• https://dart.dev/libraries/async/futures-error-handling

• Un objeto Future<T> representa el resultado de una operación asíncrona que podrá completarse posteriormente:

• con un valor de tipo T, si la operación finaliza correctamente (por ejemplo, llamamos a una lectura en disco de un archivo y va a devolver una cadena en un futuro);
• con un error, si la operación falla.

• Cuando una función inicia una operación asíncrona normalmente devuelve inmediatamente un Future. El programa puede continuar ejecutando otras tareas mientras espera a que ese Future se complete.

void main() {

  print('Inicia programa');

  getImagenes('imagenes/animales').then(
    (datos) => print(datos),
  );

  print('Fin programa');
}

Future<List<String>> getImagenes(String path) {

  final datos = ['1.jpg', '2.jpg', '3.jpg', '4.jpg'];

  return Future.delayed(
    const Duration(seconds: 4),
    () => datos,
  );

  // También podríamos utilizar:
  // return Future.value(datos);
}

• Future.delayed() no detiene ni bloquea el hilo durante cuatro segundos.

Lo que hace es crear un Future cuya operación se ejecutará después de que transcurra, como mínimo, el tiempo indicado. Mientras tanto, el event loop puede continuar procesando otras tareas.

• En versiones actuales de Dart también existe:

await Future.pause(const Duration(seconds: 4));

Future.pause() resulta apropiado cuando únicamente queremos esperar un determinado intervalo de tiempo y no necesitamos ejecutar ningún callback asociado al temporizador.

Gestión de errores

• Cuando trabajamos directamente con la API de Future, disponemos principalmente de dos formas de tratar los errores:

• mediante el parámetro onError de then();
• mediante el método catchError().

Empleando onError

• El método then() permite definir:

• una función que se ejecutará si el Future termina correctamente;
• opcionalmente, una función onError que se ejecutará si el Future termina con un error.

void main() {

  getImages('imagenes/animales').then(
    (datos) {
      datos.forEach((elem) => print('Dato: $elem'));
    },
    onError: (error) {
      print('Error: $error');
    },
  );
}

Future<List<String>> getImages(String path) {

  return Future.delayed(
    const Duration(seconds: 3),
    () => throw Exception('Error cargando imágenes'),
  );
}

• En este caso:

• si getImages() termina correctamente, se ejecuta el primer callback de then();
• si getImages() termina con un error, se ejecuta onError.

Importante: onError gestiona el error con el que llega el Future a then().

Si se produce un nuevo error dentro del callback de éxito de then(), ese error pertenece al Future devuelto por then() y no será gestionado por ese mismo onError.

Por ejemplo:

miFuture().then(
  (valor) {
    throw Exception('Error producido dentro del then');
  },
  onError: (error) {
    print('Error del Future original: $error');
  },
);

En este caso, onError no gestiona la excepción producida dentro del callback de éxito.

Empleando catchError

• Otra posibilidad consiste en añadir catchError() después de then():

void main() {

  getImages('imagenes/animales')
      .then((datos) {
        datos.forEach((elem) => print('Dato: $elem'));
      })
      .catchError((error) {
        print('Error: $error');
      });
}

• catchError() permite capturar:

• el error con el que se haya completado el Future original;
• errores producidos dentro de los callbacks then() anteriores de la cadena.

Por ejemplo:

miFuture()
    .then((valor) {
      print(valor);

      throw Exception('Error dentro del then');
    })
    .catchError((error) {
      print('Error capturado: $error');
    });

En este caso, catchError() también captura la excepción producida dentro de then().

Diferencia entre onError y catchError

Podemos resumir su comportamiento de esta forma:

Mecanismo	Error del Future original	Error producido dentro de then()
then(..., onError: ...)	Sí	No, si se produce dentro del callback de éxito de ese mismo then()
then(...).catchError(...)	Sí	Sí

Por ello, generalmente resulta más sencillo utilizar:

future
    .then(procesarResultado)
    .catchError(procesarError);

que:

future.then(
  procesarResultado,
  onError: procesarError,
);

No obstante, onError sigue siendo útil cuando necesitamos tratar de forma diferente el error procedente del Future original y los posibles errores producidos posteriormente en la cadena.

Forma recomendada con async / await

• Cuando utilizamos async y await, normalmente resulta más sencillo emplear try-catch:

Future<void> main() async {

  try {

    final datos = await getImages('imagenes/animales');

    print(datos);

  } catch (error) {

    print('Error: $error');
  }
}

• Actualmente esta forma suele ser la más sencilla y legible para la mayor parte del código asíncrono.

Estado de un Future

• Un Future puede encontrarse en dos estados:

• Incompleto (uncompleted): todavía no dispone de un resultado.
• Completo (completed): la operación ha terminado.

• Cuando un Future se completa puede hacerlo:

• con un valor;
• con un error.

• El callback principal de then() se ejecuta cuando el Future se completa correctamente con un valor.

• El método whenComplete() se ejecuta independientemente de que el Future haya terminado con un valor o con un error.

Su comportamiento es similar al bloque finally de un try-catch-finally.

• Más información:

• https://api.dart.dev/dart-async/Future/then.html
• https://api.dart.dev/dart-async/Future/whenComplete.html

void main() {

  print('Inicia programa');

  cargarImagenes()
      .then((_) => print('Acabó el Future1 sin errores'))
      .whenComplete(() => print('Terminó Future1'));

  cargarImagenesConError()
      .then((_) => print('Acabó el Future2 sin errores'))
      .catchError((error) {
        print('Capturando el error: $error');
      })
      .whenComplete(() => print('Terminó Future2'));

  print('Fin programa');
}

Future<void> cargarImagenesConError() {

  return Future.delayed(
    const Duration(seconds: 2),
    () => throw Exception('Error cargando imágenes'),
  );
}

Future<void> cargarImagenes() {

  return Future.delayed(
    const Duration(seconds: 2),
    () => print('Cargamos imágenes'),
  );
}

• cargarImagenes() se completa correctamente. Por lo tanto se ejecutan then() y posteriormente whenComplete().

• cargarImagenesConError() se completa con un error. Por lo tanto no se ejecuta el callback de éxito de then(), el error es tratado por catchError() y finalmente se ejecuta whenComplete().

Async/Await

• Más información:

• https://dart.dev/language/async
• https://dart.dev/libraries/async/async-await
• https://api.dart.dev/dart-async/Future-class.html

• En los ejemplos anteriores hemos utilizado then() para registrar una función que se ejecutará cuando un Future se complete correctamente.

• Sin embargo, Dart proporciona las palabras clave async y await, que permiten escribir código asíncrono con una estructura mucho más similar a la del código síncrono.

• Es importante recordar que los Future no se ejecutan necesariamente en otro hilo.

Dentro de un isolate, Dart utiliza un event loop para procesar los eventos y operaciones asíncronas.

• Cuando utilizamos await, no bloqueamos el hilo ni el isolate.

Lo que se suspende temporalmente es la ejecución de la función async actual. Mientras se espera a que el Future se complete, el event loop puede continuar procesando otras tareas.

Uso de await

Para obtener el resultado de un Future podemos utilizar await:

Future<void> main() async {

  print('Inicia programa');

  final datos = await getImages('imagenes/animales');

  print('Datos obtenidos después de ejecutar el Future: $datos');

  print('Fin programa');
}

Future<List<String>> getImages(String path) {

  final imagenes = ['1.jpg', '2.jpg', '3.jpg'];

  // Búsqueda de imágenes a partir del path.

  return Future.delayed(
    const Duration(seconds: 3),
    () => imagenes,
  );
}

• Para utilizar await:

• la llamada debe encontrarse dentro de una función marcada como async;
• normalmente la expresión que sigue a await devuelve un Future.

• Si tenemos:

Future<List<String>> future = getImages('imagenes/animales');

la variable contiene el propio objeto Future<List<String>>.

• En cambio:

List<String> datos = await getImages('imagenes/animales');

await suspende la función actual hasta que el Future se completa y la expresión produce el valor contenido en el Future.

Nota importante: await no hace que el Future deje de ser asíncrono ni bloquea el programa completo. Solo suspende temporalmente la función async en la que aparece.

Funciones async

• Una función marcada como async devuelve un Future.

Si queremos devolver un String:

Future<String> obtenerDato() async {

  return 'Dato obtenido';
}

Aunque dentro de la función devolvamos un String, la llamada devuelve:

Future<String>

Dart se encarga automáticamente de completar el Future con el valor retornado.

Por ello no es necesario escribir:

return Future.value(resultado);

y podemos utilizar directamente:

return resultado;

Ejemplo con lectura de un fichero

Future<String> getDatoLocal(String path) async {

  final file = File(path);

  final resultado = await file.readAsString();

  return resultado;
}

• readAsString() devuelve un Future<String>.

• Como queremos trabajar con el contenido una vez finalizada la lectura utilizamos await.

• Al estar utilizando await, la función debe estar marcada como async.

• Aunque devolvemos directamente resultado, el tipo de retorno de la función es Future<String>.

Si no necesitásemos realizar ninguna operación con el resultado antes de devolverlo, incluso podríamos simplificar la función:

Future<String> getDatoLocal(String path) {

  return File(path).readAsString();
}

Gestión de errores con async / await

• Actualmente, para la mayoría de los casos, la forma más sencilla de gestionar errores asíncronos es utilizar await junto con try-catch.

Future<void> main() async {

  try {

    final datos = await getImages('imagenes/animales');

    print(datos);

  } catch (error, stackTrace) {

    print('Error: $error');
    print(stackTrace);
  }
}

• Si el Future esperado mediante await se completa con un error, dicho error se comportará en ese punto como una excepción y podrá ser capturado mediante try-catch.

• También podemos utilizar finally:

try {

  final datos = await getImages('imagenes/animales');
  print(datos);

} catch (error) {

  print('Error: $error');

} finally {

  print('Operación finalizada');
}

Este patrón equivale conceptualmente a utilizar then(), catchError() y whenComplete(), pero suele resultar más sencillo de leer.

Ejercicios propuestos

Ejercicio 1:

Sabrías aplicar los conceptos aprendidos para que el pedido aparezca correctamente:

String createOrderMessage() {

  var order = fetchUserOrder();

  return 'Tu pedido es: $order';
}

Future<String> fetchUserOrder() =>
    Future.delayed(
      const Duration(seconds: 2),
      () => 'Café largo',
    );

void main() {

  print('Preparando el pedido...');

  print(createOrderMessage());

  print('Pedido finalizado...');
}

Modifica el programa utilizando async y await para que primero se espere a obtener el pedido y posteriormente se muestre el mensaje.

Ejercicio 2:

Apartado A)

• Se necesita mostrar cuál es el premio que recibe un alumno en función de la edad que tenga.

• Crea un método obtenerEdad al que se le envíe un nombre y que busque en un mapa la edad correspondiente a dicho nombre.

• Si el nombre no existe en el mapa debe devolver el valor 0.

• Crea un método obtenerPremio al que se le envíe una edad y que devuelva, basándose en una lista, el premio correspondiente.

• Utiliza el operador resto (%) para obtener siempre una posición válida dentro de la lista de premios.

• Desde la función main, llama a obtenerEdad y utiliza el resultado para llamar posteriormente a obtenerPremio.

Apartado B)

• Ahora supón que ambos métodos realizan operaciones asíncronas, por ejemplo accesos a un servidor a través de Internet.

• Modifica las funciones para que devuelvan un Future y utiliza async y await para mantener el orden correcto de ejecución.

• Simula que obtenerEdad tarda 4 segundos en obtener el resultado y que obtenerPremio tarda 2 segundos.

Importante: Estas operaciones son asíncronas, pero eso no significa que Dart cree automáticamente un hilo diferente para cada una.

Solución Ejercicio 2

APARTADO A)

int obtenerEdad(String nombre) {

  final alumnos = {
    'pedro': 27,
    'ana': 35,
    'luisa': 22,
  };

  return alumnos[nombre] ?? 0;
}

String obtenerPremio(int edad) {

  final premios = ['Jamón', 'Coche', 'Piso'];

  return premios[edad % premios.length];
}

void main() {

  final edad = obtenerEdad('pedro');

  final premio = obtenerPremio(edad);

  print(
    'Pedro con la edad de $edad tiene de premio: $premio',
  );
}

APARTADO B)

Future<int> obtenerEdad(String nombre) async {

  final alumnos = {
    'pedro': 27,
    'ana': 35,
    'luisa': 22,
  };

  await Future.pause(
    const Duration(seconds: 4),
  );

  print('Obtenemos la edad...');

  return alumnos[nombre] ?? 0;
}

Future<String> obtenerPremio(int edad) async {

  final premios = ['Jamón', 'Coche', 'Piso'];

  await Future.pause(
    const Duration(seconds: 2),
  );

  print('Obtenemos el premio...');

  return premios[edad % premios.length];
}

Future<void> main() async {

  final edad = await obtenerEdad('pedro');

  final premio = await obtenerPremio(edad);

  print(
    'Pedro con la edad de $edad tiene de premio: $premio',
  );
}

Resumen

• Future<T> representa un valor de tipo T que estará disponible posteriormente.

• Un Future termina:

• con un valor;
• o con un error.

• Los Future no implican automáticamente la creación de nuevos hilos.

• La asincronía habitual en Dart funciona mediante el event loop de cada isolate.

• then() permite registrar una función que se ejecutará cuando el Future se complete correctamente.

• catchError() permite gestionar errores de una cadena de Futures.

• whenComplete() ejecuta una acción independientemente de que la operación termine correctamente o con error.

• async indica que una función es asíncrona y devuelve un Future.

• await suspende temporalmente una función async hasta que se obtiene el resultado de un Future, pero no bloquea todo el programa.

• Para la mayoría de código nuevo se recomienda utilizar async, await y try-catch por resultar más sencillo de leer.

• Para realizar cálculos costosos realmente en paralelo se pueden utilizar isolates.

• Future.pause() puede utilizarse en Dart actual cuando únicamente queremos esperar un intervalo de tiempo.

Enlace a la página principal de la UD2

Enlace a la página principal del curso