JavaScript Academy · Pelajaran

Mikrotugas dan Promise

Pelajari alasan callback promise dijalankan lebih dahulu.

Mikrotugas dan Promise adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa Itu Tugas Mikro?

Tugas mikro adalah pekerjaan tertunda berprioritas tinggi. Panggilan balik janji (.then, .catch, .finally) dan queueMicrotask semuanya menjadwalkan tugas mikro.

Aturan utamanya: setelah setiap eksekusi sinkron, semua tugas mikro dikosongkan sebelum tugas makro apa pun.

Panggilan Balik Janji Ditunda

Bahkan janji yang sudah terselesaikan tetap menjadwalkan panggilan balik .then-nya sebagai tugas mikro. Panggilan balik tersebut tidak berjalan secara sinkron.

console.log('start');
Promise.resolve().then(() => console.log('promise then'));
console.log('end');

Tugas Mikro Mengalahkan Tugas Makro

Ini adalah aturan pengurutan yang paling penting. Panggilan balik janji berjalan sebelum panggilan balik setTimeout, meskipun pewaktu tersebut dijadwalkan lebih dahulu.

setTimeout(() => console.log('timeout (macro)'), 0);
Promise.resolve().then(() => console.log('promise (micro)'));
console.log('sync');

Antrean Tugas Mikro Dikosongkan Sepenuhnya

Perulangan peristiwa mengosongkan seluruh antrean tugas mikro sebelum mengambil tugas makro berikutnya. Beberapa panggilan balik janji semuanya berjalan bersama-sama selama pengosongan tersebut.

setTimeout(() => console.log('macro'), 0);
Promise.resolve().then(() => console.log('micro 1'));
Promise.resolve().then(() => console.log('micro 2'));
console.log('sync');

Janji Berantai

Setiap .then dalam rangkaian menjadwalkan tugas mikro baru ketika tugas sebelumnya selesai. Semuanya tetap berjalan sebelum pewaktu tertunda apa pun.

setTimeout(() => console.log('timeout'), 0);
Promise.resolve()
  .then(() => console.log('then 1'))
  .then(() => console.log('then 2'))
  .then(() => console.log('then 3'));
console.log('sync');

Tugas Mikro yang Dijadwalkan Saat Pengosongan

Jika sebuah tugas mikro menjadwalkan tugas mikro lain, tugas baru tersebut juga berjalan dalam pengosongan yang sama, sebelum tugas makro apa pun. Antrean terus dikosongkan sampai benar-benar kosong.

Promise.resolve().then(() => {
  console.log('micro A');
  Promise.resolve().then(() => console.log('micro B (added later)'));
});
setTimeout(() => console.log('macro'), 0);
console.log('sync');

Nilai yang Terselesaikan Mengalir

Nilai yang dikembalikan dari penangan .then menjadi masukan bagi penangan berikutnya dalam rangkaian, semuanya melalui tugas mikro.

Promise.resolve(2)
  .then(n => n * 3)
  .then(n => n + 1)
  .then(n => console.log('result', n));
console.log('sync first');

Pola asinkron/menunggu Menggunakan Tugas Mikro

Kode setelah await dilanjutkan sebagai tugas mikro. Jadi, kelanjutan yang ditunggu berjalan sebelum pewaktu yang dijadwalkan lebih dahulu.

async function run() {
  console.log('a');
  await null;
  console.log('c (after await)');
}
setTimeout(() => console.log('d (timeout)'), 0);
run();
console.log('b');

Demo Pengurutan Gabungan

Gabungkan semuanya. Prediksikan urutannya: sinkron terlebih dahulu, lalu semua tugas mikro, kemudian tugas makro.

console.log('1 sync');
setTimeout(() => console.log('5 timeout'), 0);
Promise.resolve().then(() => console.log('3 promise'));
Promise.resolve().then(() => console.log('4 promise'));
console.log('2 sync');

Mengapa Kelaparan Tugas Mikro Berisiko

Karena tugas mikro selalu berjalan sebelum tugas makro, tugas mikro yang terus-menerus menjadwalkan lebih banyak tugas mikro dapat membuat kelaparan pewaktu dan perenderan. Batasi panjang rangkaian tugas mikro.

let n = 0;
function loop() {
  if (n++ < 3) {
    console.log('micro ' + n);
    Promise.resolve().then(loop);
  }
}
setTimeout(() => console.log('macro after micros'), 0);
loop();

Mengapa Pengurutan Ini Penting

Mengetahui bahwa tugas mikro berjalan sebelum tugas makro menjelaskan mengapa hasil janji muncul sebelum panggilan balik pewaktu dan mengapa bug pengurutan terjadi. Aturannya sederhana: s in k ron, lalu kosongkan semua tugas mikro, kemudian satu tugas makro, ulangi.

console.log('A');
Promise.resolve().then(() => console.log('B'));
setTimeout(() => console.log('D'), 0);
console.log('C');

Pemeriksaan Singkat

Sebuah .then dari janji dan sebuah setTimeout(fn, 0) sama-sama sedang menunggu. Mana yang berjalan lebih dahulu?

Rangkuman: Tugas Mikro dan Janji

Anda telah mempelajari aturan prioritas:

Tugas mikro berasal dari janji dan queueMicrotask.
Seluruh antrean tugas mikro dikosongkan sebelum tugas makro apa pun.
Kelanjutan async/await adalah tugas mikro.
Rangkaian tugas mikro tanpa akhir dapat membuat pewaktu dan perenderan kelaparan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mikrotugas dan Promise” gratis?

Ya — teks lengkap “Mikrotugas dan Promise” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Mikrotugas dan Promise”?

Pelajari alasan callback promise dijalankan lebih dahulu. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Mikrotugas dan Promise” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy