Memahami Promise Pada Javascript Lebih Mendalam

Sebelumnya kita telah membahas tentang pengenalan promise pada javascript lebih tepatnya di artikel Cara Menggunakan Promise Pada Javascript. 

JavaScript (JS) terkenal dengan gaya asynchronous-nya dibanding dengan bahasa lain yang pada awalnya diakomodir menggunakan callback. Terlebih pada node.js yang hampir semua core API-nya bersifat async. Namun callback sendiri terkadang kurang nyaman dipergunakan karena dapat menimbulkan callback hell, sulit melakukan error handling, dan lain-lain.

Di artikel sebelumnya kita sudah tahu apa itu CALLBACK HELL dimana saat program kita menggunakan callback di dalam callback yang terlalu banyak. Jadi sulit bagi kita untuk maintenance program kita kalau menggunakan callback.

Salah satu pendekatan yang paling simple adalah menggunakan Promise, hingga beberapa proposal Promise diajukan sebagai standar di CommonJS (Promise A, B, KISS, D) dan pada akhirnya spesifikasi Promise A+ lah yang dipakai oleh standar ECMA 2015 (ES6).

Membuat Object Promise

Jika kita ingin menggunakan promise di javascript kita butuh menginstance suatu calass promise seperti berikut ini :

 const promise = new Promise()

Di dalam calass promise tersebut kita dapat melakukan fungsi callback atau anonymouse function dimana di dalam callback itulah isi dari apapun program yang kita ingin lakukan pada promise tersebut.

Misal kita ingin menggunakan promise untuk melakukan ajax request ke server seperti ini :

 function getProductsUrl(keyword) {
            return `https://www.blibli.com/backend/search/products?searchTerm=${keyword}`;
}

Di atas merupakan sebuah fungsi yg berisikan URL API search pada sebuah e-comerce dengan parameter keyword.

Lalu saya mempunyai sebuah fungsi yg isinya adalah sebuah ajax request tetapi memanfaatkan sebuah promise untuk proses asynchronous nya :

function getProducts(keyword) {
            // Code Promise Here!

            const promise = new Promise(function (resolve, reject) {
                // Code AJAX Here!
                const ajax = new XMLHttpRequest;
                const url = getProductsUrl(keyword);
                ajax.open('GET', url);
                ajax.send();
                ajax.onload = function () {

                    if (ajax.status === 200) {
                        const data = JSON.parse(ajax.responseText);
                        resolve(data);
                    } else {
                        reject(Error('Gagal mendapatkan produk'));
                    }
                }
            });

            return promise;

        }

Sebelum di lanjut,   yg perlu teman-teman ketahui adalah terdapat status atau biasa di sebut STATE pada promise dimana state tersebut memiliki 3 nilai yaitu :

1. Pending
2. Fulfiilled (resolve)
3. Rejected (reject)

Perhatikan parameter pada object promise dimana ada 2 parameter yg di passing pada callback nya yaitu resolve, reject
arti dari resolve adalah jika proses request nya berhasil sementara reject adalah di mana request mengalami error.

Untuk melengkapinya saya telah menyiapkan 1 fungsi lagi untuk memanggil fungsi getProducts() :

 

function buttonClick() {
            const promise = getProducts(document.getElementById('keyword').value);

            promise
            .then(function(value){
                return value.data.products;
            })
            .then(function(products){
                clearProducts();
                products.forEach(function(product){
                    displayProduct(product);
                })
            })
            .catch(function(error){
                alert(error.message);
            })
        }

        function displayProduct(product) {
            const productLi = document.createElement('li');
            productLi.textContent = product.name;

            const productUl = document.getElementById('products');
            productUl.appendChild(productLi);
        }

function clearProducts() {
            const productUl = document.getElementById('products');
            productUl.textContent = '';
        }

Di saat kita mengguakan promise untuk melakukan request, haasil dari return promise nya juga kita harus tangkap atau GET seprti di atas,  Lalu ketimbang menggunakan callback yg berujung terjebak di callback hell kita menggunakan THEN dan CATCH, sehingga jauh lebih mudah dalam penulisan dan lebih mudah untuk di maintenance.   Selanjutnya Untuk HTML nya seperti di bawah ini :

<body>
    <input type="text" id="keyword">
    <button onclick="buttonClick()">Search Products</button>
    <ul id="products"></ul>
</body>

Sehingga hasilnya akan seperti ini :

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Oke cukup untuk artikel kali ini tentang Memahami Promise Pada Javascript Lebih Mendalam semoga bermanfaat untuk teman-teman semuanya, sampai bertemu pada artikel selanjutnya.