Async/await di TypeScript

Artikel ini menjelaskan async/await di TypeScript.

YouTube Video

Async/await di TypeScript

Di TypeScript, async adalah kata kunci untuk mendeskripsikan operasi asinkron secara ringkas dan berperilaku mirip dengan sintaks async/await di JavaScript. Fungsi async dirancang untuk membuat penanganan fungsi yang mengembalikan Promise menjadi lebih intuitif.

Dasar-dasar Fungsi async

Fungsi yang dideklarasikan dengan kata kunci async selalu mengembalikan Promise. Berikut ini adalah contoh dasar:.

1async function fetchData(): Promise<string> {
2    return "Data received";
3}
4
5fetchData().then((data) => console.log(data)); // "Data received"

Pada contoh ini, karena fungsi async selalu mengembalikan Promise, nilai yang dikembalikan secara otomatis diselesaikan menggunakan Promise.resolve. Dengan kata lain, "Data received" menjadi Promise<string> dan diperlakukan sebagai operasi asinkron.

Kata Kunci await

Kata kunci await hanya dapat digunakan di dalam fungsi async. Ini memungkinkan untuk menghentikan sementara dan menunggu hasil dari sebuah Promise sebelum melanjutkan eksekusi fungsi.

Pada contoh berikut, proses asinkron menggunakan fetch ditulis dengan async/await.

 1async function getUserData() {
 2    try {
 3        const response = await fetch("https://codesparklab.com/json/example.json");
 4        const data = await response.json();
 5        console.log(data);
 6    } catch (error) {
 7        console.error("Error fetching user data:", error);
 8    }
 9}
10
11getUserData();

Pada contoh ini, await digunakan untuk menunggu penyelesaian Promise yang dikembalikan oleh fungsi fetch, dan hasilnya dimasukkan ke dalam variabel response. Selain itu, hasil dari response.json() juga ditunggu dengan await.

Penanganan Error dengan async/await

Error yang terjadi selama proses asinkron dapat ditangkap menggunakan sintaks try...catch standar. Jika terjadi error pada bagian await, error tersebut akan ditangani di blok catch.

 1async function fetchDataWithErrorHandling() {
 2    try {
 3        const response = await fetch('https://invalid.codesparklab.com/');
 4        if (!response.ok) {
 5            throw new Error(`HTTP error! status: ${response.status}`);
 6        }
 7        const data = await response.json();
 8        console.log(data);
 9    } catch (error) {
10        console.error("Fetch error:", error);
11    }
12}
13
14fetchDataWithErrorHandling();

Pada contoh di atas, hasil dari fungsi fetch ditunggu dengan await, dan jika terjadi error, hal tersebut ditangani dengan try...catch.

Keunggulan async/await

1. Pemrosesan asinkron yang intuitif: Dengan menggunakan async/await, alur kode menjadi lebih intuitif dibandingkan menggunakan rantai Promise (then atau catch), memungkinkannya ditulis seperti pemrosesan sinkron.

2. Penanganan error yang mudah: Menggunakan try...catch menyederhanakan penanganan error dalam operasi asinkron. Anda bisa menulis kode yang lebih mudah dibaca dibandingkan dengan menggunakan rantai Promise.

Nilai Pengembalian dari Fungsi async

Fungsi async selalu mengembalikan sebuah Promise. Oleh karena itu, bahkan tanpa secara eksplisit mengembalikan sebuah Promise, pemrosesan asinkron tetap dimungkinkan dengan menggunakan kata kunci async.

1async function example() {
2    return 42;
3}
4
5example().then((result) => console.log(result)); // 42

Dalam kode di atas, sebuah nilai sinkron 42 dikembalikan, tetapi karena berada di dalam fungsi async, nilai tersebut secara otomatis dikonversi menjadi Promise.resolve(42).

Eksekusi Berurutan dari Fungsi Asinkron

Ketika mengeksekusi beberapa fungsi asinkron secara berurutan, Anda dapat menggunakan await untuk mengontrol urutannya.

 1async function fetchData(url: string): Promise<any> {
 2    try {
 3        const response = await fetch(url);
 4        return await response.json();
 5    } catch (error) {
 6        console.error("Error fetching user data:", error);
 7    }
 8}
 9
10async function fetchData1(): Promise<any> {
11    return await fetchData("https://codesparklab.com/json/example.json");
12}
13
14async function fetchData2(): Promise<any> {
15    return await fetchData("https://codesparklab.com/json/example2.json");
16}
17
18async function processData() {
19    const data1 = await fetchData1();
20    console.log(data1);
21
22    const data2 = await fetchData2();
23    console.log(data2);
24}
25
26processData();

Dalam contoh ini, fetchData2 dieksekusi setelah menunggu fetchData1 selesai. Ini lebih mudah dibaca dibandingkan menggunakan rantai Promise.

Eksekusi Paralel

Jika Anda ingin menjalankan operasi asinkron secara paralel, Anda dapat menggunakan Promise.all untuk menangani beberapa Promise secara bersamaan.

 1async function fetchData(url: string): Promise<any> {
 2    try {
 3        const response = await fetch(url);
 4        return await response.json();
 5    } catch (error) {
 6        console.error("Error fetching user data:", error);
 7    }
 8}
 9
10async function fetchData1(): Promise<any> {
11    return await fetchData("https://codesparklab.com/json/example.json");
12}
13
14async function fetchData2(): Promise<any> {
15    return await fetchData("https://codesparklab.com/json/example2.json");
16}
17
18async function fetchMultipleData() {
19    const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
20    console.log(data1);
21    console.log(data2);
22}
23
24fetchMultipleData();

Dalam kasus ini, fetchData1 dan fetchData2 dijalankan bersamaan, dan proses dilanjutkan setelah keduanya diselesaikan. Ini memungkinkan penanganan operasi asinkron secara efisien.

Ringkasan

• Sebuah fungsi async mengembalikan sebuah Promise, dan dengan menggunakan kata kunci await, Anda dapat menunggu hasil dari operasi asinkron.
• Dengan menggunakan try...catch, pengelolaan kesalahan dalam operasi asinkron menjadi lebih sederhana.
• Dengan menggunakan Promise.all, dimungkinkan untuk mengeksekusi banyak operasi asinkron secara paralel.

async/await banyak digunakan di TypeScript dan JavaScript karena memungkinkan penulisan operasi asinkron menjadi lebih sederhana.

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

YouTube Video