Async/await w TypeScript

Ten artykuł wyjaśnia async/await w TypeScript.

YouTube Video

Async/await w TypeScript

W TypeScript async jest słowem kluczowym służącym do zwięzłego opisywania operacji asynchronicznych i działa podobnie do składni async/await w JavaScript. Funkcje oznaczone jako async są stworzone, aby ułatwić obsługę funkcji zwracających Promisy.

Podstawy funkcji async

Funkcje zadeklarowane ze słowem kluczowym async zawsze zwracają Promise. Oto podstawowy przykład:.

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

W tym przykładzie, ponieważ funkcja async zawsze zwraca Promise, zwracana wartość jest automatycznie rozwiązywana za pomocą Promise.resolve. Innymi słowy, "Data received" staje się Promise<string> i jest traktowane jako operacja asynchroniczna.

Słowo kluczowe await

Słowo kluczowe await może być używane tylko wewnątrz funkcji async. Pozwala to na wstrzymanie i oczekiwanie na wynik Promise przed kontynuowaniem wykonywania funkcji.

W poniższym przykładzie przetwarzanie asynchroniczne za pomocą fetch zostało napisane z użyciem 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();

W tym przykładzie await jest używane do oczekiwania na zakończenie Promise zwróconego przez funkcję fetch, a wynik jest przypisany do zmiennej response. Dodatkowo, wynik response.json() również jest oczekiwany.

Obsługa błędów z async/await

Błędy występujące podczas przetwarzania asynchronicznego mogą być przechwytywane za pomocą standardowej składni try...catch. Jeśli błąd wystąpi w części await, jest obsługiwany w bloku 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();

W powyższym przykładzie wynik funkcji fetch jest oczekiwany za pomocą await, a ewentualne błędy są obsługiwane za pomocą try...catch.

Zalety async/await

1. Intuicyjne przetwarzanie asynchroniczne: Dzięki użyciu async/await przepływ kodu jest bardziej intuicyjny niż w przypadku używania łańcuchów Promise (then lub catch), pozwalając na pisanie w sposób podobny do przetwarzania synchronicznego.

2. Prosta obsługa błędów: Użycie try...catch upraszcza obsługę błędów w operacjach asynchronicznych. Możesz pisać bardziej czytelny kod niż przy użyciu łańcuchów Promise.

Wartości zwracane przez funkcje async

Funkcja async zawsze zwraca Promise. Dlatego, nawet bez jawnego zwracania Promise, przetwarzanie asynchroniczne jest możliwe dzięki użyciu słowa kluczowego async.

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

W powyższym kodzie zwracana jest synchroniczna wartość 42, ale ponieważ znajduje się w funkcji async, jest automatycznie konwertowana na Promise.resolve(42).

Sekwencyjne wykonywanie funkcji asynchronicznych

Podczas wykonywania wielu funkcji asynchronicznych po kolei, można użyć await, aby kontrolować ich kolejność.

 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();

W tym przykładzie fetchData2 jest wykonywane po zakończeniu fetchData1. Jest to bardziej czytelne w porównaniu do użycia łańcucha Promise.

Wykonywanie równoległe

Jeśli chcesz wykonywać operacje asynchroniczne równolegle, możesz użyć Promise.all, aby obsłużyć wiele Promise jednocześnie.

 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();

W tym przypadku fetchData1 i fetchData2 są wykonywane jednocześnie, a proces przechodzi dalej po ich zakończeniu. To umożliwia efektywne zarządzanie wieloma operacjami asynchronicznymi.

Podsumowanie

• Funkcja async zwraca Promise, a dzięki użyciu słowa kluczowego await można zaczekać na wynik operacji asynchronicznej.
• Dzięki zastosowaniu konstrukcji try...catch, obsługa błędów w operacjach asynchronicznych staje się prostsza.
• Dzięki użyciu Promise.all możliwe jest wykonywanie wielu operacji asynchronicznych równolegle.

async/await jest szeroko stosowany w TypeScript i JavaScript, ponieważ pozwala na prostsze opisywanie operacji asynchronicznych.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video