שליחת מידע לשרת בריאקט - React Forms

בלי כתוביותעם כתוביות

מילון מושגים:

React - ספריית JavaScript לבניית ממשקי משתמש מבוססי רכיבים, שפותחה על ידי פייסבוק.

POST - שיטת HTTP לשליחת נתונים לשרת כדי ליצור או לעדכן משאב, למשל שליחת טופס.

צד שרת - החלק של היישום שרץ בשרת ואחראי על הלוגיקה, מסדי הנתונים והעיבוד שמאחורי הקלעים.

REST - סגנון לבניית ממשקי API מעל HTTP, המבוסס על משאבים ועל שיטות סטנדרטיות כמו GET ו-POST.

GET - שיטת HTTP לבקשת מידע מהשרת בלי לשנות אותו. הפרמטרים מועברים בדרך כלל בכתובת.

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

URL - הכתובת שמזהה משאב באינטרנט, למשל דף אתר, וכוללת פרוטוקול, שם מארח ונתיב.

PUT - שיטת HTTP לשליחת נתונים לשרת כדי ליצור או להחליף משאב קיים במלואו.

שליחת מידע לשרת בריאקט - React Forms

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

השלבים

1. ה-API: ה-Backend הוא REST API, ואותה כתובת משמשת לקבלת מוצרים, הוספה, עדכון ומחיקה. להוספה משתמשים ב-POST ולא ב-GET.

2. פונקציה אסינכרונית: מסמנים את פונקציית ה-submit כ-async, עוטפים ב-try/catch, ומשתמשים ב-await מול axios. בשגיאה מציגים alert של ההודעה.

3. שליחה עם axios: axios.post<ProductModel>(url, product). הסוג הגנרי הוא מה שהשרת מחזיר, ולפי מוסכמת REST הוא מחזיר את אותו סוג, כלומר המוצר עם ה-id שנוצר. הכתובת מגיעה מקובץ ה-config.

4. אחרי השליחה: מציגים alert שהמוצר נוסף עם ה-id החדש מתוך response.data.id, ואז מנווטים ברשימת המוצרים עם history.push.

5. בדיקה: נוסף מוצר בננה, והשרת החזיר id חדש. המוצר הופיע בסוף הרשימה עם השם, המחיר והמלאי, אבל התמונה הציגה Not Found.

שימו לב

- הבקשות ב-REST: get לקבלה, post להוספה, put לעדכון מלא, patch לעדכון חלקי ו-delete למחיקה.

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

אחרי ההרצאה אפשר לשלוח מוצר לשרת עם POST, ואתם יודעים למה התמונה עדיין חסרה.

השיעור הבא בקורס: שליחת תמונה לשרת בריאקט - React Forms

פרקי ההרצאה: שליחת מידע לשרת בריאקט - React Forms

תמלול ההרצאה: שליחת מידע לשרת בריאקט - React Forms

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

00:02
אז אם הצלחנו לקבל את אובייקט המוצר, כל מה שנשאר לנו לעשות זה לשלוח אותו לשרת. אם אנחנו מסתכלים על ה-Backend הזה שיש לנו כאן, אז אנחנו רואים שיש פה את הכתובת הזאת שחושפת את המוצרים.
00:19
זה בעצם REST API שאותה כתובת משמשת גם לקבלת המוצרים, גם להוספה של מוצר, גם לעדכון של מוצר וגם למחיקה של מוצר.
00:30
אז אותה כתובת בדיוק מאפשרת גם לשלוח מוצר. לשלוח מוצר כמובן זה לא יהיה ב-HTTP-Yet-Request זה יהיה ב-HTTP-Post-Request ואת זה אנחנו עושים על ידי אקשס.
00:44
עם אקשס כבר למדנו להשתמש. אז בואו פשוט נשלח את המוצר עם אקשס לשרת. אני אפטר רגע מה-Consol-Log הזה. אקשס עובדת עם פרומיס אז אנחנו יכולים להריץ את זה עם אסינק ה-wait ו-dry-catch.
01:00
יש לנו פה את השגיאה ואנחנו יכולים to alert, בוא נניח נעשה alert של err message יכול להיות לנו או שזה response message אני כבר לא זוכר איך אקשס עובדת ואנחנו רוצים לבוא לפה ולהגיד כזה דבר cost response await בגלל שאנחנו עובדים עם ה-wait פה אנחנו צריכים ה-sync
01:27
יכולים להגביר את הפונקציות כ-sync ואז היא כבר לא פה תחזיר לנו void, תחזיר לנו רומיס של void ואנחנו רוצים לקרוא ל-access.post כמו שיש לנו get יש לנו פוסט בשביל הוספה יש לנו put בשביל עדכון מידע מלא יש לנו patch בשביל עדכון מידע חלקי ויש לנו delete בשביל מחיקה של מידע אנחנו רוצים פוסט אנחנו אומרים ל-access מה סוג הנתונים שהשרת
02:00
מחזיר לנו בחזרה אחרי שהוא ביצע פוסט. לפי המוסכמה של REST API כאשר אתם עושים פוסט בוא נניח של מוצר או פריט או לא משנה מה אז הוא אמור להחזיר לכם את אותו הסוג אז אנחנו רוצים שהוא יחזיר לנו פרודקט מודל זה לא שאנחנו רוצים זה זה מה שהוא עושה.
02:20
אז אנחנו אומרים ל-access שטיפוס הנתונים שהשרת מחזיר לנו אחרי זה הפוסט זה פרודקט מודל רק אם כמובן השרת עושה את זה ואני במקרה מכיר את השרת הזה וזה מה שהוא עושה כאן הוא שואל אותנו לאיזה כתובת לשלוח אז היה לנו כמובן את הconfig והconfig יש לו את הurl ואחד מהם זה המוצרים אז הנה הurl פוסט גם אומרת לנו