JavaScript adalah bahasa pemrograman yang ditafsirkan yang dikenal dengan gaya asinkronnya. Ini adalah salah satu faktor yang membuat JavaScript termasuk bahasa dengan kinerja cepat, bahkan tercepat jika dibandingkan dengan bahasa interpretasi lainnya, seperti Perl, PHP, Python, Ruby, dll (Ingat, ini bukan masalah bahasa yang dikompilasi. ) Show Pengertian asynchronus merupakan salah satu hal penting dalam dunia Javascript. Konsep ini sering terabaikan saat masih dalam tahap belajar dasar, mungkin karena konsepnya terlalu rumit untuk dijelaskan atau karena alasan lain. Bahkan banyak yang sudah bertahun-tahun menggunakan javascript, ternyata masih banyak yang masih belum paham dengan konsep asinkron. Meskipun dalam praktiknya mungkin sudah sering digunakan Konsep asinkron memang merupakan salah satu konsep fundamental, namun tidak terlalu mudah untuk dipahami, namun ada istilah “practice makes perfect”. Semakin sering Anda berlatih, semakin baik pemahaman Anda. Tapi berlatih tanpa memahami konsep juga buta, terlalu banyak trial and error dan memakan waktu. Menurut saya, cara ideal untuk memahami asinkron adalah dengan memahami konsep secara bertahap dan mempraktekkannya. Ingat kuncinya bertahap bukan borongan
Karena blog ini lumayan panjang, estimasi bacanya sampai 20 menit 😄. Jadi saya membuat daftar isi untuk memudahkan perpindahan bagian. Disarankan untuk menyiapkan camilan dan secangkir kopi agar Anda lebih menikmati bacaan ini Mengetahui JanjiJanji adalah salah satu konsep yang hadir di ES6 (ES2015). Konsep ini hadir untuk mengubah gaya dalam memecahkan masalah proses asinkron yang sebelumnya bertele-tele. Sebelumnya kita menggunakan callback untuk menangani proses asinkron, namun lama kelamaan kita akan kesulitan ketika jumlah callback yang digunakan bertambah, bahkan akan ada callback di dalam callback dan seterusnya. Masalah ini sering disebut callback hell. Berikut adalah contoh panggilan balik neraka. (Asumsikan kita ingin membaca 4 file, kemudian ingin menggabungkan isi file tersebut menjadi 1 file)
Mata kita sakit saat melihat kode di atas kan? . Kode di atas sangat tidak dapat dipertahankan. Itu baru 5 callback, bagaimana kalau lebih? Konsep dasar janjiSebelum kita membahas lebih dalam tentang promise, ada baiknya kita memahami konsepnya terlebih dahulu agar tidak bingung. Dengan konsep Promise, secara manusiawi kita bisa membuat analogi sederhana seperti ini
Kemudian kita dapat mengambil aspek-aspek penting dari janji itu, dan menyusun rencana seperti ini
Dari susunan tersebut, kemudian muncul pertanyaan
Ya, namanya juga masa depan, tidak ada yang tahu kejadian yang akan menghalangi rencana tersebut. Mari kita asumsikan jika besok malam hujan dan badai, itu berarti kita hanya akan bertemu di pertandingan dengan teman-teman. Jadi, kami mendapatkan rencana akhir seperti ini
Nah, sekarang kita bisa membagi susunan rencana akhir menjadi 4 keadaan.
Jadi, berikut ini adalah state dari alur Promise yang sebenarnya ada di JavaScript Janji menyatakan Jika diterjemahkan ke dalam koding, kita dapat menyimpulkan aspek-aspek penataan artikel seperti ini
Kemudian kode seperti ini _Jadi penjelasan dari coding diatas adalah jika janji 1. Nah, ketika nongkrongDiKafe atau 1 selesai maka yang terakhir kita akan 4Seperti di dunia nyata, di dunia pemrograman kita juga harus merencanakan dan mengidentifikasi kemungkinan-kemungkinan yang akan terjadi pada aplikasi kita. Kemudian aplikasi kita berjalan dengan sempurna. Pernahkah Anda menggunakan aplikasi yang tiba-tiba macet, tertunda, tidak berfungsi, ditutup paksa, atau menampilkan pesan kesalahan yang tidak jelas? . Jadi seperti, aplikasi yang dibuat tidak tahu apa yang harus dilakukan ketika terjadi kejadian yang tidak direncanakan Janji dalam praktekOke kita sudah membahas konsep dasar dari promise, setidaknya kita sudah mengerti bagaimana promise bekerja, keadaan apa yang terjadi pada promise dengan analogi yang saya jelaskan di atas. Dan di bagian ini kita akan melakukan latihan dasar Buat objek janjiPada bagian sebelumnya, kita telah melihat contoh penggunaan promise dengan 5, 6 dan 7. Nah masalahnya, tidak semua fungsi yang kita gunakan ada di dalam objek Promise. Fungsi _8 pada contoh callback hell di atas sebenarnya bukan merupakan objek promise, jika kita menggunakan 9 tentu akan menghasilkan error. Lalu, bagaimana cara membuat objek Promise dan menghilangkan panggilan balik yang kotor?
Nah itulah cara membuat objek janji pada proses asinkron non-janji. Jadi, apa itu _0 dan 1? . ) Kemudian kita bisa menggunakan janji yang telah kita buat seperti iniOya, dalam hal itu hanya seperti blok try-catch dong, seperti pada bahasa pemrograman pada umumnya. Tunggu gan, try-catch untuk proses sinkron, sedangkan promise untuk proses asinkron. Mari kita coba ubah ini Tebak mana yang muncul lebih dulu? . Yang muncul pertama adalah 4. Karena apa? . Bedanya jika kita menggunakan proses sinkron seperti yang biasa kita gunakan, maka proses dibawahnya akan dibuat menunggu sampai proses diatasnya selesaiRantai janjiSebelumnya kita sudah membahas callback hell dan melihat contoh pembuatan & penggunaan promise. Nah, pada kasus callbach hell di atas sebenarnya kita bisa mengubahnya menjadi sebuah promise agar kodenya lebih rapi dan mudah dibaca. Mari mencoba Pertama-tama, kita mengubah fungsi _6 dan 7 menjadi promise terlebih dahulu, seperti ini
Tunggu dulu, tapi kenapa cara membuat objek promise berbeda dengan contoh yang sudah dibuat? Nah ini adalah contoh baru dimana kita menggunakan teknik currying, di blog sebelumnya saya sudah menjelaskan tentang currying, bisa dibaca disini. Oke skip aja, kita lanjut dulu. Nah, setelah membuat objek promise seperti di atas, mari kita gunakan promise untuk menyelesaikan kasus seperti callback hell tadi
Bagaimana? . Ya walaupun masih bisa dibuat sederhana. Oke, mari kita lanjutkan Janji dengan praktik terbaikBerbicara tentang best practice, sangat tabu bagi seorang software engineer untuk membiarkan kode aslinya apa adanya, yang penting caranya atau sejenisnya. Sayangnya, aplikasi akan "berukuran besar dan berat karena banyaknya library atau node_modules yang diinstal" Seorang insinyur perangkat lunak yang baik pasti akan memprioritaskan semua fitur bawaan terlebih dahulu daripada harus terburu-buru menggunakan perpustakaan atau aplikasi pihak ketiga, dan memikirkan cara membuat kode lebih mudah dibaca dan optimal dalam hal kinerja dan algoritme, serta dapat digunakan dalam jangka panjang. Nah, lebih dari itu, pada poin ini kita akan membahas apa yang bisa membuat kode promise lebih mudah dibaca dan dioptimalkan? Asinkron - MenungguJika Anda masih bingung atau belum familiar dengan promise, 0 adalah cara yang tepat untuk membuat kode promise lebih mudah dibaca dan mudah dibaca seperti kode sinkron pada umumnya. Tapi ketentuannya keyword 1 harus di fungsi 2. Misalnya, kami menggunakan kasus 3 seperti di atas
Seperti yang bisa kita lihat, kode di atas sangat mudah dibaca seperti proses sinkron pada umumnya. Kita dapat menggunakan blok _4 seperti biasa untuk menangani kesalahan. Tapi, kenapa di _5 masih ada 5? . Dan memang ini praktik terbaik, kita harus mengembalikan janji pada fungsi async. Mari kita lihat contoh penggunaan fungsi async yang bukan praktik terbaikApa? . Jadi, meskipun kita sudah langsung mengembalikan nilai di fungsi async, kita tetap harus memanggilnya seperti ini Yup, ujungnya tetap kembali ke janji kan? . Jangan berharap Anda bisa mendapatkan nilai secara instan jika Anda mengembalikan nilai atau nilai dalam fungsi async. Adapun contoh best practice adalah Jadi, jika Anda masih berpikir bahwa async-wait dan promise adalah hal yang berbeda, Anda salah. Karena sudah dijelaskan diatas bahwa 0 sendiri merupakan cara atau teknik membuat promise code mudah dibaca seperti synchronous code pada umumnya. Kemudian, kesimpulannya adalah
Karena jika Anda mau, fungsi async bukanlah fungsi normal yang dapat langsung mengembalikan nilai atau nilai, melainkan akan tetap berjalan secara asinkron dan akan "memaksa" mengembalikan Promise Nanti kalau sering ketemu kasusnya dan sering baca teorinya pasti paham sendiri ^^ Menjanjikan kekuatan superSebenarnya ada banyak fitur pada objek promise, namun sangat sedikit orang yang melihat dan menggunakannya, padahal fitur tersebut merupakan kekuatan super dan membantu dalam menyelesaikan kasus promise, terutama untuk penanganan array promise. Fitur yang dimaksud adalah
Nah, kita akan bahas satu per satu fitur tersebut beserta studi kasusnya. Namun, karena _1 belum dirilis, kami hanya akan membahasnya sampai 21. Janji. balapan _3 adalah salah satu fitur dari janji yang menghasilkan janji pertama yang memasuki keadaan terpenuhi dari susunan janji. Ketentuannya adalah sebagai berikut
Lalu, apa studi kasusnya jika Anda ingin menerapkan 3 ini? . Nah untuk kasus seperti ini
Nah kira-kira implementasi kodenya seperti ini Ada kasus menarik lainnya yang saya implementasikan menggunakan 3 ini, yaitu membuat sistem pembatalan permintaan. Untuk kasus ini
Contoh penerapannya adalah sebagai berikut
Nah kira-kira seperti itulah contoh penerapan 3 untuk membuat sistem request cancel. Omong-omong, ini tidak hanya berlaku untuk kasus pencarian langsung, tetapi kami juga dapat menerapkannya pada tombol batal di formulir input. Jadi pengguna dapat mengklik batal seperti itu saat mengirimkan. Keren juga kan? 2. Janji. semua _0 adalah fitur janji yang menghasilkan nilai dari semua janji yang dipenuhi diproses. Ketentuannya adalah sebagai berikut
Lalu, apa studi kasus untuk menerapkan 0 ini? . Intinya fitur ini bagus digunakan ketika kita dihadapkan pada beberapa promise yang tidak saling ketergantungan, namun kita ingin mendapatkan hasil dari promise tersebut sekaligus. Sebagai contoh jangan terlalu jauh, langsung saja kita gunakan contoh kasus dari poin async-wait di atasSebelumnya, kami menulis kode async-await di atas seperti ini Jadi, kami memodifikasi fungsi seperti ini untuk mendapatkan kinerja yang lebih optimal
Mengapa saya mengatakan bahwa kinerjanya lebih optimal saat menggunakan 0?
Nah, jika kita menggunakan 4 kali menunggu secara berurutan tadi, berarti kita telah menghabiskan waktu untuk menunggu hal-hal yang tidak penting. Mengapa? Jadi, mengapa menunggu? . Mengapa? . Begitu juga dengan p4, kita juga harus menunggu p3 selesai. Belum lagi _7, hadeeh
Tapi, jika kita menggunakan 0, keempat proses tersebut tidak saling menunggu, melainkan berjalan secara bersamaan. Namun jika satu proses selesai, maka proses tersebut menunggu proses lainnya selesai. Jika berdasarkan asumsi di atas, maka
Kalau masih bingung, mari kita lihat contoh perbandingan pada grafik ini Perbandingan waktu muat Async & Sinkronisasi Nah, sampai sekarang kamu paham kan? . Ya walaupun selisihnya hanya 1,5 detik itu kan hanya 4 proses, bagaimana jika prosesnya lebih? . Oleh karena itu, kita harus tahu kapan dan di mana menggunakan 0 atau memang harus menunggu proses berjalan satu per satu3. Janji. allSettled _2 ini merupakan fitur baru di ES2020, fitur ini hadir untuk mengatasi kekurangan dari 0. Semua janji pada _0 akan ditolak jika hanya salah satu janji yang masuk ke status ditolak. Tapi tidak dengan _2, 2 ini tidak memiliki status ditolak kecuali kita membuatnya sendiri. Agar tidak bingung, berikut ketentuan 2
Lalu, apa implementasi untuk ________22______2 ini? . Untuk kasus dan penggunaannya sama dengan 0 tetapi jika kita tidak ingin membatalkan semuanya hanya karena satu janji yang gagal, 2 adalah solusinyaSebagai contoh, mungkin pernah kita jumpai kasus untuk membaca file yang path filenya dari array atau database, daripada mengecek satu per satu lalu membacanya, lebih baik dibaca saja, kalaupun ada error, itu akan dilewati. Cuplikan kode terlihat seperti ini Nah, bagus banget kan? PenutupanOke, mungkin kali ini kita bahas Janji kita saja. Jadi bisa disimpulkan kan? . Semua fitur bawaan dari promise sangat membantu untuk menyelesaikan masalah dan kasus asinkron. Jika cara kita benar dalam mengimplementasikan janji, itu sangat bagus, karena sangat jarang orang memperhatikan hal ini. Yupp ya, satu hal lagi mungkin karena kebanyakan orang benci asynchronous programming, ini buktinya NodeJS Seperti yang dapat dilihat di atas, banyak orang membenci, tidak menyukai NodeJS, atau menganggap NodeJS sulit karena menurut mereka pemrograman asinkron "sangat sulit dilakukan dengan benar". Ya susah banget kalo belum tau konsepnya haha, jadi semoga dengan membaca blog ini kalian paham konsep asynchronous programming khususnya Promise di NodeJS. Semoga bermanfaat, jangan lupa share ya 😃 Apa itu Janji dalam javascript?Janji adalah salah satu fitur penting ES6. Object promise merepresentasikan solusi atau error pada operasi Asinkron.
Kapan kita menggunakan asinkron?Proses asinkron sering digunakan untuk komunikasi data , karena data adalah bagian inti dari aplikasi, konsep asinkron sangat penting untuk memahami.
Apa itu fungsi callback javascript?Callback dalam Javascript adalah fungsi yang dikirim sebagai parameter ke fungsi lain. Fungsi di atas adalah contoh callback yang berjalan sinkron karena callback fungsi langsung dieksekusi pada proses fungsional yang bersifat sinkron.
Apa itu async Tunggu Javascript?Async/await adalah fitur yang hadir sejak ES2017. Fitur ini memudahkan kita menangani proses asinkron . Async/Await adalah sintaks khusus yang digunakan untuk menangani Janji sehingga penulisan kode lebih efisien dan rapi. |