מדריך API של אחזור JavaScript עם דוגמאות JS Fetch Post ו- Header

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

כאשר AJAX הופיע לראשונה בשנת 1999, זה הראה לנו דרך טובה יותר לבנות יישומי אינטרנט. AJAX הייתה אבן דרך בפיתוח אתרים והיא תפיסת הליבה שמאחורי טכנולוגיות מודרניות רבות כמו React.

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

קורס קריסה על ממשקי API של REST

אנו נמצאים כעת בעידן של ממשקי API RESTful. במילים פשוטות, REST API מאפשר לך לדחוף ולמשוך נתונים ממאגר נתונים. זה יכול להיות מסד הנתונים שלך או שרת של צד שלישי כמו ה- API של Twitter.

ישנם כמה סוגים שונים של ממשקי API של REST. בואו נסתכל על אלו שתשתמשו בהם ברוב המקרים.

  • GET  - קבל נתונים מממשק ה- API. לדוגמא, קבל משתמש טוויטר על סמך שם המשתמש שלו.
  • POST  - דחוף נתונים ל- API. לדוגמה, צור רשומת משתמש חדשה עם שם, גיל וכתובת דוא"ל.
  • PUT  - עדכן רשומה קיימת עם נתונים חדשים. לדוגמה, עדכן את כתובת הדוא"ל של המשתמש.
  • מחק  - הסר רשומה. לדוגמה, מחק משתמש ממסד הנתונים.

ישנם שלושה אלמנטים בכל REST API. הבקשה, התגובה והכותרות.

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

תגובה  - כל נתונים שתקבל מהשרת לאחר בקשה מוצלחת / נכשלה.

כותרות  - מטא נתונים נוספים שהועברו ל- API כדי לעזור לשרת להבין באיזה סוג בקשה הוא עוסק, למשל "סוג תוכן".

היתרון האמיתי בשימוש ב- REST API הוא שאתה יכול לבנות שכבת API אחת למספר יישומים לעבודה.

אם יש לך מסד נתונים שברצונך לנהל באמצעות יישום אינטרנט, נייד ושולחן עבודה, כל מה שאתה צריך הוא שכבת REST API אחת.

עכשיו שאתה יודע איך REST APIs עובדים, בואו נסתכל איך נוכל לצרוך אותם.

XMLHttpRequest

לפני JSON השתלטה על העולם, הפורמט העיקרי של חילופי נתונים היה XML. XMLHttpRequest () היא פונקציית JavaScript שאפשרה להביא נתונים מממשקי API שהחזירו נתוני XML.

XMLHttpRequest נתן לנו אפשרות להביא נתוני XML מה- backend מבלי לטעון מחדש את כל הדף.

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

בואו נכתוב שיחת XMLHttpRequest פשוטה ל- API של GitHub כדי להביא את הפרופיל שלי.

// function to handle success function success() { var data = JSON.parse(this.responseText); //parse the string to JSON console.log(data); } // function to handle error function error(err) { console.log('Request Failed', err); //error details will be in the "err" object } var xhr = new XMLHttpRequest(); //invoke a new instance of the XMLHttpRequest xhr.onload = success; // call success function if request is successful xhr.onerror = error; // call error function if request failed xhr.open('GET', '//api.github.com/users/manishmshiva'); // open a GET request xhr.send(); // send the request to the server.

הקוד שלעיל ישלח בקשת GET אל //api.github.com/users/manishmshiva להביא את המידע שלי על GitHub ב- JSON. אם התגובה הצליחה, היא תדפיס את ה- JSON הבא למסוף:

אם הבקשה נכשלה, היא תדפיס הודעת שגיאה זו למסוף:

אחזור API

ה- Fetch API הוא גרסה פשוטה יותר וקלה לשימוש של XMLHttpRequest לצריכת משאבים באופן אסינכרוני. אחזור מאפשר לך לעבוד עם ממשקי API של REST עם אפשרויות נוספות כמו שמירת נתונים במטמון, קריאת תגובות סטרימינג ועוד.

ההבדל העיקרי הוא ש- Fetch עובד עם הבטחות, ולא להתקשרות חוזרת. מפתחי JavaScript התרחקו משיחות חוזרות לאחר הצגת ההבטחות.

ליישום מורכב, אתה עלול להתרגל בקלות לכתוב שיחות חוזרות המובילות לגיהנום של החזרה.

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

כך תיראה הפונקציה שכתבנו קודם אם השתמשת ב- fetch () במקום XMLHttpRequest:

// GET Request. fetch('//api.github.com/users/manishmshiva') // Handle success .then(response => response.json()) // convert to json .then(json => console.log(json)) //print data to console .catch(err => console.log('Request Failed', err)); // Catch errors

הפרמטר הראשון של פונקציית ה- Fetch צריך להיות תמיד כתובת ה- URL. אחזור לוקח אובייקט JSON שני עם אפשרויות כמו שיטה, כותרות, גוף בקשה וכן הלאה.

יש הבדל חשוב בין אובייקט התגובה ב- XMLHttpRequest ו- Fetch.

XMLHttpRequest מחזיר את הנתונים כתגובה בעוד אובייקט התגובה מ- Fetch מכיל מידע על אובייקט התגובה עצמו. זה כולל כותרות, קוד סטטוס וכו '. אנו קוראים לפונקציה "res.json ()" כדי לקבל את הנתונים הדרושים לנו מאובייקט התגובה.

הבדל חשוב נוסף הוא שממשק ה- Fetch לא ישליך על שגיאה אם ​​הבקשה תחזיר קוד סטטוס של 400 או 500. זה עדיין יסומן כתגובה מוצלחת ויועבר לפונקציה 'אז'.

אחזור מביא שגיאה רק אם הבקשה עצמה נקטעת. כדי לטפל ב -400 ו -500 תגובות, אתה יכול לכתוב לוגיקה מותאמת אישית באמצעות 'response.status'. מאפיין 'סטטוס' ייתן לך את קוד הסטטוס של התגובה שהוחזרה.

גדול. כעת, לאחר שהבנתם כיצד ה- Fetch API פועל, בואו נסתכל על כמה דוגמאות נוספות כמו העברת נתונים ועבודה עם כותרות.

עבודה עם כותרות

ניתן להעביר כותרות באמצעות המאפיין "כותרות". אתה יכול גם להשתמש בבונה הכותרות כדי לבנות טוב יותר את הקוד שלך. אך העברת אובייקט JSON למאפיין "headers" צריכה לעבוד ברוב המקרים.

fetch('//api.github.com/users/manishmshiva', { method: "GET", headers: {"Content-type": "application/json;charset=UTF-8"} }) .then(response => response.json()) .then(json => console.log(json)); .catch(err => console.log(err));

העברת נתונים לבקשת POST

לבקשת POST, תוכל להשתמש במאפיין "body" כדי להעביר מחרוזת JSON כקלט. שים לב שגוף הבקשה צריך להיות מחרוזת JSON בעוד הכותרות צריכות להיות אובייקט JSON.

// data to be sent to the POST request let _data = { title: "foo", body: "bar", userId:1 } fetch('//jsonplaceholder.typicode.com/posts', { method: "POST", body: JSON.stringify(_data), headers: {"Content-type": "application/json; charset=UTF-8"} }) .then(response => response.json()) .then(json => console.log(json)); .catch(err => console.log(err));

The Fetch API is still in active development. We can expect better features in the near future.

However, most browsers support the use of Fetch in your applications. The chart below should help you figure out which browsers support it on the web and mobile apps.

I hope this article helped you understand how to work with the Fetch API. Be sure to try out Fetch for your next web application.

I regularly write about Machine Learning, Cyber Security, and DevOps. You can signup for my weekly newsletter here.