Pelajari Cara Membuat Program Asinkron Dengan JavaScript

Pemrograman asinkron adalah pokok dalam pengembangan perangkat lunak. Sulit dipercaya bahwa konsep pemrograman ini baru ada sejak abad kedua puluh satu. Bahasa pemrograman F# adalah yang pertama di antara rekan-rekannya yang memperkenalkan pemrograman asinkron, pada tahun 2007.

Bahasa lain seperti C#, Python, JavaScript, dan C++ secara bertahap menambahkan dukungan untuk pemrograman asinkron. Pertanyaan besarnya adalah, nilai apa yang ditambahkan oleh pemrograman asinkron ke aplikasi Anda?

Artikel ini menjawab pertanyaan itu dan pertanyaan lainnya, jadi Anda akan mengetahui semua tentang cara menggunakan pemrograman asinkron.

Apa itu Pemrograman Sinkron?

Pemrograman sinkron mengacu pada program dalam bentuk paling dasar. Model pemrograman ini memproses baris kode dalam suatu program atau skrip secara berurutan. Itu selalu dimulai dari baris kode pertama dalam sebuah program. Kemudian menunggu sampai setiap baris kode telah menyelesaikan eksekusinya sebelum pindah ke yang berikutnya.

Model sinkron juga mencakup kode kondisional, seperti:

jika dan ketika pernyataan. Meskipun hanya beberapa kode dalam pernyataan kondisional yang akan dieksekusi, program akan tetap berjalan secara berurutan.

Contoh Program Sinkron

const SyncCode = () => {
 console.log("Ini adalah baris pertama dalam program")
 console.log("Ini adalah baris kedua dalam program")
 console.log("Ini adalah baris terakhir dalam program")
}
SyncCode();

Menjalankan program JavaScript di atas akan menghasilkan output berikut di konsol:

Ini adalah baris pertama dalam program
Ini adalah baris kedua dalam program
Ini adalah baris terakhir dalam program

Output di atas persis seperti yang Anda harapkan. Program dimulai dari atas dan menunggu sampai satu baris kode selesai sebelum pindah ke yang berikutnya.

Apa itu Pemrograman Asinkron?

Pemrograman asinkron adalah kebalikan dari pemrograman sinkron. Model pemrograman asinkron memproses beberapa baris kode secara bersamaan. Itu tidak menunggu sampai baris kode sebelumnya dalam suatu program telah menyelesaikan eksekusinya sebelum pindah ke yang berikutnya.

Terkait: Sinkron vs. Pemrograman Asinkron: Apa Perbedaannya?

Pemrograman asinkron dapat memotong waktu eksekusi menjadi dua, secara efektif menciptakan komputer yang lebih cepat.

Contoh Program Asinkron

const AsyncCode = () => {
 console.log("Ini adalah baris pertama dalam program")
 setTimeout(() => {
 console.log("Ini adalah baris kedua dalam program")
 }, 3000)
 console.log("Ini adalah baris terakhir dalam program")
}
KodeAsinkron();

Menjalankan Kode JavaScript di atas akan menghasilkan output berikut di konsol Anda:

Ini adalah baris pertama dalam program
Ini adalah baris terakhir dalam program
Ini adalah baris kedua dalam program

Jika Anda membandingkan keluaran konsol di atas dengan program asinkron yang menghasilkannya, Anda akan melihat bahwa ada perbedaan yang jelas. Panggilan untuk catatan yang mengatakan "Ini adalah baris kedua dalam program" muncul sebelum baris yang mengatakan "Ini adalah baris terakhir dalam program". Namun, keluaran konsol tidak mencerminkan hal ini.

Mengingat bahwa JavaScript terutama sinkron, kode dalam program di atas memang dijalankan secara berurutan. Tetapi JavaScript mendukung pemrograman asinkron melalui fitur-fitur seperti setWaktu habis() metode.

Itu setWaktu habis() metode adalah metode JavaScript asinkron yang membutuhkan dua argumen: fungsi dan penundaan. Penundaan adalah pengatur waktu (dalam milidetik), yang menunda eksekusi fungsi. Jadi, sementara program di atas menunggu tiga detik untuk menjalankan fungsi di setWaktu habis() metode, itu pindah ke baris berikutnya dalam kode. Ini menghasilkan eksekusi panggilan fungsi ketiga sebelum yang kedua.

Teknologi JavaScript Asinkron

Bagian dari setWaktu habis() metode yang disebutkan di atas, beberapa teknologi JavaScript menggunakan pemrograman asinkron. Teknologi ini menggunakan model pemrograman asinkron untuk mengembangkan aplikasi non-blocking yang lebih cepat. Beberapa teknologi tersebut antara lain:

• jQuery Ajax
• aksio
• NodeJS

Terkait: Apa itu Node.js? Inilah Cara Menggunakan JavaScript sisi Server

Membuat Program Asinkron Dengan JavaScript

Ada beberapa cara untuk menangani kode asinkron. Metode yang Anda pilih harus bergantung pada jenis aplikasi yang ingin Anda kembangkan. Metode ini mencakup fungsi panggilan balik, janji, dan async/menunggu.

Fungsi Panggilan Balik

Ada dua properti penting dari fungsi panggilan balik. Mereka berfungsi sebagai parameter untuk fungsi lain, dan mereka bergantung pada peristiwa eksternal untuk melakukan tugasnya. Itu setWaktu habis() metode yang digunakan dalam contoh asinkron di atas adalah fungsi panggilan balik. Program memberikannya fungsi log sebagai parameter (fungsi panggilan balik), dan hanya mengeksekusinya setelah tiga detik (peristiwa).

Fungsi panggilan balik sangat bagus untuk program kecil, tetapi seiring pertumbuhan aplikasi Anda, mereka bisa menjadi terlalu rumit dengan sangat cepat. Ini karena fungsi panggilan balik sering memanggil fungsi panggilan balik lainnya, membuat rantai panggilan balik bersarang.

Menggunakan Janji

JavaScript menambahkan dukungan untuk janji setelah fungsi panggilan balik. Mereka adalah alternatif yang baik saat membuat aplikasi yang lebih besar. Sebuah janji mewakili apa yang mungkin terjadi setelah operasi asinkron. Hasil potensial ini akan mengambil salah satu dari dua bentuk: terselesaikan atau ditolak. Fungsi terpisah menangani masing-masing hasil ini, menghilangkan kebutuhan untuk bersarang (masalah fungsi panggilan balik). Sebaliknya, janji mendorong fungsi rantai yang lebih mudah digunakan.

Setiap janji dimulai dengan yang baru Janji objek yang memiliki fungsi anonim dengan menyelesaikan dan menolak parameter. Dalam fungsi ini, Anda akan memiliki aplikasi asinkron, yang mengembalikan tekad jika operasi asinkron berhasil, atau menolak sebaliknya.

Itu kemudian() fungsi rantai menangani menyelesaikan fungsi, dan menangkap() fungsi rantai menangani menolak fungsi. Jadi, tidak perlu pernyataan if bersarang, seperti halnya fungsi panggilan balik.

Menggunakan Contoh Janji

const PromiseFunction = () =>{
 kembalikan Janji baru((putuskan, tolak) => {
 setTimeout(() => {
 resolve("operasi asinkron ini dijalankan dengan baik")
 }, 3000)
 })
}
PromiseFunction().then((hasil) => {
 console.log("Berhasil", hasil)
}).catch((kesalahan) => {
 console.log("Kesalahan", kesalahan)
})

Kode di atas mengembalikan output berikut di konsol:

Sukses operasi asinkron ini dijalankan dengan baik

Ini karena janji mengembalikan menyelesaikan fungsi, yang meneruskan hasilnya ke kemudian() fungsi. Jika janji mengembalikan menolak fungsi program menggunakan menangkap fungsi sebagai gantinya.

Menggunakan Async/Menunggu

Jika Anda tidak ingin membuat rantai janji saat menangani operasi asinkron, Anda dapat mencoba async/menunggu. Async/menunggu bukanlah alat asinkron yang sepenuhnya berbeda dari janji, hanya cara penanganannya yang berbeda. Ini menangani janji tanpa menggunakan metode rantai. Jadi, dengan cara yang hampir sama seperti janji menangani operasi asinkron lebih baik daripada fungsi panggilan balik, async/await memiliki manfaat dibandingkan janji biasa.

Ada dua atribut kunci dari setiap fungsi async/menunggu. Mereka mulai dengan tidak sinkron kata kunci, dan menunggu kata kunci menunggu hasil operasi asinkron.

Contoh Program Async/Menunggu

const PromiseFunction = () =>{
 kembalikan Janji baru((putuskan, tolak) => {
 setTimeout(() => {
 resolve("operasi asinkron ini dijalankan dengan baik")
 }, 3000)
 })
}
const AsyncAwaitFunc = async () => {
 const result = menunggu PromiseFunction();
 console.log (hasil);
}
AsyncAwaitFunc();

Kode di atas akan mengembalikan output berikut di konsol:

operasi asinkron ini dijalankan dengan baik

Apa Takeaways Utama?

Ada beberapa poin utama yang harus Anda ambil dari artikel ini:

• Pemrograman asinkron sangat berharga karena mengurangi waktu tunggu program, membuat aplikasi lebih cepat.
• Fungsi panggilan balik bisa sinkron atau asinkron.
• Promise menawarkan cara yang lebih baik untuk menangani operasi asinkron daripada fungsi panggilan balik.
• Fungsi async/await menangani janji dengan cara yang lebih baik daripada menggunakan fungsi rantai.
• Fungsi async/await menangani operasi asinkron dengan cara yang terlihat sinkron, sehingga lebih mudah dipahami.
• Fungsi panah membantu Anda menulis kode yang lebih baik.

Fungsi Panah JavaScript Dapat Membuat Anda Menjadi Pengembang yang Lebih Baik

Ingin menjadi lebih baik dalam pengembangan web? Fungsi panah, ditambahkan ke JavaScript ES6, memberi Anda dua cara untuk membuat fungsi untuk aplikasi web.

Baca Selanjutnya

Tentang Penulis