Tutorial Asynchronus (Promise & Await) Javascript di Node JS + Express
Atasi Callback Hell dengan Promise dan Await!
Tutorial Promise & Await di Node JS
Atasi Callback Hell dengan Promise dan Await!
Kembali lagi fellas dengan saya Kiddy. Seperti biasa pada tutorial kali ini gue mau jelasin tentang cara mengatasi synchronus-nya javascript. Yah bagi yang pernah atau bahkan lagi ngoding javascript baik itu di web component kaya JQuery maupun pake Javascript yang macamnya kaya di React JSX, Angular 1, Ionic 1, atau bahkan buat backend pasti enggak asing sama yang namanyaCallback Hell.
Eits tunggu dulu, saya mau kasih pemberitahuan bahwa tutorial ini adalah lanjutan dariTutorial RESTful API Node JS + Express + MySQL — Part 1.Bagi kalian yang belum pernah baca tutorial itu, kalo mau nyoba yang ini mending baca yang itu dulu deh hehehe.
Oke lanjut mangg!
Nah sebelum lanjut saya jelasin dulu apasih Callback Hell itu? Ini menurut saya aja lho…
Callback Hell adalah struktur code dasar javascript yang pada umumnya menggunakan callback untuk mendapatkan hasil, semakin banyak fungsi callback yang kita gunakan maka struktur code javascript akan semakin buruk dan bertingkat layaknya piramida. Nah biar ngelotok ke otak daripada teori mulu coba liat contohnya dari code yang pernah saya buat diTutorial RESTful API Node JS + Express + MySQL — Part 1 nah kalo kita perhatikan fungsiexports.users, kita melakukan pemanggilan query ke database. Lalu perhatikanfunction (error, rows, fields). Fungsi itulah yang disebut callback, saat kita memanggil fungsi query dari class connection. Class query memberikan tiga kembalian yaitu berupa
- Error, apabila ada SQL Exception
- rows, data dari database apabila tidak ada exception
- fields, fields dari masing-masing table. Nah ketiga kembalian itu dirangkum dalam satu fungsi yang disebut callback(error, rows, fields). Lalu permasalahannya dimana? Oke kita langsung liat contoh callback hell dari situscallbackhell.com
Nah loh? pusing nggak tuh bacanya? Bagi yang baru awal ngoding pake javascript mungkin ini code standar kalian ngoding pasti begini, karena kalian belum tau fungsi Promise dan Await yang Javascript punya.
Nah saya akan berikan kasus untuk belajar. Pada tutorial sebelumnya, kita membuat table yang bernama Person. Nah saya ingin setiap Person yang disimpan di table punya nomor handphone yang disimpan terpisah pada table lain. Kenapa seperti itu? Karena setiap person bisa saja memiliki lebih dari satu nomor handphone, contohnya dia bisa saja punya sepuluh handphone yang pastinya nomor tiap handphone berbeda (maklum anak sultan hahaha).
Buat dulu tablenya dengan script
CREATE TABLE IF NOT EXISTS `contact` (`id` int(11) NOT NULL AUTO_INCREMENT,`user_id` int(11),`phone_number` varchar(50) NOT NULL DEFAULT '0',PRIMARY KEY (`id`))Kita akan mengambil data dari tiap pengguna dan akan dikirim lewat console.log saja. Bagaimana logika kalian? Mungkin bagi yang belum tau Promise dan Await akan membuat seperti ini.
Ah my eyes… strukturnya buruk sekali kan? itu baru dua callback loh, bagaimana kalo adasepuluh callback? Modar baca kodenya koe hahaha. Itulah yang disebut istilahCALLBACK HELL!Anak Javascript pasti tau banget nih… Tenang aja gengs ada caranya kok untuk menghindari callback hell kampret itu. Kita akan memanfaatkan fungsi Promise dan Await.
Oke pertama kita buat dulu satu fungsi dan kasih namafindContact.
functionfindContact(id){return newPromise(resolve => {varquery = 'SELECT * FROM contact where user_id = ?';connection.query(query,[ id ],function(error, rows, fields){if(error){console.log(error)}else{resolve(rows); //Kembalian berupa kontak data}});});}oke kalo udah kita akan ubah export.users kita menjadi seperti dibawah ini
exports.findUsers =async function(req, res) {varuser_id = req.params.user_id;letlog =awaitfindContact(user_id);console.log(log);varquery = 'SELECT * FROM person where id = ?';connection.query(query, [ user_id ],function(error, rows, fields){if(error){console.log(error)}else{returnresponse.ok(rows, res)}});};Bedanya apasih sama sebelumnya? Disini kita menambahkan fungsi async sebelum function pada baris pertama. Lalu kita memanggil fungsifindContactdengan mengirimkan parameteruser_id. Setelah itu fungsifindContactakan mengirimkan result dari tablecontact.Jangan lupa isi table contact terlebih dahulu dulu. Nah sekarang coba deh jalanin seperti bisa dan eksekusi fungsinya.
Kalo kalian mendapatkan hasil seperti ini maka ini berhasil dan caranya sudah tokcer!
Nah dengan begini berarti kode kamu semakin bersih kan dari callback hell? oke sekian aja dari saya ya, sisanya tinggal kamu berkreasi aja menggunakan cara dasar yang telah saya ajarkan. Jadi developer harus kreatif ya ^^
Adios~
Artikel ini merupakan konten legacy dari blog Medium (Tahun 2018). Beberapa konsep atau sintaks mungkin sudah mengalami perubahan pada versi terbaru.