Async/await dalam JavaScript

Dalam artikel ini, kami akan menjelaskan async/await dalam JavaScript.

YouTube Video

Async/await dalam JavaScript

async (dan await) dalam JavaScript adalah fitur yang dirancang untuk membuat penulisan operasi asinkron lebih intuitif dan mudah dibaca. Dengan menggunakan ini, Anda dapat mengurangi kompleksitas fungsi callback tradisional dan rantai Promise, serta menulis kode asinkron dengan cara yang terlihat seperti kode sinkron.

Fungsi async

async digunakan untuk mendefinisikan sebuah fungsi sebagai fungsi asinkron. Fungsi async selalu mengembalikan sebuah Promise. Dalam sebuah fungsi yang ditandai dengan async, Anda dapat menggunakan await untuk menunggu hasil dari sebuah Promise untuk dikembalikan.

Sintaks Dasar dari Fungsi async

1async function myAsyncFunction() {
2    // Write asynchronous processing here
3    return 'Result';  // Return a Promise
4}

Dalam kasus ini, memanggil myAsyncFunction() secara otomatis mengembalikan objek Promise. Ketika Promise diselesaikan, hasilnya menjadi nilai yang dikembalikan oleh return.

Contoh: Fungsi async Dasar

1async function greet() {
2    return 'Hello, World!';
3}
4
5greet().then((message) => {
6    console.log(message);  // Displays "Hello, World!"
7});

await

await digunakan untuk menunggu sebuah Promise diselesaikan. Dengan menggunakan await, Anda dapat menghentikan sementara eksekusi hingga Promise diselesaikan dan menerima hasil dari Promise tersebut. await hanya dapat digunakan di dalam fungsi async.

Contoh: Cara Menggunakan await

 1async function fetchData() {
 2    // Wait for the result of the Promise
 3    const data = await fetch('https://codesparklab.com/json/example.json');
 4    // Wait for the asynchronous operation to complete
 5    const jsonData = await data.json();
 6    // Retrieve and display the data
 7    console.log(jsonData);
 8}
 9
10fetchData();

Dalam contoh di atas, fungsi menunggu Promise yang dikembalikan oleh fungsi fetch menggunakan await, lalu melanjutkan operasi asinkron menggunakan hasilnya.

Penanganan Error dengan async/await

Jika terjadi error di dalam fungsi async, error tersebut dianggap sebagai reject dari Promise. Anda dapat menggunakan pernyataan try...catch untuk melakukan penanganan error.

Contoh: Penanganan Error

 1async function fetchData() {
 2    try {
 3        // Invalid URL
 4        const data = await fetch('https://invalid.codesparklab.com/');
 5        const jsonData = await data.json();
 6        console.log(jsonData);
 7    } catch (error) {
 8        // Catch the error
 9        console.error('Failed to fetch data:', error);
10    }
11}
12
13fetchData();

Menggunakan blok try...catch memungkinkan Anda menangkap error yang terjadi selama operasi asinkron, mencegah program crash ketika error terjadi.

Manfaat dari async/await

Dibandingkan dengan rantai Promise tradisional, async/await menawarkan keuntungan-keuntungan berikut:.

• Keterbacaan yang lebih baik
  • Proses asinkron dapat ditulis seperti kode sinkron, sehingga menghindari kompleksitas rantai Promise dan callback yang sangat bersarang.
• Debugging lebih mudah
  • Karena tampilannya seperti kode sinkron, debugging dan penanganan error menjadi lebih mudah.
• Kemudahan pemeliharaan yang lebih baik
  • Proses asinkron dapat ditulis dengan lebih sederhana, sehingga memudahkan dalam mengubah atau memodifikasi kode dan meningkatkan pemeliharaan jangka panjang.

Contoh: Rantai Promise vs async/await

Mari kita bandingkan kode yang menggunakan rantai Promise dan kode yang menggunakan async/await.

 1// Code using Promise chains
 2function fetchDataPromise() {
 3    fetch('https://codesparklab.com/json/example.json')
 4        .then((response) => response.json())
 5        .then((data) => {
 6            console.log(data);
 7        })
 8    .catch((error) => {
 9        console.error('Failed to fetch data:', error);
10    });
11}
12
13// Code using async/await
14async function fetchDataAsync() {
15    try {
16        const response = await fetch('https://codesparklab.com/json/example.json');
17        const data = await response.json();
18        console.log(data);
19    } catch (error) {
20        console.error('Failed to fetch data:', error);
21    }
22}

Seperti yang dapat Anda lihat, menggunakan async/await memungkinkan Anda untuk menulis proses asinkron secara linear, sehingga menghasilkan kode yang lebih mudah dibaca.

Melaksanakan beberapa operasi asinkron secara bersamaan

Dengan menggabungkan Promise.all() atau Promise.race() dengan await, Anda dapat melaksanakan beberapa operasi asinkron secara bersamaan dan menangani hasilnya sekaligus.

Promise.all()

 1async function fetchMultipleData() {
 2    try {
 3        const [data1, data2] = await Promise.all([
 4            fetch('https://codesparklab.com/json/example1.json'),
 5            fetch('https://codesparklab.com/json/example2.json')
 6        ]);
 7        const jsonData1 = await data1.json();
 8        const jsonData2 = await data2.json();
 9        console.log(jsonData1);
10        console.log(jsonData2);
11    } catch (error) {
12        console.error('Failed to fetch data:', error);
13    }
14}
15
16fetchMultipleData();

• Promise.all() menyelesaikan beberapa Promise secara bersamaan dan mengembalikan hasilnya sebagai array. Ini menunggu semua Promise terselesaikan, dan jika ada yang gagal, maka dianggap gagal secara keseluruhan.

Promise.race()

 1async function fetchFastestData() {
 2    try {
 3        const fastestResponse = await Promise.race([
 4            fetch('https://codesparklab.com/json/example1.json'),
 5            fetch('https://codesparklab.com/json/example2.json')
 6        ]);
 7        const jsonData = await fastestResponse.json();
 8        console.log('Fastest data:', jsonData);
 9    } catch (error) {
10        console.error('Fetch error:', error);
11    }
12}
13
14fetchFastestData();

• Promise.race() mengembalikan hasil dari Promise pertama yang selesai atau gagal terlebih dahulu. Ini berguna ketika Anda ingin merespons operasi asinkron mana pun yang selesai terlebih dahulu. Namun, jika Promise pertama gagal, kesalahan tersebut akan langsung ditangkap oleh catch.

Promise.allSettled()

 1async function fetchWithAllSettled() {
 2    const results = await Promise.allSettled([
 3        // This URL will success
 4        fetch('https://codesparklab.com/json/example1.json'),
 5        // This URL will fail
 6        fetch('https://invalid.codesparklab.com/')
 7    ]);
 8
 9    results.forEach((result, index) => {
10        if (result.status === 'fulfilled') {
11            const url = result.value.url;
12            console.log(`Request ${index + 1} succeeded:`, url);
13        } else {
14            const reason = result.reason;
15            console.warn(`Request ${index + 1} failed:`, reason);
16        }
17    });
18}
19
20fetchWithAllSettled();

• Promise.allSettled() menunggu semua hasil, terlepas dari berhasil atau gagalnya. Setiap hasil dikembalikan dalam bentuk { status, value } atau { status, reason }, sehingga Anda dapat mengetahui Promise mana yang berhasil dan mana yang gagal.

Promise.any()

 1async function fetchAnySuccessful() {
 2    try {
 3        const firstSuccessful = await Promise.any([
 4            // This URL will fail
 5            fetch('https://invalid.codesparklab.com/'),
 6            // This URL will success
 7            fetch('https://codesparklab.com/json/example1.json')
 8        ]);
 9        const jsonData = await firstSuccessful.json();
10        console.log('First successful response:', jsonData);
11    } catch (error) {
12        console.error('All fetch requests failed:', error);
13    }
14}
15
16fetchAnySuccessful();

• Promise.any() hanya mengembalikan hasil dari Promise pertama yang berhasil. Pengecualian hanya akan dilemparkan jika semua Promise gagal. Ini dapat digunakan seperti mekanisme percobaan ulang di lingkungan di mana beberapa API tidak dapat diandalkan hingga salah satunya berhasil.

Ringkasan

• Fungsi async: Selalu mengembalikan Promise dan digunakan untuk menulis pemrosesan asinkron.
• await: Digunakan untuk menunggu suatu Promise selesai dan menerima hasilnya.
• Penanganan error: Gunakan try...catch untuk menangani error yang terjadi selama pemrosesan asinkron.
• Beberapa operasi asinkron: Dengan menggunakan metode seperti Promise.all(), Anda dapat menjalankan beberapa tugas asinkron secara bersamaan.

async/await adalah alat yang kuat untuk menangani pemrosesan asinkron, jadi pastikan untuk menggunakannya agar dapat menyederhanakan logika asinkron yang kompleks.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video