Memahami Promise Pada Javascript Lebih Mendalam

Sebelumnya kita telah membahas mengenai pengenalan promise di javascript lebih tepatnya di artikel Cara Menggunakan Promise Di Javascript. 

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

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

Diantara pendekatan yang sangat simple ialah menggunakan Promise, hingga beberapa proposal Promise diajukan selaku standar di CommonJS (Promise A, B, KISS, D) dan di akhirnya spesifikasi Promise A+ lah yang diaplikasikan oleh standar ECMA 2015 (ES6).

Membangun Object Promise

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

 const promise = new Promise()

Di pada calass promise tersebut kita dapat menjalankan kegunaan callback atau anonymouse function dimana di pada callback demikianlah isi dari apapun program yang kita ingin lakukan di promise tersebut.

Misal kita ingin menggunakan promise bagi menjalankan ajax request ke server seperti ini :

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

Di atas adalah sebuah kegunaan yg berisikan URL API search di sebuah e-comerce dengan parameter keyword.

Lalu saya mempunyai sebuah kegunaan yg isinya ialah sebuah ajax request tetapi memanfaatkan sebuah promise bagi 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 memperoleh produk'));
                    }
                }
            });

            return promise;

        }

Sebelum di lanjut,   yg perlu teman-teman ketahui ialah terdapat status atau lazimnya di sebut STATE di promise dimana state tersebut mempunyai 3 nilai yaitu :

1. Pending




2. Fulfiilled (resolve)




3. Rejected (reject)

Perhatikan parameter di object promise dimana ada 2 parameter yg di passing di callback nya yaitu resolve, reject

arti dari resolve ialah jikalau proses request nya berhasil sementara reject ialah di mana request mengalami error.

Bagi melengkapinya saya telah menyiapkan 1 kegunaan lagi bagi memanggil kegunaan 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 dikala kita mengguakan promise bagi menjalankan request, haasil dari return promise nya pun kita mesti tangkap atau GET seprti di atas,  Lalu ketimbang menggunakan callback yg berujung terjebak di callback hell kita menggunakan THEN dan CATCH, sehingga jauh lebih gampang pada penulisan dan lebih gampang bagi di maintenance.   Berikutnya Bagi 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 lumayan bagi artikel kali ini mengenai Memahami Promise Di Javascript Lebih Mendalam semoga bermanfaat bagi teman-teman semuanya, hingga bertemu di artikel berikutnya.

Sumber https://kursuswebsite.org