Memahami Async/Await dalam JavaScript: Mendalami Waktu Output

Mengklarifikasi Perilaku Async/Menunggu JavaScript dalam Pengaturan Waktu

Dalam pengembangan JavaScript modern, async/menunggu telah menjadi alat penting untuk menangani kode asinkron. Terlepas dari kegunaannya, banyak pengembang mengalami kebingungan ketika harus memprediksi waktu keluaran yang tepat dalam fungsi yang menggunakan teknik ini. Hal ini terutama berlaku dalam penilaian pengkodean seperti yang dilakukan Adaface, di mana pemahaman alur operasi asinkron sangatlah penting.

Masalah yang Anda kerjakan menyajikan dua fungsi asinkron dengan perilaku yang tampaknya serupa, tetapi hasil berbeda dalam hal waktu. Pada pandangan pertama, kedua fungsi tersebut mungkin tampak membutuhkan waktu 10 detik, namun jawaban sebenarnya mengejutkan banyak pengembang, karena melibatkan pemahaman yang lebih dalam tentang bagaimana janji diselesaikan.

Artikel ini bertujuan untuk memandu Anda memahami kode, menguraikan cara kerjanya asinkron Dan menunggu mekanisme kerja, serta bagaimana urutan resolusi janji mempengaruhi hasil akhir. Pada akhir artikel ini, Anda akan memiliki pemahaman yang lebih jelas tentang cara kerja pengaturan waktu di JavaScript asinkron.

Mari selami kodenya untuk memahami mengapa fungsi pertama menghasilkan output 24 setelah 5 detik, dan fungsi kedua juga keluar 24 tetapi dengan struktur janji yang berbeda. Dengan pengetahuan ini, Anda akan lebih siap untuk penilaian wawancara mendatang.

Menjelajahi Operasi Asinkron dalam JavaScript

Skrip yang disediakan menunjukkan kekuatan operasi asinkron dalam JavaScript menggunakan asinkron Dan menunggu kata kunci. Ide utamanya adalah untuk menangani tugas-tugas asinkron seperti operasi yang tertunda secara efisien. Dalam kedua contoh, fungsinya setelah 5 detik (x) mensimulasikan penundaan 5 detik dengan mengembalikan janji yang diselesaikan dengan nilainya X. Penundaan ini penting untuk memahami urutan operasi dan bagaimana janji berinteraksi dengan alur fungsi.

Pada fungsi pertama, banyak(masukan), kode menunggu secara berurutan hingga dua janji diselesaikan. Itu menunggu kata kunci memastikan bahwa kode menghentikan sementara eksekusi hingga janji dikembalikan setelah 5 detik(3) terselesaikan. Kemudian, setelah janji pertama terselesaikan, kode tersebut menunggu 5 detik lagi untuk janji kedua setelah 5 detik(4) untuk menyelesaikan. Hal ini menghasilkan total waktu tunggu 10 detik sebelum penghitungan dilakukan. Perkalian masukan dengan kedua nilai yang diselesaikan menghasilkan keluaran akhir.

Fungsi kedua, detik_mult(masukan), meningkatkan kinerja dengan memulai kedua janji secara bersamaan. Dengan menugaskan setelah 5 detik(3) Dan setelah 5 detik(4) ke variabel sebelum diterapkan menunggu, kedua janji tersebut berjalan secara paralel. Ketika kode mencapai menunggu pernyataan, ia menunggu hingga kedua janji terselesaikan, namun keduanya sudah berlangsung, sehingga mengurangi total waktu tunggu menjadi hanya 5 detik. Eksekusi bersamaan ini menyoroti pentingnya mengoptimalkan operasi asinkron.

Skrip ini menunjukkan bagaimana async dan menunggu dapat digunakan untuk menangani kode asynchronous dengan bersih. Memahami kapan harus menjalankan tugas asinkron secara bersamaan atau berurutan sangat penting untuk mengoptimalkan kinerja. Itu detik_mult Pendekatan fungsi menunjukkan manfaat menghindari penundaan yang tidak perlu, sedangkan contoh pertama berguna ketika operasi harus dilakukan dalam urutan tertentu. Kedua contoh tersebut dapat diterapkan secara luas dalam skenario dunia nyata penanganan janji diperlukan, seperti mengambil data dari API atau melakukan operasi yang bergantung pada sumber daya eksternal.

function after5s(x) {
  return new Promise(res => {
    setTimeout(() => {
      res(x);
    }, 5000);
  });
}

// First approach using async/await with sequential waits
async function mult(input) {
  const f = await after5s(3);
  const g = await after5s(4);
  return input * f * g;
}

// Calling the function and handling the promise resolution
mult(2).then(value => {
  console.log(value); // Output: 24 after 10 seconds
});

function after5s(x) {
  return new Promise(res => {
    setTimeout(() => {
      res(x);
    }, 5000);
  });
}

// Second approach optimizing by starting both promises concurrently
async function second_mult(input) {
  const f = after5s(3); // Starts promise immediately
  const g = after5s(4); // Starts second promise concurrently
  return input * await f * await g;
}

// Calling the function and handling the promise resolution
second_mult(2).then(value => {
  console.log(value); // Output: 24 after 5 seconds
});

Menguasai Pola Asynchronous di JavaScript

Salah satu konsep terpenting dalam JavaScript modern adalah cara menangani tugas asinkron secara efisien. Sementara itu async/menunggu sintaksis menyederhanakan keterbacaan kode asinkron, ada faktor lain yang harus dipertimbangkan pengembang. Aspek penting dalam penggunaan fungsi async adalah memahami cara JavaScript mengelola lingkaran peristiwa dan tumpukan panggilan asinkron. Perulangan peristiwa memungkinkan JavaScript untuk menjalankan beberapa tugas secara bersamaan, bahkan dalam lingkungan single-thread, dengan memasukkan tugas-tugas non-pemblokiran, seperti janji, ke antrean dan melanjutkan eksekusi kode lainnya.

Elemen yang sering diabaikan dalam operasi asinkron adalah penanganan kesalahan. Dengan menggunakan sintaks async/await, pengembang dapat menggabungkan kode mereka dalam a coba...tangkap blok untuk mengelola penolakan janji dan kesalahan lainnya dengan baik. Metode ini memastikan bahwa setiap kesalahan yang terjadi dalam operasi asinkron ditangkap dan ditangani tanpa mengganggu aliran program. Fungsi asinkron tidak hanya meningkatkan kinerja tetapi juga membuat penanganan kesalahan kompleks menjadi lebih efisien dan lebih mudah untuk di-debug.

Area fokus utama lainnya adalah bagaimana caranya Janji.semua dapat digunakan untuk menangani banyak janji secara bersamaan. Berbeda dengan menunggu janji secara berurutan seperti pada contoh pertama, Janji.semua mengeksekusi semua janji secara bersamaan, mengembalikan hasil dalam sebuah array. Metode ini sangat membantu saat melakukan beberapa panggilan API atau melakukan beberapa tugas yang urutan eksekusinya tidak penting. Memahami cara menyusun tugas bersamaan dengan benar sangat penting untuk menulis kode JavaScript yang optimal dan terukur.