PracticU

העברת Interceptors לקובץ נפרד

בלי כתוביותעם כתוביות
PracticU › קורס ריאקט - React › העברת Interceptors לקובץ נפרד
מילון מושגים:
אובייקט - יחידה בתכנות מונחה עצמים שמאגדת נתונים (תכונות) ופעולות (מתודות). נוצר בדרך כלל ממחלקה המשמשת כתבנית.
לוג - רישום מתועד של אירועים ופעולות שמתרחשים במערכת או בתוכנה, המשמש למעקב ולאיתור תקלות.
בקשה - פנייה שלקוח שולח לשרת כדי לקבל מידע או לבצע פעולה. השרת מחזיר עליה תגובה.
ספרייה - אוסף קוד מוכן, כמו פונקציות ומחלקות, שמפתחים משתמשים בו בתוכניותיהם במקום לכתוב הכול מחדש.
תגובה - המידע שהשרת מחזיר ללקוח בתשובה לבקשה, הכולל בדרך כלל נתונים וקוד סטטוס.
שרת - מחשב או תוכנה שמספקים שירות למחשבים אחרים (לקוחות) ברשת, למשל אחסון קבצים, אתר אינטרנט או מסד נתונים, ומגיבים לבקשות שלהם.

העברת Interceptors לקובץ נפרד
כדי להשתמש באותם interceptors בכל מקום בפרויקט, מוציאים אותם לקובץ נפרד. בפועל מתקבל אובייקט גלישה שמדפיס ללוג כל בקשה ותשובה, מעין לוגר.
השלבים
1. קובץ חדש: בתיקיית services יוצרים קובץ logger-axios.ts.
2. העברת הקוד: גוזרים אליו את שני ה-interceptors, מוסיפים import לספרייה, ויוצרים את המופע בשם loggerAxios. שמו מתאר שהוא רושם בקונסול את הבקשה והתשובה.
3. ייצוא: מחצינים עם export default loggerAxios.
4. שימוש: בקומפוננט (כאן ברשימת העובדים) מייבאים אותו ומשתמשים בו במקום האובייקט הרגיל. את המופע הישן שהיה בקומפוננט אפשר למחוק.
5. בדיקה: רענון, מעבר ל-Employees ופתיחת F12 מציגים את start request ואת get response עם כל המידע, כמו קודם.
היתרון הוא שבכל מקום באפליקציה שרוצים לוג כזה מספיק להשתמש באובייקט הזה במקום באובייקט הרגיל.
בסיום המודול אפשר לגלוש לשרת מרוחק באג'אקס, להביא מידע, להציגו בכרטיסיות ודרך ראוטים, ולכתוב interceptors.

פרקי ההרצאה: העברת Interceptors לקובץ נפרד

  1. 00:00

    הוצאת ה-Interceptors לקובץ נפרד

  2. 00:42

    יצירת קובץ logger axios

  3. 01:25

    שימוש ב-logger באפליקציה

תמלול ההרצאה: העברת Interceptors לקובץ נפרד

הטקסט המלא של הדקות הראשונות בהרצאה «העברת Interceptors לקובץ נפרד» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

  1. 00:02

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

  2. 00:13

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

  3. 00:51

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

  4. 01:25

    עם לוגר אקשס איפה שאנחנו רוצים באפליקציה לדוגמה באמפלואיז במקום מיי אקסס יש לנו לוגר בואו נדליק אותו אימפורט נבדוק home refresh employees הנה האמפלואיז מתבצעים נלחץ על f12 ויש לנו כאן את הסטארט ריקווסט ואת הגוט ריספונס בואו רגע נראה את זה קצת יותר בלייב

לקורס המלא: קורס ריאקט אונליין

ההרצאה הקודמת: הסבר על Interceptors בריאקט

ההרצאה הבאה: הוספת קומפוננטה בטפסים של ריאקט - React Forms

הרצאות קשורות מקורסים אחרים

  • שמירה של Canvas לקובץ
  • העברת קבצים עם WinScp
  • העברת Netcat ל-Windows 10
  • קריאה וכתיבה לקובץ ב-NodeJS

קורסים נוספים במסלול

  • קורס יסודות HTML - בניית אתר אינטרנט פשוט
  • קורס CSS 3 - בדגש על Flex & Grid
  • קורס Javascript כולל JQuery
  • קורס ג'אווה סקריפט מעשי - JavaScript
  • קורס TypeScript
  • קורס NodeJS