### Asynchronous JavaScript: Promises, Async/Await, dan Fetch API
Asynchronous JavaScript sangat penting dalam pengembangan aplikasi web modern, terutama ketika berurusan dengan operasi yang membutuhkan waktu seperti mengambil data dari server atau berinteraksi dengan API eksternal. Dalam JavaScript, kita bisa menangani operasi asinkron menggunakan beberapa pendekatan, yaitu **callbacks**, **promises**, dan **async/await**.
#### 1. **Promises**
Promise adalah objek yang merepresentasikan operasi yang belum selesai, tetapi diharapkan selesai di masa mendatang. Promise memiliki tiga kemungkinan keadaan:
- **Pending**: Operasi belum selesai (masih dalam proses).
- **Fulfilled**: Operasi selesai dengan sukses.
- **Rejected**: Operasi gagal.
Promise dibuat menggunakan konstruktor `Promise`, dan umumnya digunakan untuk menggantikan callback dalam operasi asinkron.
##### Contoh Promise:
```javascript
let janji = new Promise(function(resolve, reject) {
let sukses = true; // Simulasi kondisi sukses atau gagal
if (sukses) {
resolve("Operasi berhasil!");
} else {
reject("Operasi gagal!");
}
});
// Menangani hasil dari Promise
janji.then(function(hasil) {
console.log(hasil); // Jika sukses, akan mencetak "Operasi berhasil!"
}).catch(function(error) {
console.log(error); // Jika gagal, akan mencetak "Operasi gagal!"
});
```
##### Chaining Promises:
Promise bisa di-*chain* atau dihubungkan satu sama lain menggunakan `.then()`. Setiap `then` bisa mengembalikan nilai yang akan diteruskan ke `then` berikutnya.
**Contoh:**
```javascript
let janji = new Promise(function(resolve) {
resolve(5);
});
janji
.then(function(hasil) {
return hasil * 2;
})
.then(function(hasil) {
return hasil + 10;
})
.then(function(hasil) {
console.log(hasil); // Output: 20
});
#### 2. **Async/Await**
`async` dan `await` adalah sintaks modern (ES2017) untuk menangani operasi asinkron. Keduanya adalah cara yang lebih bersih dan mudah dibaca daripada chaining promises, terutama ketika kita bekerja dengan beberapa operasi asinkron.
##### Cara Kerja:
- **`async`**: Digunakan untuk mendefinisikan fungsi yang mengembalikan promise. Semua fungsi yang menggunakan `async` akan selalu mengembalikan promise.
- **`await`**: Digunakan di dalam fungsi `async` untuk menunggu penyelesaian promise sebelum melanjutkan eksekusi kode.
##### Contoh:
```javascript
async function prosesData() {
let janji = new Promise(function(resolve) {
setTimeout(function() {
resolve("Data selesai diproses");
}, 2000);
});
let hasil = await janji; // Menunggu promise selesai
console.log(hasil); // "Data selesai diproses"
}
prosesData();
```
Dalam contoh di atas, fungsi `prosesData` menunggu (`await`) hingga `janji` selesai sebelum mengeksekusi baris kode berikutnya.
#### 3. **Fetch API**
`Fetch API` adalah cara modern untuk melakukan request HTTP ke server. Ini menggantikan pendekatan lama seperti `XMLHttpRequest` dan lebih mudah digunakan, terutama karena berbasis promise sehingga cocok digunakan dengan `async/await`.
##### Fetch API untuk Mengambil Data:
`fetch()` digunakan untuk melakukan request HTTP dan mengembalikan promise yang akan menghasilkan respon dari server.
**Contoh Mengambil Data dari API:**
```javascript
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json()) // Mengonversi respon ke format JSON
.then(data => console.log(data)) // Menampilkan data
.catch(error => console.log('Error:', error));
```
Dalam contoh di atas, kita mengambil data dari API palsu (https://jsonplaceholder.typicode.com), mengonversi responnya ke format JSON, dan menampilkannya di console. Jika terjadi kesalahan, error akan ditangani di blok `catch`.
##### Menggunakan Fetch API dengan Async/Await:
Dengan `async/await`, kode `fetch` menjadi lebih mudah dibaca:
```javascript
async function getData() {
try {
let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
let data = await response.json();
console.log(data);
} catch (error) {
console.log('Error:', error);
}
}
getData();
```
Di sini, fungsi `getData` menggunakan `await` untuk menunggu respon dari `fetch` dan memproses datanya setelah selesai.
##### Mengirim Data dengan Fetch (POST Request):
Selain mengambil data, Fetch API juga bisa digunakan untuk mengirim data ke server menggunakan metode POST.
**Contoh POST Request:**
```javascript
async function postData(url = '', data = {}) {
const response = await fetch(url, {
method: 'POST', // Metode POST
headers: {
'Content-Type': 'application/json' // Menetapkan tipe konten
},
body: JSON.stringify(data) // Mengonversi data menjadi JSON
});
return response.json(); // Mengonversi respon ke JSON
}
// Mengirim data ke API
postData('https://jsonplaceholder.typicode.com/posts', { title: 'foo', body: 'bar', userId: 1 })
.then(data => console.log(data)); // Mencetak hasil dari server
```
Dalam contoh ini, kita mengirimkan objek JSON ke server menggunakan metode POST, kemudian mencetak respon yang diterima.
### Kesimpulan
Asynchronous JavaScript memberikan kemampuan untuk menangani operasi yang memerlukan waktu tanpa menghentikan eksekusi kode lainnya. **Promises** dan **async/await** membantu menangani proses ini dengan cara yang lebih bersih dan terstruktur. Sementara itu, **Fetch API** memungkinkan interaksi yang sederhana dengan server untuk mengambil dan mengirim data. Menggabungkan ketiga teknik ini sangat penting dalam pengembangan aplikasi web yang dinamis dan interaktif.