Posts

Bismillah, pada tips kali ini kita akan membahas bagaimana cara melakukan await pada Foreach yang didalamnya menggunakan anonymouse function async.

Ada kasus dimana kita sedang melakukan sebuah proses pada list data yang cukup banyak dan memakan waktu yang tidak diketahui per datanya, lalu kita ingin memastikan bahwa proses tersebut (Foreach secara keseluruhan) sudah selesai semuanya baru akan menjalankan operasi berikutnya.

pada Flutter, untuk menunggu hasil dari sebuah method asinkron, kita bisa menggunakan keyword await diawal seperti berikut

var result = await http.get("....");

kode diatas bermanfaat untuk menunggu sampai nilainya kita dapatkan, lalu bagaimana dengan method foreach yang kita hanya bisa menambahkan async pada anonymouse function didalamnya?

Sebagai contoh kita punya data list json seperti berikut

var siswa = [
    {
      "id": 1,
      "nama": "Tika",
      "sudah_lulus": true
    },
    {
      "id": 2,
      "nama": "Rizal",
      "sudah_lulus": true
    },
    {
      "id": 3,
      "nama": "Fairuz",
      "sudah_lulus": false
    },
    {
      "id": 4,
      "nama": "Endi",
      "sudah_lulus": false
    }
  ];

lalu kita ingin menampilkannya dengan melakukan looping menggunakan foreach, untuk menampilkannya kita anggap memakan waktu 1 detik per siswa.

myMethod() async {
  print ("--- Tampilkan siswa ---");
  siswa.forEach((s) async {
      await Future.delayed(Duration(seconds: 1));
      print(s['id']);
      print("Nama: ${s['nama']}");
      print("Sudah lulus: ${s['sudah_lulus'] ? "Lulus" : "Belum"}");
  });
  print ("-- Selesai menampilkan siswa --");
}

jika kita jalankan, maka kode diatas akan menyebabkan, kode program
print (“– Selesai menampilkan siswa –“); akan dijalankan lebih dahulu meskipun proses forEach belum selesai secara keseluruhan, dan sayangnya kita tidak bisa menambahkan await pada foreach diatas, maka hasilnya menjadi seperti berikut :

Lalu bagaimana cara kita menunggu proses forEach selesai dahulu semuanya baru kita jalankan kode program selanjutnya?

Caranya mudah, kita bisa gunakan forEach yang disediakan oleh class Future, sehingga kita bisa melakukan await pada foreachnya seperti berikut:

myMethod() async {
  print ("--- Tampilkan siswa ---");
  await Future.forEach(siswa, (s) async {
      await Future.delayed(Duration(seconds: 1));
      print(s['id']);
      print("Nama: ${s['nama']}");
      print("Sudah lulus: ${s['sudah_lulus'] ? "Lulus" : "Belum"}");
  });
  print ("-- Selesai menampilkan siswa --");
}

dan hasilnya seperti berikut :

Mudah-mudahan tips diatas bermanfaat bagi pembaca