Async ו-Await
שיעור 9 מתוך 9 בקורס החלקים המאתגרים ב-JavaScript מודרני (ES6+) של Coddy.
אם השלמת את השיעור האחרון, בטח חשבת שקשה להבין הבטחות או אפילו לזכור את התחביר שלהן!
אל דאגה! ES6 כאן כדי לעזור לך בכך.
<i>async</i>ו־<i>await</i>הופכים את כתיבת ההבטחות לקלה יותר
נבחן פונקציה שמבצעת משימה אסינכרונית (גוזלת זמן).
אנחנו רוצים שהפונקציה הזאת תחזיר הבטחה וגם תחכה לתוצאה של ההבטחה.
אם כותבים
asyncלפני פונקציית Javascript כלשהי, היא תמיד מחזירה הבטחה.
awaitגורם לפונקציה להמתין להבטחה ולהשהות את ביצוע הפונקציה עד שההבטחה תיפתר.
נבחן דוגמה של שליפת נתונים משרת; הפעולה עשויה להימשך כמה שניות.
async function fetchData () {
const response = await fetch("/url"); // המתן ל-promise
const movies = await response.json(); // המתן ל-promise
return movies;
}
fetchData.then(val => console.log(val)) // הנתונים שהוחזרו מה-APIאפשר להשתמש במילת המפתח
awaitרק בתוך פונקצייתasync.
אפשר להשתמש ב־async-await הן בפונקציות רגילות והן בפונקציות חץ.
const someFunc = async (a) => { await //קוד }
אתגר
בינוניניתנת לך פונקציה foo, שמקבלת מספר שלם n ומחזירה הבטחה.
כתבו פונקציה sum שמקבלת שתי הבטחות כקלט ומחזירה את סכום התוצאות שלהן לאחר שההבטחות נפתרו.
יש לסמן את הפונקציה ב-async!
נסו בעצמכם
const foo = async (x) => {
return x
}
// כתבו את הקוד שלכם למטהכל השיעורים ביחידה החלקים המאתגרים ב-JavaScript מודרני (ES6+)
2בואו נצלול פנימה
תחום בלוק – let ו-constפונקציות חץSpread ו-Restלולאת for...ofמחלקותPromisesAsync ו-Awaitתרגלו בעצמכם: קומפיילר JavaScript אונליין