Async/await ב-TypeScript

מאמר זה מסביר את השימוש ב-async/await ב-TypeScript.

YouTube Video

Async/await ב-TypeScript

ב-TypeScript, async הוא מילת מפתח לתיאור תמציתי של פעולות אסינכרוניות, ופועל באופן דומה לסינטקס של async/await ב-JavaScript. פונקציות async נועדו להפוך את הטיפול בפונקציות שמחזירות Promises לאינטואיטיבי יותר.

בסיסי פונקציות async

פונקציות שמוגדרות עם מילת המפתח async תמיד מחזירות Promise. להלן דוגמה בסיסית:.

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

בדוגמה זו, מכיוון שפונקציית ה-async תמיד מחזירה Promise, הערך המוחזר נפתר אוטומטית באמצעות Promise.resolve. במילים אחרות, "Data received" הופך ל-Promise<string> ומתבצע כפעולה אסינכרונית.

מילת המפתח await

מילת המפתח await יכולה לשמש רק בתוך פונקציה שהיא async. זאת מספקת את היכולת להיעצר ולחכות לתוצאה של Promise לפני שממשיכים בביצוע הפונקציה.

בדוגמה הבאה, עיבוד אסינכרוני באמצעות fetch נכתב עם 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();

בדוגמה זו, נעשה שימוש ב-await כדי להמתין להשלמת ה-Promise שמוחזר על ידי פונקציית fetch, ותוצאתו מוקצה למשתנה response. בנוסף, התוצאה של response.json() גם כן ממתינים לה.

טיפול בשגיאות עם async/await

שגיאות שמתרחשות במהלך עיבוד אסינכרוני ניתן לתפוס באמצעות הסינטקס הסטנדרטי של try...catch. אם מתרחשת שגיאה בחלק של await, אותה שגיאה מטופלת בבלוק ה-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();

בדוגמה שלמעלה, נעשה שימוש ב-await להמתין לתוצאה של פונקציית fetch, ואם מתרחשת שגיאה, היא מטופלת באמצעות try...catch.

יתרונות ה-async/await

1. עיבוד אסינכרוני אינטואיטיבי: באמצעות async/await, זרם הקוד אינטואיטיבי יותר משימוש בשרשראות Promise (then או catch), ומאפשר לכתוב את הקוד כמו עיבוד סינכרוני.

2. טיפול קל בשגיאות: שימוש ב-try...catch מפשט את הטיפול בשגיאות בפעולות אסינכרוניות. ניתן לכתוב קוד קריא יותר מאשר באמצעות שימוש בשרשראות Promise.

הערכים המוחזרים מפונקציות async

פונקציה async תמיד מחזירה Promise. לכן, גם מבלי להחזיר Promise באופן מפורש, ניתן לבצע עיבוד אסינכרוני על ידי שימוש במילת המפתח async.

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

בקוד למעלה, ערך סינכרוני 42 מוחזר, אך מכיוון שהוא בתוך פונקציה async, הוא מומר אוטומטית ל-Promise.resolve(42).

ביצוע סדרתי של פונקציות אסינכרוניות

כאשר מבצעים מספר פונקציות אסינכרוניות ברצף, ניתן להשתמש ב-await כדי לשלוט בסדר הביצוע שלהן.

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

בדוגמה זו, fetchData2 מתבצעת אחרי שממתינים לסיום של fetchData1. זה הופך את הקוד לקריא יותר בהשוואה לשימוש בשלשלאת של Promise.

ביצוע מקבילי

אם אתם רוצים לבצע פעולות אסינכרוניות במקביל, ניתן להשתמש ב-Promise.all כדי לטפל במספר Promises בו-זמנית.

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

במקרה זה, fetchData1 ו-fetchData2 מתבצעים בו-זמנית, והתהליך ממשיך לאחר שהשניים מסתיימים. זה מאפשר תפעול יעיל של מספר פעולות אסינכרוניות.

סיכום

• פונקציה async מחזירה Promise, ועל ידי שימוש במילת המפתח await, ניתן להמתין לתוצאה של פעולה אסינכרונית.
• על ידי שימוש ב-try...catch, הטיפול בשגיאות בפעולות אסינכרוניות הופך לפשוט יותר.
• על ידי שימוש ב-Promise.all, ניתן לבצע מספר פעולות אסינכרוניות במקביל.

async/await נמצאים בשימוש נרחב ב-TypeScript ו-JavaScript מכיוון שהם מאפשרים תיאור פשוט יותר של פעולות אסינכרוניות.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video