JavaScript – Asynchronous Programming – async & await

באמצעות async ו-await נוכל לעבוד עם Promises בצורה נוחה וקריאה יותר, מדובר בפעולה קלה ללמידה ונוחה לשימוש.

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

שימוש ב-async על פונקציות

אם כך, נתחיל עם async, התחביר הבסיסי של שימוש במילה שמורה זו עובד כך:

למילה השמורה async יש משמעות ברורה כאשר היא מופיעה לפני פונקציה –
פונקציה זו תמיד תחזיר Promise, אם נשתמש בתמונה כדוגמא אז יחזור לנו resolve אשר ערכו זהה לערך של something.
שימו לב ל-Code Snippet הבא אשר ידגים זאת:

async function myFunction() {
    return 'something';
}

myFunction().then(console.log);

נוכל גם להחזיר פשוט Promise, קטע הקוד הבא יחזיר לנו את אותה התוצאה בדיוק:

async function myFunction() {
    return Promise.resolve('something');
}

myFunction().then(console.log);

שימוש ב-await

התחביר של await עובד כך:

שימו לב כי await עובד רק בתוך פונקציית async.

שימוש ב-await גורם להמתנה עד אשר ה-Promise תחזיר לנו תוצאה.
שימו לב לדוגמא הבאה שבה ל-resolve של ה-Promise ידרשו 2 שניות להחזיר תוצאה:

async function myFunction() {
    let promise = new Promise((resolve) => {
        setTimeout(_ => resolve("done!"), 2000)
    });

    let result = await promise;

    console.log(result); 
}

myFunction();
console.log('working...');

בשורה 3 הגדרנו setTimeout ל-resolve של ה-Promise.
בשורה 6 יצרנו משתנה בשם result – כערך הוא יקבל את ה-Promise – כאשר יסתיים ה-resolve.
כך שב-await השתמשנו על מנת שהתוצאה תחזור בזמן הנכון,
ולכן קיבלנו את התוצאה הבאה:

דוגמא לשימוש ב-async ו-await

כעת, נחזור לדוגמא שבה השתמשנו ב-Promise בחלק השני של המדריך,
רק שהפעם נעשה זאת באמצעות מימוש של async ו-await, שימו לב לקטע הקוד הבא:

async function getPokemons(url) {
    let response = await (await fetch(url)).json();
    let poksArray = [...response['results']];
    return poksArray.forEach(item => console.log(item['name']));
  }
  getPokemons('https://pokeapi.co/api/v2/pokemon?limit=20').catch((error) => {
    console.log(`Error: ${error}`)
  })
  console.log('loading...\n\n');

כלומר שהפעם ביצענו בפונקציה אחת בת מספר שורות את מה שביצענו לפני זה באמצעות 2 פונקציות והרבה יותר קוד (שגם פחות קריא).
בדוגמא זו משכנו 20 פוקימונים מתוך api בצורה אסינכרונית, ולכן נוכל לצפות לקבל את התוצאה הבאה:

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

סיכום

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

לקריאה מורחבת על הנושא יש ללחוץ כאן.