JavaScript – Asynchronous Programming – Exception Handling

exception handling או טיפול בשגיאות בפעולות אסינכרוניות נעשה באמצעות המתודות then ,catch ו-finally. במאמר זה נראה כיצד ביכולתנו להשתמש במתודות אלו על מנת לטפל בשגיאות בתוכנית שלנו.

עד עתה במדריך זה,  ראינו דוגמאות לניהול פעילות אסינכרונית באמצעות המתודה then.
מהסיבה שהזנו בכל פעם כתובת url נכונה, לא הייתה לנו כל בעיה,
אולם במקרה והיינו שולחים כתובת לא נכונה – התוכנית הייתה קורסת,
וזאת משום שכתובת url שגוייה תחזיר לנו שגיאת 404 (הדף אינו נמצא).
אם כך, מה עלינו לעשות על מנת למנוע תקלה זו?

ראשית ניצור את אותה מתודת ה-Executor שיצרנו בפרק הקודם,
וכפי שעשינו בפרק הקודם, גם הפעם על Executor זה נסתמך במהלך כל הפרק הנוכחי,
כך שנוכל להשתמש שוב ב-Code Snippet הבא:

function getPromise(url) {
    let myPromise = new Promise(function (resolve, reject) {
        let request = new XMLHttpRequest();
        request.open("GET", url);
        request.onload = function () {
            if (request.status == 200) {
                resolve(request.response);
            } else {
                reject("Error!!!");
            }
        };
        request.send();
    });
    return myPromise;
}

()Exception Handling with catch

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

const pokemonsUrl = 'badurl.balblabla';
let promise = GETPromise(pokemonsUrl);

const promiseHandler = () => {
    promise.then(
        (result) => {
            poksArray = [...JSON.parse(result)['results']]
            poksArray.forEach(item => console.log(item['name']));
        });
}

שימו לב לשורה 1 – הזנו כתובת שגויה, ולכן נקבל הודעת שגיאה:

אם כך בוא נראה כיצד ביכולתנו להשתמש ב-catch על מנת למנוע קריסה.
נשרשר מתודת catch למתודת ה-then שלנו, ובכך התוכנית תמשיך לעבוד גם לאחר שתיתקל בשגיאה:

const pokemonsUrl = 'badurl.balblabla';
let promise = GETPromise(pokemonsUrl);

const promiseHandler = () => {
    promise.then(
        (result) => {
            poksArray = [...JSON.parse(result)['results']]
            poksArray.forEach(item => console.log(item['name']));
        }).catch((error) => {
            console.log(error);
            console.log(`${pokemonsUrl} does not exists`)
        });
}

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

()finally

ב-finally נוכל להשתמש על מנת להגדיר מה קורה לבסוף לאחר ה-catch,
לדוגמא – לנתק את הקישור ל-api למשל ועוד.
שימו לב לקטע הקוד הבא שימחיש זאת, ולאחר מכן נבאר אותו:

const pokemonsUrl = 'badurl.balblabla';

const promiseHandler = () => {
    let loading = true;
    loading && console.log('Loading...');

    // Gatting Promise
    promise = GETPromise(pokemonsUrl);

    promise.then((result) => {
        console.log({ result });
    }).catch((error) => {
        console.log(error)
    }).finally(() => {
        console.log(`loading = false ,הסיטואציה נפתרה`);
    });
}

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

Exception Handling – סיכום

לסיכום ניתן לומר כי כעת אנו מבינים כיצד להשתמש במתודות then ,catch ו-finally על מנת למנוע קריסה שנובעת מהפעילות האסינכרונית שלנו.
בחלק הבא של המדריך נלמד על דרך קצרה וקריאה יותר להתנהל מול Promises.

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