בואו נסתכל על Async/Await ב-JavaScript באמצעות דוגמאות

כותב המאמר בוחן דוגמאות של Async/Await ב-JavaScript. בסך הכל, Async/Await היא דרך נוחה לכתוב קוד אסינכרוני. לפני שהפיצ'ר הזה הופיע, קוד כזה נכתב באמצעות התקשרויות והבטחות. מחבר המאמר המקורי חושף את היתרונות של Async/Await על ידי ניתוח דוגמאות שונות.

אנו מזכירים: לכל קוראי Habr - הנחה של 10 רובל בעת הרשמה לכל קורס Skillbox באמצעות קוד ההטבה של Habr.

Skillbox ממליצה: קורס חינוכי מקוון "מפתח ג'אווה".

Callback

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

הנה דוגמה לקריאה אסינכרונית של קובץ ב-Node.js:

fs.readFile(__filename, 'utf-8', (err, data) => {
  if (err) {
    throw err;
  }
  console.log(data);
});

בעיות מתעוררות כאשר אתה צריך לבצע מספר פעולות אסינכרוניות בבת אחת. בואו נדמיין את התרחיש הזה: מתקבלת בקשה למסד הנתונים של המשתמשים של Arfat, אתה צריך לקרוא את השדה profile_img_url שלו ולהוריד תמונה משרת someserver.com.
לאחר ההורדה נמיר את התמונה לפורמט אחר, למשל מ-PNG ל-JPEG. אם ההמרה הצליחה, נשלח מכתב למייל של המשתמש. לאחר מכן, מידע על האירוע מוזן לקובץ transformations.log, המציין את התאריך.

כדאי לשים לב לחפיפה של שיחות חוזרות ולמספר הרב של }) בחלק האחרון של הקוד. זה נקרא Callback Hell או Pyramid of Doom.

החסרונות של שיטה זו ברורים:

• קשה לקרוא את הקוד הזה.
• קשה גם לטפל בשגיאות, מה שמוביל לרוב לאיכות קוד ירודה.

כדי לפתור בעיה זו, נוספו הבטחות ל-JavaScript. הם מאפשרים לך להחליף קינון עמוק של התקשרויות חוזרות במילה .then.

ההיבט החיובי של הבטחות הוא שהן הופכות את הקוד לקריאה הרבה יותר טוב, מלמעלה למטה ולא משמאל לימין. עם זאת, להבטחות יש גם בעיות:

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

הנה בעיה שתראה את המשמעות של הנקודה האחרונה.

נניח שיש לנו לולאת for שמדפיסה רצף של מספרים מ-0 עד 10 במרווחים אקראיים (0-n שניות). באמצעות הבטחות, עליך לשנות לולאה זו כך שהמספרים יודפסו ברצף מ-0 עד 10. לכן, אם לוקח 6 שניות להדפיס אפס ו-2 שניות להדפיס XNUMX, יש להדפיס תחילה את האפס, ולאחר מכן. הספירה לאחור להדפסת זה תתחיל.

וכמובן, אנחנו לא משתמשים ב-Async/Await או ב-.sort כדי לפתור בעיה זו. פתרון לדוגמה נמצא בסוף.

פונקציות אסינכרון

הוספת פונקציות אסינכרון ב-ES2017 (ES8) פשטה את משימת העבודה עם הבטחות. אני מציין שפונקציות אסינכרון עובדות "על הבטחות". פונקציות אלו אינן מייצגות מושגים שונים מבחינה איכותית. פונקציות אסינכרון נועדו כחלופה לקוד המשתמש בהבטחות.

Async/Await מאפשר לארגן עבודה עם קוד אסינכרוני בסגנון סינכרוני.

לפיכך, ידיעת הבטחות מקלה על הבנת העקרונות של Async/Await.

תחביר

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

// With function declaration
 
async function myFn() {
  // await ...
}
 
// With arrow function
 
const myFn = async () => {
  // await ...
}
 
function myFn() {
  // await fn(); (Syntax Error since no async)
}
 

Async מוכנס ממש בתחילת הצהרת הפונקציה, ובמקרה של פונקציית חץ, בין הסימן "=" לסוגריים.

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

// As an object's method
 
const obj = {
  async getName() {
    return fetch('https://www.example.com');
  }
}
 
// In a class
 
class Obj {
  async getResource() {
    return fetch('https://www.example.com');
  }
}

NB! כדאי לזכור שבנאי מחלקות וגטרים/מגדירים אינם יכולים להיות אסינכרוניים.

סמנטיקה וכללי ביצוע

פונקציות אסינכרון דומות בעצם לפונקציות JS סטנדרטיות, אבל יש יוצאים מן הכלל.

לפיכך, פונקציות אסינכרון תמיד מחזירות הבטחות:

async function fn() {
  return 'hello';
}
fn().then(console.log)
// hello

באופן ספציפי, fn מחזירה את המחרוזת hello. ובכן, מכיוון שזו פונקציה אסינכרונית, ערך המחרוזת עטוף בהבטחה באמצעות בנאי.

להלן עיצוב חלופי ללא אסינכרון:

function fn() {
  return Promise.resolve('hello');
}
 
fn().then(console.log);
// hello

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

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

const p = Promise.resolve('hello')
p instanceof Promise;
// true
 
Promise.resolve(p) === p;
// true
 

אבל מה קורה אם יש שגיאה בתוך פונקציה אסינכרונית?

async function foo() {
  throw Error('bar');
}
 
foo().catch(console.log);

אם זה לא יעובד, foo() יחזיר הבטחה עם דחייה. במצב זה, Promise.reject המכיל שגיאה יוחזר במקום Promise.resolve.

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

פונקציות אסינכרוניות עוצרות בכל המתנה.

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

// utility function to cause delay
// and get random value
 
const delayAndGetRandom = (ms) => {
  return new Promise(resolve => setTimeout(
    () => {
      const val = Math.trunc(Math.random() * 100);
      resolve(val);
    }, ms
  ));
};
 
async function fn() {
  const a = await 9;
  const b = await delayAndGetRandom(1000);
  const c = await 5;
  await delayAndGetRandom(1000);
 
  return a + b * c;
}
 
// Execute fn
fn().then(console.log);

והנה תיאור של אופן הפעולה של פונקציית fn.

• לאחר קריאתו, השורה הראשונה מומרת מ-const a = await 9; in const a = await Promise.resolve(9);.
• לאחר השימוש ב-Await, ביצוע הפונקציה מושעה עד ש-a מקבל את הערך שלה (במצב הנוכחי הוא 9).
• delayAndGetRandom(1000) משהה את ביצוע הפונקציה fn עד שהיא משלימה את עצמה (לאחר שנייה אחת). זה למעשה מפסיק את פונקציית fn למשך שנייה אחת.
• delayAndGetRandom(1000) via resolve מחזיר ערך אקראי, אשר מוקצה לאחר מכן למשתנה b.
• ובכן, המקרה עם משתנה c דומה למקרה עם משתנה a. לאחר מכן, הכל נעצר לשנייה, אך כעת delayAndGetRandom(1000) לא מחזיר דבר כי זה לא נדרש.
• כתוצאה מכך, הערכים מחושבים באמצעות הנוסחה a + b * c. התוצאה עטופה בהבטחה באמצעות Promise.resolve ומוחזרת על ידי הפונקציה.

ההפסקות האלה אולי מזכירות גנרטורים ב-ES6, אבל יש בזה משהו הסיבות שלך.

פתרון הבעיה

ובכן, עכשיו בואו נסתכל על הפתרון לבעיה שהוזכרה לעיל.

הפונקציה finishMyTask משתמשת ב-Await כדי להמתין לתוצאות של פעולות כגון queryDatabase, sendEmail, logTaskInFile ואחרות. אם תשווה את הפתרון הזה לזה שבו נעשה שימוש בהבטחות, קווי הדמיון יתבררו. עם זאת, גרסת Async/Await מפשטת מאוד את כל המורכבויות התחביריות. במקרה זה, אין מספר גדול של התקשרויות ורשתות כמו .then/.catch.

להלן פתרון עם פלט של מספרים, יש שתי אפשרויות.

const wait = (i, ms) => new Promise(resolve => setTimeout(() => resolve(i), ms));
 
// Implementation One (Using for-loop)
const printNumbers = () => new Promise((resolve) => {
  let pr = Promise.resolve(0);
  for (let i = 1; i <= 10; i += 1) {
    pr = pr.then((val) => {
      console.log(val);
      return wait(i, Math.random() * 1000);
    });
  }
  resolve(pr);
});
 
// Implementation Two (Using Recursion)
 
const printNumbersRecursive = () => {
  return Promise.resolve(0).then(function processNextPromise(i) {
 
    if (i === 10) {
      return undefined;
    }
 
    return wait(i, Math.random() * 1000).then((val) => {
      console.log(val);
      return processNextPromise(i + 1);
    });
  });
};

והנה פתרון באמצעות פונקציות אסינכרון.

async function printNumbersUsingAsync() {
  for (let i = 0; i < 10; i++) {
    await wait(i, Math.random() * 1000);
    console.log(i);
  }
}

שגיאה בעיבוד

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

async function canRejectOrReturn() {
  // wait one second
  await new Promise(res => setTimeout(res, 1000));
 
// Reject with ~50% probability
  if (Math.random() > 0.5) {
    throw new Error('Sorry, number too big.')
  }
 
return 'perfect number';
}

canRejectOrReturn() היא פונקציה אסינכרונית שמצליחה ("מספר מושלם") או נכשלת עם שגיאה ("סליחה, המספר גדול מדי").

async function foo() {
  try {
    await canRejectOrReturn();
  } catch (e) {
    return 'error caught';
  }
}

מכיוון שהדוגמה שלמעלה מצפה מ-canRejectOrReturn לבצע, כישלון שלה יגרום לביצוע של בלוק ה-catch. כתוצאה מכך, הפונקציה foo תסתיים ב-Undefined (כאשר שום דבר לא מוחזר בבלוק ה-try) או עם שגיאה שנתפסה. כתוצאה מכך, פונקציה זו לא תיכשל מכיוון שה-try/catch יטפל בפונקציה foo עצמה.

הנה עוד דוגמה:

async function foo() {
  try {
    return canRejectOrReturn();
  } catch (e) {
    return 'error caught';
  }
}

כדאי לשים לב לעובדה שבדוגמה, canRejectOrReturn מוחזר מ-foo. Foo במקרה זה או מסתיים עם מספר מושלם או מחזיר שגיאה ("סליחה, מספר גדול מדי"). חסימת ה-catch לעולם לא תבוצע.

הבעיה היא ש-foo מחזירה את ההבטחה שהועברה מ-canRejectOrReturn. אז הפתרון ל-foo הופך לפתרון ל-canRejectOrReturn. במקרה זה, הקוד יהיה מורכב משתי שורות בלבד:

try {
    const promise = canRejectOrReturn();
    return promise;
}

זה מה שיקרה אם תשתמש ב-await וחוזר ביחד:

async function foo() {
  try {
    return await canRejectOrReturn();
  } catch (e) {
    return 'error caught';
  }
}

בקוד למעלה, foo תצא בהצלחה עם מספר מושלם וגם עם שגיאה שנתפסה. לא יהיו כאן סירובים. אבל foo יחזור עם canRejectOrReturn, לא עם undefined. בוא נוודא זאת על ידי הסרת שורת return await canRejectOrReturn() :

try {
    const value = await canRejectOrReturn();
    return value;
}
// …

טעויות ומלכודות נפוצות

במקרים מסוימים, שימוש ב-Async/Await עלול להוביל לשגיאות.

נשכח מחכה

זה קורה לעתים קרובות למדי - מילת המפתח להמתין נשכחת לפני ההבטחה:

async function foo() {
  try {
    canRejectOrReturn();
  } catch (e) {
    return 'caught';
  }
}

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

פונקציות אסינכרון בהתקשרויות חוזרות

פונקציות אסינכרון משמשות לעתים קרובות למדי ב-.map או .filter כהתקשרות חוזרת. דוגמה לכך היא הפונקציה fetchPublicReposCount(שם משתמש), המחזירה את מספר המאגרים הפתוחים ב- GitHub. נניח שיש שלושה משתמשים שאנחנו צריכים את המדדים שלהם. להלן הקוד למשימה זו:

const url = 'https://api.github.com/users';
 
// Utility fn to fetch repo counts
const fetchPublicReposCount = async (username) => {
  const response = await fetch(`${url}/${username}`);
  const json = await response.json();
  return json['public_repos'];
}

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

const users = [
  'ArfatSalman',
  'octocat',
  'norvig'
];
 
const counts = users.map(async username => {
  const count = await fetchPublicReposCount(username);
  return count;
});

כדאי לשים לב ל-Await ב-.map callback. כאן ספירת היא מערך של הבטחות, ו-.map הוא התקשרות אנונימית עבור כל משתמש שצוין.

שימוש עקבי מדי ב- wait

ניקח את הקוד הזה כדוגמה:

async function fetchAllCounts(users) {
  const counts = [];
  for (let i = 0; i < users.length; i++) {
    const username = users[i];
    const count = await fetchPublicReposCount(username);
    counts.push(count);
  }
  return counts;
}

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

אם, למשל, זה לוקח בערך 300 אלפיות השנייה לעבד משתמש אחד, אז עבור כל המשתמשים זה כבר שנייה; הזמן המושקע באופן ליניארי תלוי במספר המשתמשים. אך מכיוון שקבלת מספר ה-repo אינה תלויה זה בזה, ניתן לבצע במקביל את התהליכים. זה דורש עבודה עם .map ו-Promise.all:

async function fetchAllCounts(users) {
  const promises = users.map(async username => {
    const count = await fetchPublicReposCount(username);
    return count;
  });
  return Promise.all(promises);
}

Promise.all מקבל מערך הבטחות כקלט ומחזיר הבטחה. האחרון, לאחר שהושלמו כל ההבטחות במערך או בדחייה הראשונה, הושלם. יכול לקרות שכולם לא מתחילים בו זמנית - על מנת להבטיח התחלה בו זמנית, ניתן להשתמש ב-p-map.

מסקנה

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

Skillbox ממליצה:

• קורס מעשי "Mobile Developer PRO".
• קורס מקוון יישומי "מנתח נתונים בפייתון".
• קורס מעשי שנתיים "אני מפתח אתרים PRO".

מקור: www.habr.com