Async/Await - קוד אסינכרוני שנראה סינכרוני

הסתכלו על הקוד הזה ואמרו לי מה הבעיה:

function loadUserDashboard(userId) {
  fetchUser(userId)
    .then(user => {
      return fetchOrders(user.id)
        .then(orders => {
          return fetchRecommendations(user.preferences)
            .then(recs => {
              return renderDashboard(user, orders, recs);
            });
        });
    })
    .catch(err => console.error(err));
}

זה קוד אמיתי שמשתמשים כותבים כשהם לומדים Promises. הוא עובד. הוא גם קשה לקרוא, קשה לדבג, וקשה לשנות. הוספת עוד API call אומרת עוד רמה של indentation. ה-error handling קבור בסוף. ואם רוצים לשתף נתון בין שלבים - צריך לשמור variables בסקופ החיצוני.

async/await הגיע ב-ES2017 ופתר את הבעיה הזו לחלוטין. הוא לא טכנולוגיה חדשה - הוא Syntax sugar על גבי Promises. אבל ה-Syntax הזה הפך קוד אסינכרוני לקריא כמו קוד סינכרוני, ושינה את האופן שכולם כותבים JavaScript.

function loadDashboard(userId) {
  return fetchUser(userId)
    .then(user =>
      fetchOrders(user.id).then(orders => ({ user, orders }))
    )
    .then(({ user, orders }) =>
      fetchRecs(user.preferences).then(recs => ({ user, orders, recs }))
    );
}

async function loadDashboard(userId) {
  const user = await fetchUser(userId);
  const orders = await fetchOrders(user.id);
  const recs = await fetchRecs(user.preferences);
  return { user, orders, recs };
}