שליפת מידע עם Azios
then ו-catch, והחלופה עם async ו-await.fetch, אבל כאן מתקינים ספרייה מוכנה עם npm i שמחזירה את המידע בפשטות ובפחות קוד, וה-package.json מציג את הגרסה שהותקנה.products מסוג ProductModel[] ומתחיל ריק.componentDidMount, ה-lifecycle hook שמיועד לפעולות כאלה פעם אחת כשהקומפוננט מוכן.get להבאת מידע, post להוספה, put לעדכון מלא, patch לעדכון חלקי ו-delete למחיקה. משתמשים ב-get ומציינים את הטיפוס (מערך של ProductModel) ואת ה-URL.then מעבירים callback שמקבל response, אובייקט מעטפת. המידע האמיתי נמצא ב-response.data, ומעדכנים איתו את ה-state באמצעות this.setState. ב-catch מטפלים בכישלון, למשל כשהשרת לא באוויר, ובשלב זה מציגים alert עם הודעת השגיאה.this.state.products.map, ו-key שהוא p.id. בזכות הטיפוס מקבלים IntelliSense, ושם שדה שלא קיים בנתונים ייתן שגיאת קומפילציה.async לפני הפונקציה (היא כבר לא מחזירה void), ו-await לפני הקריאה. await ממתין לסיום ה-promise בלי לתקוע את הדפדפן, ומחזיר ישירות את ה-response. את הטיפול בשגיאה עושים ב-try ו-catch רגיל.get חייב להתאים למה שהשרת מחזיר, אחרת TypeScript ידווח על חוסר התאמה.async ו-await כי הם מונעים callback hell, אבל נשארת עם try ו-catch ומציינת שאין עדיין עיצוב.פרקי ההרצאה: שליפת מידע עם Azios
תמלול ההרצאה: שליפת מידע עם Azios
הטקסט המלא של הדקות הראשונות בהרצאה «שליפת מידע עם Azios» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
כל מה שנשאר לנו לעשות עכשיו זה לכתוב את הקוד שגולש לשרת המרוחק ומחזיר לנו את המידע. המידע יוחזר וייכנס לתוך אובייקטי פרודקט מודל.
אז איך אנחנו מבצעים את הגלישה? אז כמובן יש ב-JavaScript תשתית שמאפשרת לבצע גלישת אג'אקס לשרת מרוחק. זה יכול להיות אובייקט מטיפוס XML HTTP Request.
האובייקט הזה מסוגל לגלוש לשרת מרוחק זה ה-Native-Native של JavaScript. ב-JavaScript יש פונקציה שנקראת Fetch שמסוגלת גם כן לבצע גלישה ולהחזיר את המידע אבל אנחנו הולכים להשתמש בספרייה מוכנה שהרבה יותר נוח לעבוד איתה כי היא מביאה לנו את המידע בצורה
הכי פשוטה מבחינתנו הכי מעט קוד שאנחנו הספרייה הזאת נקראת בואו נתקין אותה npmi access בצורה כזאת והנה ההתקנה הסתיימה יש לנו כרגע את הספרייה בואו נסתכל בפאקדג' ג'ייסון כרגע אנחנו רואים שזאת הספרייה זאת הגרסה הנוכחית שלה ואנחנו רוצים להשתמש איתה בואו נסגור את הקובץ הזה אין לנו בו שימוש יותר אנחנו סיימנו לפתח אותו,
אנחנו הולכים לפרודקטס אריה. הנה בנינו בעבר את הפרודקט ליסט, הכנו את הקרקע. פרודקט ליסט בעצם אמור להציג לנו את רשימת המוצרים.
אז בואו ניגש לכאן ונראה שכשבנינו בעבר את הקובץ הזה, את הקומפוננט הזה, בנינו אותו כקלאס קומפוננט ויש לנו סטייט כי אנחנו רוצים לגלוש לשרת המרוחק, להביא את המוצרים ולהציג אותם.
אז למה יש לנו פה סטייט? הגלישה לשרת המרוחק לוקחת זמן. ברגע שהמידע מוחזר הקומפורנט כבר מזמן הוצג על המסך ואז הוא צריך לקבל את הנתונים ולרפרש את ה-UI שלו, את הרנדרינג בשביל שהמידע העדכני שהגיע מהשרת יוצג.
זאת הסיבה שהמידע חייב להיות בתוך הסטייט, אחרת הקומפורנט לא יציג אותו ברגע שהוא יקבל אותו מהבייק אנד. מה המידע שאנחנו רוצים להכניס לסטייט? כמובן אוסף מוצרים, יש שם פה פרודקטס.
הסוג כמובן product model, סוגריים. הנה אנחנו רואים שקיבלנו מכאן את הלינק לפרודקט מודל שבנינו.
בואו ניגש לסטייט עצמו ונכניס כאן מערך ריק כרגע. האמת אנחנו יכולים אפילו למחוק את כל הקונסטרקטור, בואו נעדכן בו כרגע איזשהו מערך ריק, ואז אנחנו רוצים לבצע את הגלישה ל-Backend ולהחזיר את המידע.
והשאלה היא איפה אנחנו מבצעים את הגלישה ל-Backend. האם אנחנו מבצעים את הגלישה בקונסטרקטור? איך שהאובייקט של הקומפוננט נוצר? מתבצע קונסטרקטור?
אנחנו יכולים בקונסטרקטור לבצע גלישה או ברנדר? אז התשובה היא כמובן לא בקונסטרקטור ולא ברנדר, מפני שגלישה ל-Backend נחשבת Side Effects, כלומר פעולות שהן מחוץ לגבולות הקומפוננט, ו-Side Effect שאנחנו רוצים לבצע פעם אחת ויחידה, כאשר הקומפוננט כבר מוכן לשימוש ומאפשר Side Effects,
זה ב-Component Did Mount שלמדנו כאשר למדנו את ה-Lifecycle Hooks. Component did mount זה ה-life cycle hook שמיועד לביצוע side effects פעם אחת בלבד כשהקומפוננט מוכן לשימוש.
כאן אנחנו רוצים לבצע את הגלישה לשרת המרוחק. אז אנחנו רוצים להשתמש ב-access, הנה היא מגיעה מפה, ו-access יש לה פונקציה שמאפשרת to get value, to post value, to put value.
רגע, מה ההבדל בין כל אלה? אז ה-access מיועדת לגלישה ל-Rest API, RESTful Service. זה בעצם שרת שמחצין לנו מידע ומאפשר לנו להוסיף, לעדכן, למחוק, להביא מידע.
אם אנחנו רוצים להביא, אז אנחנו צריכים להשתמש בפונקציית get. אם אנחנו רוצים להוסיף, זה פוסט, לעדכן זה put, לעדכן מידע מלא, לעדכן מידע חלקי זה patch, ולמחוק זה delete.
אנחנו רוצים להביא את המידע, פונקציית get זו פונקציית ג'נרית שאומרת לנו מה סוג המידע שאתם הולכים להחזיר. אנחנו הולכים להחזיר product model מערך ואז היא אומרת לנו אוקיי תגידו מאיפה אתם רוצים להביא את המידע?
הנה ה-url אנחנו רוצים להביא את ה-url בדיוק מאיפה שהוא מחצין את המידע. בואו נעתיק את ה-url הזה. go ונדבקנו וזהו. מה פונקציית אקשס מחזירה לנו?
פונקציית אקשס מחזירה promise. promise זה בעצם אובייקט ב-JavaScript שמאפשר לנו להריץ בתוכו קוד א-סינכרוני ומאפשר לנו לקבל בחזרה את המידע לאחר שהקוד הא-סינכרוני הורץ.
אג'אקס זה פעילות א-סינכרונית. לכן אג'אקס הכי נכון להריץ בתוך אובייקט promise. promise אומר לנו תשמעו אני מבטיח לכם בגלל זה המילה promise שאני הולך או להצליח או להיכשל ואם אני נכשל אני מבטיח לכם שאני גם אומר לכם שנכשלתי.
יש כמה שיטות להפעיל promise בואו נראה בעצם את שתי השיטות הנפוצות להפעיל promise. הפונקציה access מחזירה promise. promise יש לו פונקציה שנקראת then מאפשרת לקבל callback בכדי לומר לנו תשמעו סיימתי בהצלחה הנה המידע קחו את המידע אחרי שסיימתי תעשו איתו מה שאתם
רוצים אז מה המידע ש-access מחזירה המידע שהיא מחזירה זה products מה אנחנו רוצים לעשות עם הproducts הנה יש לנו פה פונקציה שבה אנחנו יכולים לכתוב מה אנחנו רוצים לבצע כאשר הproducts יגיעו אלינו בגלל שפעילות אג'אקס היא פעילות אסינכרונית יכול להיות שהדבר הזה ייקח זמן, לכן המערכת אומרת לנו תנו לי callback, אני לא
יודעת כמה זמן זה ייקח לי, אולי השארה תמוס, אולי זה ייקח לי חצי שנייה, אולי זה ייקח לי עשר שניות, אולי מאית שנייה. ברגע שהמידע מוחזר מהשראת, אני קוראת ל-callback שלכם ונותנת לה את המידע הסופי.
האמת, המידע הסופי זה טעות שלי, זה לא פרודקט, זה ריספונס, שזה אובייקט מעטפת פה יושבים המוצרים שהוחזרו.
מה אנחנו רוצים לעשות עם המידע הזה? אנחנו רוצים להכניס אותו ל-state, בכדי שהוא יוצג, אוקיי? איך אנחנו מוסיפים, מעדכנים את ה-state? כמובן, על ידי this.setState.
this.setState מקבלת אובייקט, ראינו את זה בעבר. מה אתם רוצים לעדכן? לנו פרודקט, איזה מידע אתם רוצים להכניס בתוך הפרודקט?
אנחנו רוצים להכניס את המוצרים שהגיעו מהבאק-אנד. יש לנו פה איזשהו ראפר, מעטפת, שנקרא רספונס. תוך רספונס יושב משתנה שנקרא דאטה, והדאטה זה מה שהוחזר מהשרט.
בואו נרד פה אולי, נרד שורה שיהיה קצת יותר קל לראות את זה. אז access זאת באיזה אובייקט שיש לו פונקציה get, כשאנחנו אומרים לה מה המידע שאנחנו רוצים להחזיר מהשר"ט, אוקיי, גם אם לא נגיד לו הוא עדיין יחזיר את המידע, כי זה מה שהמידע מחזיר.
הסיבה שאנחנו אומרים לו את זה זה בשביל שהדאטה הזה יהיה מהסוג הזה. שימו לב שאם אני אומר לו שאני מחזיר פרודקט מודל, הוא אומר לי חמוד אתה לא יכול לקחת פרודקט מודל ולהכניס למערך, אתה לא יכול לעשות את זה.
בואו נגיד לו שאני מחזיר מערך סטרינגים, הוא אומר לי לא, אתה לא יכול, כאן יש לך מערך מחרוזות זה מסוג product model collection, אתה לא יכול.
זאת הסיבה שאנחנו רוצים להגיד לא, בול מה סוג הנתונים שאנחנו יודעים שהשרת מביא