30 Hari Belajar JavaScript : Hari Ke 29 (Berkenalan dengan Tenaga Asycn : Part-2)

Halo semuanya! Selamat datang kembali di series 30 hari belajar javascript. Pada hari ke 29 ini kita masih akan melanjutkan pembahasan tentang JavaScript Async bagian 2. Oke langsung saja.

Apa itu Promise?

Promise ini merupakan sebuah proxy untuk sebuah nilai yang belum diketahui saat pembuatan promise tersebut. Biasanya promise digunakan sebagai proxy untuk thread async. Penggunaan promise sangat mudah dan lebih mirip dengan code sync.

Saat kita mempelajari promise kita harus mengetahui 3 state yaitu pending, fullfiled dan rejected. Pending ini artinya belum ada datanya, fullfiled artinya datanya sudah ada sedangkan rejected artinya error atau kemungkinan datanya tidak ada. Promise ini dibuat untuk menghidar dari callback hell.

https://miro.medium.com/v2/resize:fit:1200/1*sOy11ZsU1ijCSjZwx8ZzGQ.jpeg

Untuk membuat promise kita cukup gunakan class Promise kemudian diikuti dengan parameter resolve, rejected.

 const promise = new Promise(function (resolve, reject) {
       const ajax = new XMLHttpRequest()
       ajax.open("GET", "api/product.json")
       ajax.onload = function () {
             if (ajax.status === 200) {
                 resolve(ajax.responseText)
              } else {
                 reject(`Error Get Product with response : ${ajax.responseText}`)
                            }
             }

          ajax.send()
 })

Promise

Promise Method

Jadi promise ini memiliki tiga method yaitu then() yang digunakan untuk mendapatkan atau mengubah data ketika promise sukses, catch() digunakan untuk mendapatkan data error ketika promise gagal, finally() akan dieksekusi ketika terjadi sukses atau gagal pada promise.

getProduct()
   .then((reponse) => console.info(response))
   .catch((error) => console.info(error))
   .finally(()=> console.info("Finally"))

 <table>
              <tbody>
                     <tr>
                            <td>ID:</td>
                            <td id="id"></td>
                     </tr>
                     <tr>
                            <td>Name:</td>
                            <td id="name"></td>
                     </tr>
                     <tr>
                            <td>Price:</td>
                            <td id="price"></td>
                     </tr>
              </tbody>
       </table>

       <script>
              function getProduct() {
                     return new Promise(function (resolve, reject) {
                            const ajax = new XMLHttpRequest()
                            ajax.open("GET", "api/product.json")
                            ajax.onload = function () {
                                   if (ajax.status === 200) {
                                          resolve(ajax.responseText)
                                   } else {
                                          reject(`Error Get Product with response : ${ajax.responseText}`)
                                   }
                            }

                            ajax.send()
                     })
              }

              getProduct()
                     .then(function (response) {
                            return JSON.parse(response)
                     })
                     .then(function (json) {
                            document.getElementById("id").textContent = json.id
                            document.getElementById("name").textContent = json.name
                            document.getElementById("price").textContent = json.price
                     })
       </script>

Output

Bagaimana jika terjadi error misalkan product tidak ada, kita bisa tambahkan catch seperti berikut.

 getProduct()
        .then(function (response) {
              return JSON.parse(response)
         })
         .then(function (json) {
              document.getElementById("id").textContent = json.id
              document.getElementById("name").textContent = json.name
              document.getElementById("price").textContent = json.price
          })
          .catch(function (error) {
              document.getElementById("id").textContent = error
              document.getElementById("name").textContent = error
              document.getElementById("price").textContent = error
           })

erorr

Bagaimana dengan finally? Finally tidak peduli mau sukses atau gagal.

.finally(function () {
          console.info("Finally")
 })

Tetap ditampilkan

Didalam promise juga ada yang namanya Promise Static Method.

Promise.all( ) digunakan untuk mengeksekusi beberapa promise sekaligus dan menunggu semua hasil promisenya

Promise.any() digunakan untuk mengeksekusi beberapa promise sekaligus dan mengambil hasil promise paling cepat.

  const promise = Promise.any([
        getProduct("product")
  ])

   promise.then(function (products) {
        console.info(products)
   })

Promise.any( )

Hai! Perkenalkan nama saya Bahrul Rozak, saat ini saya masih berstatus sebagai Mahasiswa di salah satu perguruan tinggi swasta di Jakarta. Selain sebagai mahasiswa saya memiliki pengalaman di bidang Web Development khususnya Back End Development .

Saya harap artikel yang saya buat ini dapat membantu Anda untuk menjadi Web Developer yang handal.

# Selamat belajar dan selamat berkarya!

# See my art

https://github.com/Bahrul-Rozak

# See my professional experience

https://www.instagram.com/rozak.developer/