React.js
  • Roadmap belajar React.js
  • Tahap 1: Dasar-dasar JavaScript
    • Apa itu JavaScript dan kegunaannya
    • Sejarah dan perkembangan JavaScript
    • Apa itu Node.js dan hubungannya dengan JavaScript
    • Cara instal Node.js
    • Cara menjalankan JavaScript di Node.js
    • Variabel dalam JavaScript
    • Tipe data dalam JavaScript
    • Operator dalam JavaScript
    • Truly dan Falsy dalam JavaScript
    • Kondisional dalam JavaScript
    • Looping dalam JavaScript
    • Fungsi dalam JavaScript
    • Parameter dan Return Value dalam JavaScript
    • DOM di JavaScript dan Cara manipulasinya
    • Event Handling dalam JavaScript
    • Try, catch, dan finally dalam JavaScript
    • Callback dalam JavaScript
    • Promise dalam JavaScript
    • Async dan Await dalam JavaScript
  • Tahap 2: JavaScript Lanjutan
    • OOP dalam JavaScript
    • ES6
    • LocalStorage dalam JavaScript
    • FetchAPI dalam JavaScript
  • Tahap 3: Memulai dengan React.js
    • Apa itu React?
    • Konsep Virtual DOM
    • Apa itu JSX?
    • Langkah-langkah Setup Project React.js
    • Apa itu Komponen dalam React?
    • Apa itu Props dan State dalam React?
    • Apa itu Event Handling dalam React?
    • Apa itu Component Lifecycle dalam React?
    • Apa itu Hooks dalam React?
    • Apa itu Custom Hooks dalam React?
  • Tahap 4: React Lanjutan
    • Apa itu Context API dalam React?
    • Apa itu State Management (Redux)?
    • Apa itu Routing di React?
    • Apa itu Dynamic Routing, Private Routing, dan Nested Routing?
    • Cara menulis CSS di React
    • Cara Menggunakan Bootstrap di React
    • Cara Menggunakan Tailwind CSS di React
    • Cara Fetching data dari API di React
    • Cara Menampilkan data dinamis di React
    • Error handling dalam pengambilan data
    • Cara Testing komponen di React
    • End-to-end testing dengan Cypress atau Selenium
Powered by GitBook
On this page
  1. Tahap 1: Dasar-dasar JavaScript

Promise dalam JavaScript

PreviousCallback dalam JavaScriptNextAsync dan Await dalam JavaScript

Last updated 10 months ago

Apa itu Promise?

Promise adalah objek yang digunakan untuk menangani operasi asinkron dalam JavaScript. Promise mewakili nilai yang mungkin tersedia sekarang, di masa mendatang, atau tidak sama sekali. Promise membantu menangani kode asinkron dengan cara yang lebih mudah dibaca dan ditulis daripada callback.

Status Promise

Promise memiliki tiga status:

  1. Pending: Status awal, belum selesai atau gagal.

  2. Fulfilled: Operasi selesai dengan sukses.

  3. Rejected: Operasi gagal.

Sintaks Promise

let promise = new Promise((resolve, reject) => {
    // Operasi asinkron
    if (/* operasi sukses */) {
        resolve(value);  // Selesaikan promise
    } else {
        reject(error);  // Gagalkan promise
    }
});

Menggunakan Promise

Promise memiliki metode .then() untuk menangani nilai sukses (fulfilled) dan .catch() untuk menangani kesalahan (rejected).

Contoh Promise

Membuat dan Menggunakan Promise

let myPromise = new Promise((resolve, reject) => {
    let success = true;

    if (success) {
        resolve('Operation was successful');
    } else {
        reject('Operation failed');
    }
});

myPromise
    .then((message) => {
        console.log(message);  // Output: Operation was successful
    })
    .catch((error) => {
        console.error(error);
    });
  • Penjelasan: myPromise adalah Promise yang mensimulasikan operasi yang bisa berhasil atau gagal. Jika operasi berhasil, resolve dipanggil, dan jika gagal, reject dipanggil. .then() menangani kasus sukses, sedangkan .catch() menangani kasus gagal.

Promise Asinkron (Misalnya, Menggunakan setTimeout)

let asyncPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Async operation completed');
    }, 2000);
});

asyncPromise
    .then((message) => {
        console.log(message);  // Output: Async operation completed (setelah 2 detik)
    })
    .catch((error) => {
        console.error(error);
    });
  • Penjelasan: asyncPromise menggunakan setTimeout untuk mensimulasikan operasi asinkron. Setelah 2 detik, resolve dipanggil, dan pesan sukses ditampilkan melalui .then().

Chaining Promises

Promise bisa dirantai (chained) untuk menjalankan beberapa operasi asinkron secara berurutan.

let firstPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('First operation completed');
    }, 1000);
});

firstPromise
    .then((message) => {
        console.log(message);  // Output: First operation completed
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('Second operation completed');
            }, 1000);
        });
    })
    .then((message) => {
        console.log(message);  // Output: Second operation completed
    })
    .catch((error) => {
        console.error(error);
    });
  • Penjelasan: Promise pertama menyelesaikan operasinya dalam 1 detik dan mengembalikan Promise kedua, yang juga menyelesaikan operasinya dalam 1 detik. Pesan dari kedua Promise ditampilkan secara berurutan.

Sumber

Promise adalah alat yang sangat berguna untuk menangani operasi asinkron dalam JavaScript, membuat kode lebih bersih dan lebih mudah dipahami dibandingkan dengan callback tradisional.

MDN Web Docs - Promise
W3Schools - JavaScript Promises
JavaScript.info - Promises