Async/await dalam TypeScript

Artikel ini menerangkan async/await dalam TypeScript.

YouTube Video

Async/await dalam TypeScript

async dalam TypeScript adalah kata kunci untuk menjelaskan operasi tak segerak dengan ringkas dan berfungsi serupa dengan sintaks async/await dalam JavaScript. Fungsi async direka untuk menjadikan pengendalian fungsi yang mengembalikan Promises lebih intuitif.

Asas Fungsi async

Fungsi yang dinyatakan dengan kata kunci async sentiasa mengembalikan nilai Promise. Berikut adalah contoh asas:.

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

Dalam contoh ini, kerana fungsi async sentiasa mengembalikan Promise, nilai yang dikembalikan secara automatik diselesaikan menggunakan Promise.resolve. Dengan kata lain, "Data received" menjadi Promise<string> dan dianggap sebagai operasi tak segerak.

Kata kunci await

Kata kunci await hanya boleh digunakan di dalam fungsi async. Ini membolehkan untuk berhenti seketika dan menunggu hasil Promise sebelum meneruskan pelaksanaan fungsi.

Dalam contoh berikut, pemprosesan tak segerak 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();

Dalam contoh ini, await digunakan untuk menunggu penyelesaian Promise yang dikembalikan oleh fungsi fetch, dan hasilnya diberikan kepada pembolehubah response. Selain itu, hasil response.json() juga di-await.

Pengendalian Ralat dengan async/await

Ralat yang berlaku semasa pemprosesan tak segerak boleh ditangkap menggunakan sintaks try...catch standard. Jika ralat berlaku pada bahagian await, ralat tersebut ditangani dalam 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();

Dalam contoh di atas, hasil fungsi fetch di-await menggunakan await, dan jika ralat berlaku, ia ditangani dengan try...catch.

Kelebihan async/await

1. Pemprosesan tak segerak yang intuitif: Dengan menggunakan async/await, aliran kod menjadi lebih intuitif berbanding menggunakan rantaian Promise (then atau catch), membolehkan ia ditulis seperti pemprosesan segerak.

2. Pengendalian ralat yang mudah: Menggunakan try...catch mempermudahkan pengendalian ralat dalam operasi tak segerak. Anda boleh menulis kod yang lebih mudah dibaca berbanding menggunakan rantaian Promise.

Nilai Pulangan Fungsi async

Fungsi async sentiasa mengembalikan Promise. Oleh itu, walaupun tanpa mengembalikan Promise secara eksplisit, pemprosesan asinkron boleh dilakukan dengan menggunakan kata kunci async.

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

Dalam kod di atas, nilai segerak 42 dikembalikan, tetapi kerana ia berada dalam fungsi async, ia secara automatik ditukar kepada Promise.resolve(42).

Pelaksanaan Berturutan Fungsi Asinkron

Apabila melaksanakan beberapa fungsi asinkron secara berturut-turut, anda boleh menggunakan await untuk mengawal 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 dilaksanakan selepas menunggu fetchData1 selesai. Ini lebih mudah dibaca berbanding menggunakan rantai Promise.

Pelaksanaan Selari

Jika anda mahu melaksanakan operasi asinkron secara serentak, anda boleh menggunakan Promise.all untuk menguruskan pelbagai Promise secara serentak.

 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 kes ini, fetchData1 dan fetchData2 dilaksanakan pada masa yang sama, dan proses akan diteruskan selepas kedua-duanya selesai. Ini membolehkan pengendalian yang cekap bagi pelbagai operasi asinkron.

Ringkasan

• Fungsi async mengembalikan Promise, dan dengan menggunakan kata kunci await, anda boleh menunggu hasil daripada operasi asinkron.
• Dengan menggunakan try...catch, pengendalian kesalahan dalam operasi asinkron menjadi lebih mudah.
• Dengan menggunakan Promise.all, adalah mungkin untuk melaksanakan pelbagai operasi asinkron secara selari.

async/await digunakan secara meluas dalam TypeScript dan JavaScript kerana ia membolehkan penerangan yang lebih ringkas bagi operasi asinkron.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video