Promise Pada Javascript

Khairu Aqsara Sudirman

Khairu Aqsara Sudirman

Feb 19, 2020 — 3 mins read

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() // request data berita
	.then(berita => resBerita.json()) // ambil response berita dalam bentuk json 
	.then(berita => getPenulis(berita.idPenulis)  // request data penulis berdasarkan berita
		.then(penulis => penulis.json() // response penulis dalam bentuk json
			.then(penulis => getKomentar(penulis.id) // request data komentar berdasarkan penulis
				.then(komentar => komentar.json()) // response komentar dalam bentuk json
				.then(komentar =>// gabungkan semua respon
					return ({berita,penulis,komentar})
				})
			)
		)
		.then(hasil => {
			// hasil dari masing-masing respon
			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.



javascript
Read this next

Async Dan Await Pada Javascript

Sebelumnya kita sudah membahas dasar dari Javascript Promise, kali ini kita akan mencoba mengulik sedikit tentang Async dan Await pada Javas...

You might enjoy

Asynchronous Pada Javascript

Sebagai tukang kode, sudah pasti sangat sering menggunakan javascript, lagipula memang javascript merupakan bagian yang tidak terpisahkan da...