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

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 – הזנו כתובת שגויה, ולכן נקבל הודעת שגיאה:

JavaScript - Promise error
JavaScript – Promise error

אם כך בוא נראה כיצד ביכולתנו להשתמש ב-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`)
        });
}
JavaScript - Promise error - catch
JavaScript – Promise error – catch

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

()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 ,הסיטואציה נפתרה`);
    });
}
JavaScript - Promise error - catch,finally
JavaScript – Promise error – catch,finally

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

Exception Handling – סיכום

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

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

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

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

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

כתיבת תגובה

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

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

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