Cara menggunakan PROMISSED pada JavaScript

Question

Sumber: Freepik, pressfoto

Table of Contents Show

Promise.all()
Menggunakan Ajax dengan Fetch
Apa Itu Promise di javascript?
Apa itu async Await Javascript?
Kapan kita menggunakan asynchronous?
Apa itu callback function javascript?

Sobat jenius mungkin banyak yang tahu apa itu Javascript. Bahasa pemrograman ini merupakan bahasa pemrograman yang synchronous atau sederhananya pada bahasa pemrograman ini kita dapat menjalankan beberapa command/perintah pada saat yang bersamaan. Hal ini berbeda dengan beberapa bahasa pemrograman seperti PHP ataupun Python yang harus menjalankan perintah pada line teratas dulu, kemudian dilanjutkan dengan line di bawahnya.

Walaupun Javascript memang dikenal dengan bahasa pemrograman yang synchronous, ada beberapa cara untuk sobat jenius gunakan jika ingin beberapa sintaks dijalankan secara asynchronous. Salah satu cara yang bisa dipakai adalah dengan menggunakan Promise. Lalu bagaimana kita menggunakan Promise ini? Sobat jenius bisa perhatikan code di bawah ini.

let promise = new Promise(function(resolve, reject) {
  y = x + 2
  if(y > 2)
  {
    resolve(x)
  }else
  {
    reject('x kurang dari 1')
  }
}).then(
  function(value) {console.log(value)}, // resolve akan masuk ke sini
  function(error) {console.log(error)} // reject akan masuk ke sini
)

Pada code di atas dapat kita lihat bagaimana cara kita menggunakan Promise. Pada code tersebut variabel promise akan mengeluarkan nilai x jika nilai x + 2 lebih dari 2. Jika ternyata kurang dari sama dengan 2, maka akan dikeluarkan string berupa “x kurang dari 1”.

Lalu apa bedanya dengan function biasa? Bedanya dengan function biasa adalah pada Promise, code yang berada di dalam then tidak akan pernah dieksekusi kecuali function Promise nya sudah mencapai resolve atau reject. Hal ini bisa mengurangi kemungkinan terjadinya error jika terdapat proses yang cukup lama untuk lanjut ke command selanjutnya. Maka dari itu, biasanya Promise digunakan untuk proses seperti menembak API atau download file.

Baca Juga
Bahasa Pemrograman Web Untuk Pemula

Promise.all()

Lalu bagaimana jika kita ingin menjalankan beberapa Promise secara asynchronous? Jawabannya yaitu dengan menggunakan Promise.all(). Berikut contoh code untuk Promise.all().

const ids = [1,2,3,4]
const url = 'https://jsonplaceholder.typicode.com/posts/';
let promises = ids.map((id) => {
  return fetch(url+id).then(result => result.json())
})

Promise.all(promises).then((results) => {
  console.log(results)
})

Pada code di atas dapat kita lihat bagaimana cara penggunaan Promise.all(). Pada variabel promises diisi beberapa Promise yang masing-masing isinya merupakan sebuah fetch API dengan id yang berbeda, sebagai info tambahan bahwa fungsi fetch di atas sudah merupakan bawaan dari javascript dan sudah asynchronous, sehingga bisa disamakan dengan fungsi Promise. Setelah dikumpulkan dalam variabel promises, variabel tersebut dimasukan ke dalam fungsi Promise.all(), sehingga Promise-Promise yang berada dalam promises bisa dijalankan secara berurutan. Setelah selesai, maka hasil yang dikeluarkan merupakan data dari API tersebut yang didapat secara berurutan dari 1 sampai 4. Berikut screenshot hasilnya

Hasil Promise.all()

Sekian penjelasan dari kami, semoga dapat menambah wawasan koding sobat jenius semua. Terima kasih.

Promise merupakan salah satu dari sekian banyak fitur baru yang hadir pada ES6, mungkin teman-teman sudah pernah menggunakanya, biasanya promise menggunakan method .then, jika teman-teman sudah pernah menggunakan method tersebut kemungkinan besar teman-teman sudah pernah menggunakan promise. Untuk teman-teman yang belum memahami secara detail tentang promise ada baiknya membaca tulisan sederhana ini , buat teman-teman yang sudah paham saya sarankan untuk mencari topik yang lebih advanced tentunya.

Agar mudah untuk memahaminya, kita bisa membuat sebuah analogi tentang Promise ini, misanya kita sedang berjalan-jalan dengan si doi, kemudian kita bertemu dengan persimpangan jalan, kemudian si doi bertanya, yang kita ambil jalan yang mana ? hm.... tentunya kita punya beberapa pilihan bukan ? lurus, belok kanan ? belok kiri ? atau berhenti ?

Dengan analogi tersebut, teman-teman bisa membayangkan kira-kira seperti itulah cara kerja dari promise, ketia sebuah request dibuat maka akan ada tiga kemungkinan state, sedang dalam proses (Pending), berhasil (Fulfilled) dan gagal (Rejected), nah dengan begitu kita bisa mengambil kesimpulan jika promise merupakan sebuah objek yang me-representasikan state Pending,Fulfilled dan Rejected

Implementasinya juga cukup sederhana sebenarnya, untuk membuat promise kita cukup dengan memanggil constructor dari class Promise yang sudah tersedia

bentuk diatas adalah bentuk paling sederhana dari Promise, untuk dapat menggunakan nya kita menggunakan method then dan catch, jika pada contoh kode diatas komen pada baris ke 3 dihapus, pada saat kita jalankan maka hasilnya adalah

tetapi jika kita menghapus komen pada baris 4 maka hasilnya nya adalah

Dengan contoh diatas, pasti teman-teman sudah memahami cara kerja dari Promise, memang tidak akan afdol jika kita tidak mencoba pada kasus-kasus yang nyata, karena sejatinya Promise banyak kita gunakan pada request-request yang berhubungan dengan Ajax dan sejenisnya.

Menggunakan Ajax dengan Fetch

Fetch adalah API yang ada pada ES6 sama halnya dengan Promise, Fetch digunakan untuk melakukan Request ajax, jika teman-teman sudah terbiasa dengan ajaxnya Jquery tentunya teman-teman sudah familiar dengan ajax. mari kita lihat dalam bentuk Fetch nya.

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(json => console.log(json))

maka hasilnya adalah

{
  id: 1,
  title: '[...]',
  body: '[...]',
  userId: 1
}

pada contoh diatas kita bisa melihat bahwa method .then dipanggil sebanyak 2 kali, terkadang ini membingungkan bagi yang baru belajar Promise, tetapi teman-teman tidak perlu bingung, hal tersebut bisa kita katakan sebagai method chaining, maksudnya method yang bisa kita gunakan sebanyak kebutuhan, misalnya pada contoh diatas, .then pertama kita gunakan untuk mengambil response.json() yang kemudian di return untuk kebutuhan berikutnya, .then yang kedua akan memproses hasil dari .then pertama, masih bingung ? mari kita lihat lagi contoh yang lebih komplek.

const getBerita = () => fetch('https://contoh.com/getBerita/100')
const getPenulis = (id) => fetch(`https://contoh.com/getPenulis/${id}`)
const getKomentar = (id) => fetch(`https://contoh.com/getKomentar/${id}`)

getBerita() 
	.then(berita => resBerita.json()) 
	.then(berita => getPenulis(berita.idPenulis)  
		.then(penulis => penulis.json() 
			.then(penulis => getKomentar(penulis.id) 
				.then(komentar => komentar.json()) 
				.then(komentar => { 
					
					return ({berita,penulis,komentar})
				})
			)
		)
		.then(hasil => {
			
			console.log(hasil.berita)
			console.log(hasil.penulis)
			console.log(hasil.komentar)
		})
	)
	.catch( error => console.log(error))

cukup mudah bukan ? kode diatas juga terlihat lebih rapi dan mudah dibaca, yang perlu di-ingat adalah Promise merupakan sebuah Objek jadi setiap pemrosesan tidak akan menghandle success dan failure, oleh karena itu Promise hanya bisa digunakan hanya untuk satu event saja.

Apa Itu Promise di javascript?

Sooo jadi promise adalah Sebuah mekanisme baru pada fitur javascript / ES6 yang merepresentasikan sebuah object request pengolahan data yang dilakukan secara asynchronous seperti ajax, dan promise ini mewakili sebuah operasi yang belum selesai, tetapi diharapkan di masa mendatang.

Apa itu async Await Javascript?

Async/await adalah fitur yang hadir sejak ES2017. Fitur ini mempermudah kita dalam menangani proses asynchronous.Async/Await merupakan sebuah syntax khusus yang digunakan untuk menangani Promise agar penulisan code lebih efisien dan rapih.

Kapan kita menggunakan asynchronous?

Proses asynchronous sering digunakan untuk komunikasi data, karena data menjadi bagian inti dari sebuah aplikasi maka konsep asynchronous sangat penting untuk dipahami.

Apa itu callback function javascript?

Berkaitan dengan pemrograman pada Javascript maka pengertian callback adalah bahwa function akan segera dijalankan setelah function utama dijalankan. Penggunaan callback pada Javascript ini terutama jika berkaitan dengan function yang asinkron misalnya setTimeout misalnya seperti source code di bawah ini.

kode javascript Promise JavaScript Async/await JavaScript