אסינכרוניות בג'אווה סקריפט

תזכורת קטנה: קבלת ערכים מה-Promise התבצעה באמצעות הפונקציה .then שמכילה את הפרמטרים שה-Promise מחזיר. נניח שהפרומיס מחזיר לנו מחרוזת:

getData() // getData is function that return Promise with string.
.then(str => {
    // Do something with the returned string.
})
.catch(err => {
    // Do something if we got error.
})

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

תזכורת קצרה לפרומיס מהמאמר הקודם. אני מחזיר סטרינג שונה במקרה ש"השרת" מחזיר תשובה חיובית או שלילית. במאמר זה אשתמש בפרומיס הזה

let getData = new Promise((resolve, reject) => {
    setTimeout(() => {
        if (true){
            resolve('Ok, everything wend good');
        } else {
            reject('Ohh no!!! Something got lost...')
        }
    },2000)
})

איך נקבל את הערכים שחזרו באמצעות התחביר החדש?

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

const handlePromise = async () => {
    // With the ES8 syntax.
}

async function handlePromise(){
    // Code goes here.
}

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

const handlePromise = async () => {
    let str = await getData;
    // Rest of the code...
}

מה שיקרה עכשיו הוא שהפונקציה תעצור ולא תמשיך עד אשר המידע מה-getData יחזור. למעשה הפכנו את הקוד שלנו לסינכרוני והקומפיילר רץ שורה שורה. כשהמידע יחזור הוא יושם לתוך המשתנה str ועם המשתנה הזה שמכיל את המידע שלנו נוכל לשחק.

כמובן, בגלל שזאת פונקציה, לא לשכוח לקרוא לה! handlePromise() .

זוכרים את הקוד מהמאמר הראשון? אתם כבר מתארים לעצמכם איך אפשר להכניס את הערכים שקיבלנו לדף:

const handlePromise = async () => {
    let str = await getData();
    content.innerHTML += str;
}

רגע רגע, מה עם טיפול בשגיאות? ב-Promise טיפלנו בשגיאות באמצעות הפונקציה.catch איך נעשה את זה הפעם? פשוט מאוד! באמצעות בלוק עם המילים השמורות try ו-catch 😄:

const handlePromise = async () => {
    try{
        let str = await getData();
        content.innerHTML += str;
    }
    catch(err) {
        content.innerHTML += err;
    }
}

עטפנו את הקוד בבלוקים של try ו-catch. הפונקציה תנסה לקבל את הנתונים מהפרומיס שנמצא ב-getData. אם הפרומיס יחזיר resolve מצוין. אם לא, ונקבל reject הפונקציה תלך לבלוק של ה-catch ועם התשובה שנקבל באותו הבלוק נוכל לשחק ולהדפיס למשתמש במגוון דרכים.

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