Express Middleware
request, response ו-next.next הבקשה נתקעת, והדפדפן לא מקבל תשובה.response.send. אז הנתיב המקורי לא מתבצע.app.use(fn) רושם את הפונקציה לכל בקשה, בלי קשר לנתיב.next הדף לא נטען. עם next כל דף נטען, והמידע מוצג גם לבקשות נוספות כמו בקשת האייקון של הדפדפן.app.get(path, middleware, handler). ה-middleware רץ רק לנתיב הזה.displayCurrentTime מציג new Date().toLocaleTimeString() רק לדף הבסקטבול.פרקי ההרצאה: Express Middleware
תמלול ההרצאה: Express Middleware
הטקסט המלא של הדקות הראשונות בהרצאה «Express Middleware» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
באקספרס יש משהו מאוד חשוב שאנחנו צריכים להכיר כי אנחנו הולכים לעבוד איתו, והוא נקרא Middleware. Middleware זה בעצם פונקציה שמורצת באמצע, בין ה-request לבין ה-response.
אנחנו יכולים לומר לאקספרס, תקשיבי, כל פעם שיש איזשהו request, אנחנו רוצים שתעשי בלה בלה, תעשי איזה משהו, או כל פעם שיש request לנתיב ספציפי, אנחנו רוצים שתעשי בלה בלה.
אנחנו בהמשך כמובן נשתמש בהרחבה עם היכולת הזאת אבל בסרטון הזה אנחנו רק רוצים לראות דמו איך אנחנו אומרים ל-request לעשות משהו כאשר מתבצע ה-request בין אם זה call request ובין אם זה request לפונקציה ספציפית.
הדבר הראשון שאנחנו צריכים להבין זה ש-middleware בסופו של דבר זאת פונקציה אז אנחנו בונים function בוא נניח שאנחנו רוצים middleware כלומר פונקציה כזאת שמציגה את הדאטה של ה-request אז בואו נקרא לפונקציה display request data.
בואו נגיד מידע מרכבי של ה-request. כל פונקציה שהיא middleware מקבלת שלושה ארגומנטים. ארגומנט ראשון זה ה-request, ארגומנט שני זה ה-response, כי הרי אנחנו נמצאים בין ה-request ובין ה-response.
וארגומנט שלישי שהוא לא פחות חשוב נקרא next. תכף אנחנו נראה מה זה בעצם ה-next. ריקווסט זה אובייקט הריקווסט שאנחנו מקבלים במהלך הריקווסט בדיוק כמו שקיבלנו כאן הריספונס זה אובייקט הריספונס שאנחנו הולכים לשלוח אנחנו יכולים להוסיף לריספונס כל מיני דברים או שאנחנו יכולים פשוט לעצור ולהגיד אוקיי
תקשיב אתה לא ממשיך לנתיב האמיתי שלך אלא אתה מוחזר בחזרה מידלוויר כללי מורץ לפני כל הראוטים מידלוויר קיים עבור פונקציה ספציפית, והוא רץ לפני הפונקציה הספציפית.
אז איך אנחנו בעצם הולכים לעשות את זה? יש לנו פה פונקציה שאנחנו רוצים להציג את הפרמטרים המרכזיים ב-request, אז בואו נבצע console.log וניקח את פרמטר ה-request שקיבלנו, ונציג את ה-method שלו, כלומר מה בעצם גלשו, האם גלשו ב-get, האם גלשו
ב-post וכו', ונציג בנוסף גם את ה-request url לאן בדיוק ביצעו את הגלישה, לאיזה נתיב. עכשיו, אם אני לא אבצע שימוש ב-next, ה-request בעצם לא ימשיך לנתיב האמיתי שלו וייתקע ובעצם הלקוח לא יקבל שום תשובה בחזרה.
אז אנחנו חייבים להשתמש ב-next, אבל כבר אני רוצה להראות איך אני משתמש ב-next. לפני זה אני רוצה להראות מה בעצם קורה אם אני לא משתמש ב-next. אז איך אני עכשיו מגלם את הפונקציה הזאת כמידלווייר?
הרי שימו לב שזאת סתם פונקציה שכתבתי, היא בכלל באפור כי לא השתמשתי איתה והיא לא מקושרת לשום מקום. אז בשביל לומר לאקספרס להריץ את הפונקציה כמידלווייר אנחנו הולכים לסרבר שבנינו, הנה הסרבר פה, ואנחנו משתמשים בפונקציה שנקראת use.
use זאת פונקציה שאומרת לנו תשמעו תביאו לי פונקציה שזאת החתימה שלה ריקווסט ריספונס ונקסט אני אקרא לה לפני שאני קורא לה ריקווסטים הרגילים לא משנה איזה ריקווסט זאת אומרת שזאת השיטה לגרום לווינדלוויר לרוץ לא משנה איזה נתיב מבקשים בואו קודם כל נראה מה קורה כרגע אם אני לא משתמש בפרמטר השלישי נקסט אנחנו רוצים להריץ את המערכת נוד אפ גו
הנה הוא נמצא פה קונטרול קליק בואו נפתח את ה-URL והוא ייתן לנו שהוא לא מצליח לגלוש לכלום. בואו רגע נעצור את הגלישה ונגיד לו תשמע לא יודע לאן גלשת אני יודע שיש לי פה ראוט ספציפי שאמור לתת לי תשובה אני רוצה שתגלוש לי לראוט הזה גו והוא חושב וחושב וחושב וחושב שימו לב פה מה קרה ברקע ברקע אני רואה שהוא
מדפיס לי שהייתה ושביקשו את הנתיב הזה כי זה בדיוק מה שהדפסנו במידלוויר. אנחנו רואים שהמידלוויר אכן מתבצע והיוזר לא מקבל שום תשובה.
אם אנחנו עכשיו חוזרים לפה ואומרים לו response.send בואו נשלח טסטינג. סתם שלחתי איזה משהו בחזרה לקליינט. נעצור, נריץ, ונחזור בחזרה, הנה כבר אנחנו רואים את הטסטינג.
אני מריץ ואני רואה שכל פעם שאני מריץ אני מקבל כאן get ו-news. שימו לב שהדפדפן עצמו מבצע גם בקשה מהשרת למשהו שנקרא פאביקון. פאביקון זה האייקון הזה כאן למעלה.
זאת אומרת שהוא אומר לשרת תביא לי גם את הפאביקון כי אני רוצה שיהיה לי פה איזשהו שרת. אז יש פה שתי בקשות אבל מבחינתנו מה עשה המידלוור?
הוא עצר כרגע את הריצה האמיתית, כי הוא נמצא לפניה, אנחנו גלשנו דקה, קודם כל המידלווייר התבצע, עצר את הריצה והחזיר לנו טסטינג כמובן, הטסטינג הוא לא דף אמיתי עם html כי פשוט רשמתי פה את המחרוזת טסטינג, זה גם מה שאני רואה ב-view source.
אז מידלווייר אנחנו רואים שהוא יכול לעצור את הגלישה, אולי היוזר מנסה לפרוץ לי לאתר ואני פתאום קולט את זה, אני רוצה לעצור אותו ולהגיד לו תשמע חבוב לאתר הזה אתה לא נכנס או כל סיבה אחרת לעצור ולהחזיר אבל אנחנו לא רוצים לעצור.
אנחנו רוצים להמשיך ולתת לו אפשרות להגיע לריקוסט האמיתי שלו. אם אני מוריד את זה ומריץ עוד פעם את האתר אנחנו יכולים לראות שיש לי פה גלישה שלא נגמרת כי הוא לא מחזיר שום ריספונס בחזרה.
אנחנו רוצים כן לאפשר גלישה לראוט המקורי, ולכן אנחנו אומרים לו פשוט נקסט. נקסט אומר, תשמע, תעביר אותו בבקשה לראוט שלך, לראוט המקורי שביקשו, או למידלוור הבא.
יכול להיות שיש לי פה הרבה מידלוורים שונים, כמובן פונקציות שונות שכל אחת עושה משהו אחר. אז תעביר אותו בבקשה למידלוור הבא בשביל שהוא גם כן יתבצע, כל מידלוויר חייב נקסט בשביל להעביר את זה למידלוויר הבא או רספונס סנד או רספונס אנד או כל דבר כזה.
בואו נריץ שוב פעם, כרגע אם אנחנו מבקשים את הדף, שימו לב מה קורה פה ברקע. אנחנו מקבלים את הפרטים של ה-request, איזה ורב היה לנו ואיזה דף גלשו אליו וגם הצלחנו לקבל את הדף.
בואו נגלוש לדף אחר. בסקטבול, והנה אנחנו מקבלים את הבסקטבול, בואו נגלוש ל-404, והנה אנחנו מקבלים את ה-404, ובהמשך אנחנו ממש רואים את כל הנתיב האמיתי שאליו היוזר גלש, ומה בעצם אנחנו מחזירים לו בחזרה.
זאת מידלוויר אחת שמתבצעת עבור כל ה-routes. דרך אגב אם נניח בראוט אין לנו ריספונס נקודה send אז אנחנו נקבל בדיוק את אותו הדבר כאילו שאין לנו נקסט.
בואו רגע נראה את זה. נריץ שוב פעם ונגיד לו שאנחנו רוצים לגלוש לפוטבול. פוטבול נקודה html שימו לב שפה אני רואה שקיבלתי את ה... שהמידלווייר התבצעה אבל אנחנו לא מקבלים תשובה בחזרה.
אפילו הדפדפן ניסה עוד פעם לגלוש ולא מקבל תשובה בחזרה מהשר"ט. זאת אומרת, גם כאן אנחנו חייבים שיהיה לנו רספונס send back משהו, אחרת הדפדפן נתקע.
אז ראינו שיטה ראשונה להגדיר middleware שמתבצעת עבור כל request שהוא. מה קורה אם אנחנו רוצים middleware, בואו נעתיק את ה-middleware הזאת, כאן אנחנו רוצים אותה רק עבור request ספציפי, רק עבור דף ספציפי.
בואו נגיד שאנחנו רוצים to display current time. שוב פעם, בגלל שאנחנו middleware, אלה שלושת הפרמטרים הארגומנטים שאנחנו צריכים לקבל.
בואו ניקח כאן משתנה const d שווה new day ואנחנו רוצים to to console.log d.to-local-time-string. אין לנו צורך בזה. נקסט, אמרנו חובה, אחרת אנחנו פשוט ניתקע, והשאלה היא איך אנחנו באקספרס אומרים להריץ רק את הפונקציה הזאת, להריץ כלומר את הפונקציה הזאת, רק אם גולשים ל-route מסוים.
עושים את זה כאן. שימו לב שיש לנו route, בואו ניקח את הראוט השני וכמובן הנתיב שאנחנו גולשים אליו הכוונה ואם גולשים ל-/news-sports-basketball-html אנחנו רוצים להריץ את display-current-time בדיוק פה.
עכשיו אם אנחנו נריץ, שימו לב אנחנו ממתינים