Fahami Promise dalam Javascript

<Tutorial >

Apa tu promise? Dalam bahasa melayunya janji. Ya promise dalama javascript sama juga dengan promise dalam real life. Contoh aku janji aku nak buat blog post baru kat blog ni. Dalam janji biasanya akan ada 2 result kan? Janji ditepati & juga janji dicapati.haha Kalau aku berjaya publish blog yang aku sedang tulis ni, jadi janji ditepati tapi kalau aku tak publish pun maknanya janji aku dah dicapatikan lah . Macam tu juga promise dalam javascript, ada 2 result, resolve & reject.

let janji = new Promise((resolve, reject) => {
    // Buat sesuatu yang berfaedah
    let published = true;
    if(published){
        resolve('ditepati');
    }else {
        reject('dicapati');
    }
});
// Guna promise dalam js
janji
    .then((mesej) => console.log('Janji telah ' + mesej)) // klu resolve
    .catch((mesej) => console.log('Janji telah ' + mesej)); // kalau reject


Kenapa perlu guna promise? Sebelum wujudnya promise, dalam asynchronous programming, developer javascript selalunya akan mengunakan callback untuk memastikan function tidak run sebelum task sebelumnya siap & hanya akan run selepeas task sebelumnya siap.

Synchronous programming

console.log('task no.1');
console.log('task no.2');
console.log('task no.3');
console.log('task no.4');
/* result:
task no.1
task no.2
task no.3
task no.4
*/


Asynchronous programming

console.log('task no.1');
setTimeout(() => {
    console.log('task no.2');
}, 2000);  // delay 2 saat
console.log('task no.3');
console.log('task no.4');
/* result:
task no.1
task no.3
task no.4
task no.2
*/
// selepas 2 saat baru task no.2 siap

Akan tetapi mengunakan callback akan menjadi masalah jika code kita terlalu besar dan terlalu banyak task callback function perlu diselesaikan sebelum ia siap. Jadi code akan menjadi susah untuk dibaca. Contoh callback function akan di update kemudian hari..

Belanja saya kopi

Artikel lain

Fahami React Context API

Sebagai developer reactjs yang baharu macam aku, aku selalu gunakan teknik prop drilling untuk pass prop ke child component yang aku buat. Cara ini tak bagus kalau projek kita itu adalah projek yang besar. Aku tahu mengenai kewujudan react context API atau state management library lain seperti redux, mobx, recoil dan banyak lagi library untuk… Continue reading Fahami React Context API

Asas Node.js – Built-in module

Dalam Node.js terdapat tidaklah terlalu banyak built-in module. Tapi aku tak akan bincangkan kesemua module tersebut. Aku hanya akan bincangkan beberapa built-in module yang agak penting & digunakan agak kerap ketika pembangunan aplikasi node.js. Antaranya adalah: Path module OS module File System Module Events Module HTTP Module Path module Digunakan untuk handle file path. Contohnya… Continue reading Asas Node.js – Built-in module