Promise ב-JavaScript: then, catch ו-Promise.all בהסבר פשוט

Promise הוא ממלא מקום לערך עתידי

כש-JavaScript צריכה לעשות משהו שלוקח זמן, בקשת רשת, קריאת קובץ או המתנה לטיימר, היא לא יכולה לתת לכם את התוצאה מיד. במקום זה היא נותנת לכם Promise: אובייקט שמייצג ערך ש_יהיה_ קיים, בסופו של דבר.

const promise = new Promise((resolve) => {
    setTimeout(() => resolve("סיימנו"), 500);
});

console.log(promise);
promise.then((value) => console.log(value));

ה-console.log הראשון מציג Promise במצב pending. חצי שנייה אחר כך ה-Promise מתממש, וה-callback של .then רץ עם הערך. ה-Promise עצמו הוא סתם אובייקט; הקסם הוא שהוא יודע להודיע לכל מי שמאזין כשהערך שלו מגיע.

שלושת המצבים

Promise תמיד נמצא באחד משלושה מצבים:

• pending: העבודה בתהליך. עדיין אין ערך.
• fulfilled: העבודה הצליחה. יש ערך.
• rejected: העבודה נכשלה. יש שגיאה.

Promise עובר מ-pending ל-fulfilled או ל-rejected פעם אחת בדיוק, ונשאר שם לתמיד. אי אפשר לבטל מימוש של Promise או לממש אותו פעמיים.

const ok = Promise.resolve(42);
const bad = Promise.reject(new Error("nope"));

ok.then((v) => console.log("ok:", v));
bad.catch((e) => console.log("bad:", e.message));

Promise.resolve(value) בונה Promise שכבר התממש; Promise.reject(error) בונה Promise שכבר נדחה. זה נוח לבדיקות ולהחזרת Promise מפונקציה שלפעמים יש לה את התשובה מיד.

קריאת הערך: .then ו-.catch

לא פותחים Promise ישירות: מעבירים callback ל-.then, וה-Promise קורא לו כשהערך מוכן:

function fetchUser(id) {
    return new Promise((resolve) => {
        setTimeout(() => resolve({ id, name: "Ada" }), 200);
    });
}

fetchUser(1)
    .then((user) => console.log("התקבל:", user.name))
    .catch((err) => console.log("נכשל:", err.message));

.catch(fn) רץ אם ה-Promise נדחה. מאחורי הקלעים זה קיצור של .then(undefined, fn). .catch() בסוף השרשרת מטפל בדחיות מ_כל_ שלב שמעליו, ולא צריך אחד כזה אחרי כל .then.

שרשור: כל .then מחזיר Promise חדש

זה החלק שמבלבל אנשים. .then() לא רק מריץ callback: הוא מחזיר Promise חדש שמתממש עם מה שה-callback החזיר. זה מה שמאפשר שרשור:

Promise.resolve(2)
    .then((n) => n + 1)
    .then((n) => n * 10)
    .then((n) => console.log(n));

כל שלב מזין את הבא. אם callback של .then מחזיר Promise, השרשרת מחכה ל_אותו_ Promise לפני שהיא ממשיכה, כך ששלבים אסינכרוניים מתחברים בצורה נקייה:

function delay(ms, value) {
    return new Promise((resolve) => setTimeout(() => resolve(value), ms));
}

delay(100, "first")
    .then((v) => {
        console.log(v);
        return delay(100, "second");
    })
    .then((v) => {
        console.log(v);
        return delay(100, "third");
    })
    .then((v) => console.log(v));

שלושה שלבים אסינכרוניים ברצף, בלי קינון. השוו את זה לאותה לוגיקה שנכתבה עם callbacks ותבינו למה Promises תפסו.

שגיאות נופלות לאורך השרשרת

Promise שנדחה מדלג על כל .then עד שהוא מוצא .catch. זה כל מודל הטיפול בשגיאות:

Promise.resolve(10)
    .then((n) => {
        throw new Error("משהו נשבר");
    })
    .then((n) => {
        console.log("דולג");
        return n * 2;
    })
    .catch((err) => console.log("נתפס:", err.message));

זריקת שגיאה בתוך .then דוחה את ה-Promise שאותו .then החזיר. ה-.then הבא רואה את הדחייה ומעביר אותה הלאה, עד ש-.catch בולע אותה. בדרך כלל .catch אחד בסוף השרשרת זה כל מה שצריך, ושרשרת בלי .catch בכלל תייצר אזהרת "unhandled promise rejection", שכדאי לתקן.

בניית Promise משלכם עם new Promise

ברוב המקרים תשתמשו ב-Promises שספריות נותנות לכם. לפעמים צריך לעטוף משהו שלא מחזיר Promise, בדרך כלל API ישן מבוסס callbacks:

function wait(ms) {
    return new Promise((resolve, reject) => {
        if (ms < 0) {
            reject(new Error("ms must be non-negative"));
            return;
        }
        setTimeout(() => resolve(ms), ms);
    });
}

wait(200)
    .then((ms) => console.log(`waited ${ms}ms`))
    .catch((err) => console.log(err.message));

הפונקציה שמעבירים ל-new Promise נקראת executor. היא מקבלת שני ארגומנטים: resolve (קוראים לו עם ערך ההצלחה) ו-reject (קוראים לו עם שגיאה). קראו לאחד מהם פעם אחת בדיוק. אחרי זה, קריאות נוספות מתעלמות מהן.

שני הרגלים שחוסכים כאב ראש:

• השתמשו ב-new Promise רק כשעוטפים משהו שעוד לא מבוסס על Promises. אם פונקציה כבר מחזירה Promise, פשוט החזירו אותו.
• תמיד בצעו reject עם אובייקט Error, לא עם מחרוזת. שווה לשמור את ה-stack trace.

הרצת דברים במקביל: Promise.all

שרשראות .then רצות ברצף. כשיש כמה משימות אסינכרוניות בלתי תלויות ורוצים שירוצו באותו זמן, Promise.all הוא הכלי:

function delay(ms, value) {
    return new Promise((resolve) => setTimeout(() => resolve(value), ms));
}

const start = Date.now();

Promise.all([
    delay(300, "users"),
    delay(200, "posts"),
    delay(400, "comments"),
]).then((results) => {
    console.log(results);
    console.log(`took ${Date.now() - start}ms`);
});

שלושת הטיימרים רצים במקביל. Promise.all מתממש עם מערך של תוצאות באותו סדר כמו הקלט, אחרי שכל ה-Promises התממשו. הזמן הכולל הוא בערך 400ms, לא 900ms.

המלכודת: Promise.all נדחה ברגע ש_אחד כלשהו_ מה-Promises שלו נדחה, והתוצאות האחרות הולכות לאיבוד. זו ההתנהגות הנכונה כשצריך את כל החלקים (למשל, הצגת דף שדורש שלוש קריאות API). כשלא, השתמשו ב-allSettled.

כשחלק מהכשלונות בסדר: Promise.allSettled

Promise.allSettled מחכה שכל Promise יסתיים, בהצלחה או בדחייה, ונותן לכם דוח:

const promises = [
    Promise.resolve("a"),
    Promise.reject(new Error("b failed")),
    Promise.resolve("c"),
];

Promise.allSettled(promises).then((results) => {
    for (const r of results) {
        if (r.status === "fulfilled") console.log("ok:", r.value);
        else console.log("err:", r.reason.message);
    }
});

כל תוצאה היא אובייקט: { status: "fulfilled", value } או { status: "rejected", reason }. זה שימושי כשהצלחה חלקית מקובלת: רישום קבוצת אירועים בלוג, טעינה של הרבה תמונות ממוזערות, הרצת בדיקות תקינות עצמאיות.

עוד שני כלים ששווה להכיר:

• Promise.race([...]): מסתיים ברגע שה-Promise הראשון מסתיים, בהצלחה או בכישלון. נוח ל-timeouts.
• Promise.any([...]): מתממש עם ההצלחה הראשונה ומתעלם מדחיות. נדחה רק אם כל ה-Promises נדחים.

Promises תמיד אסינכרוניים

גם Promise שכבר התממש קורא ל-callback של .then שלו באופן אסינכרוני: אף פעם לא באופן סינכרוני, אף פעם לא באותו tick:

console.log("לפני");
Promise.resolve("מיידי").then((v) => console.log(v));
console.log("אחרי");

הפלט הוא לפני, אחרי, מיידי. ה-callback של .then מחכה שהקוד הנוכחי יסתיים, ואז רץ בתור ה-microtasks. הכלל הזה, "callback של Promise אף פעם לא רץ באופן סינכרוני", הוא הסיבה ששילוב Promises עם קוד סינכרוני צפוי: הקוד הסינכרוני תמיד מסתיים קודם.

הבא בתור: async/await

שרשור קריאות .then עובד, אבל ברגע שיש יותר משניים או שלושה שלבים זה מתחיל להיראות כמו גרם מדרגות. async/await הוא תחביר מעל Promises שמאפשר לכתוב את אותה לוגיקה כאילו היא סינכרונית, עם try/catch לשגיאות ומשתנים רגילים לערכי ביניים. זה הדף הבא.