Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

JavaScript – Asynchronous Programming – async & await

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

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

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

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

JavaScript - Async syntax
JavaScript – Async syntax

למילה השמורה 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);
JavaScript - async
JavaScript – async

שימוש ב-await

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

JavaScript - await syntax
JavaScript – await syntax

שימו לב כי 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 השתמשנו על מנת שהתוצאה תחזור בזמן הנכון,
ולכן קיבלנו את התוצאה הבאה:

JavaScript - async & await
JavaScript – async & 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 בצורה אסינכרונית, ולכן נוכל לצפות לקבל את התוצאה הבאה:

JavaScript - async & await
JavaScript – async & await

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

סיכום

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

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

רוצים לשתף את המדריך?

אהבתכם את המדריך? פתר לכם תקלה?

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

כתיבת תגובה

הזמינו אותי לכוס קפה
buy me coffee

אהבתכם את המדריך? פתר לכם תקלה? הזמינו את כותב המדריך לכוס קפה

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