דף זה תורגם על ידי Cloud Translation API.

Fetch API

ה-codelab הזה הוא חלק מקורס ההדרכה בנושא פיתוח Progressive Web Apps, שפותח על ידי צוות ההדרכה של Google Developers. כדי להפיק את המרב מהקורס הזה, מומלץ לעבוד על ה-codelabs לפי הסדר.

פרטים מלאים על הקורס זמינים במאמר סקירה כללית על פיתוח Progressive Web Apps.

מבוא

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

מה תלמדו

איך משתמשים ב-Fetch API כדי לבקש משאבים
איך שולחים בקשות GET,‏ HEAD ו-POST באמצעות fetch
איך קוראים ומגדירים כותרות בהתאמה אישית
השימוש ב-CORS והמגבלות שלו

מה חשוב לדעת

JavaScript ו-HTML בסיסיים
היכרות עם המושג והתחביר הבסיסי של Promises ב-ES2015

מה צריך

מחשב עם גישה לטרמינל או למעטפת
חיבור לאינטרנט
דפדפן שתומך ב-Fetch
כלי לעריכת טקסט
‫Node ו-npm

הערה: למרות ש-Fetch API לא נתמך כרגע בכל הדפדפנים, יש polyfill.

מורידים או משכפלים את מאגר pwa-training-labs מ-GitHub ומתקינים את גרסת ה-LTS של Node.js, אם צריך.

פותחים את שורת הפקודה במחשב. מנווטים לספרייה fetch-api-lab/app/ ומפעילים שרת פיתוח מקומי:

cd fetch-api-lab/app
npm install
node server.js

אפשר להפסיק את השרת בכל שלב באמצעות Ctrl-c.

פותחים את הדפדפן ועוברים אל localhost:8081/. יוצג דף עם לחצנים לשליחת בקשות (הם עדיין לא יפעלו).

הערה: צריך לבטל את הרישום של כל קובצי השירות (service worker) ולנקות את כל המטמונים של קובצי השירות ב-localhost כדי שלא יפריעו לשיעור ה-Lab. כדי לעשות את זה בכלי הפיתוח ל-Chrome, לוחצים על ניקוי נתוני האתר בקטע ניקוי האחסון שבכרטיסייה אפליקציה.

פותחים את התיקייה fetch-api-lab/app/ בכלי לעריכת טקסט. בתיקייה app/ תבנו את המעבדה.

התיקייה הזו מכילה:

‫echo-servers/ מכיל קבצים שמשמשים להפעלת שרתי בדיקה
‫examples/ מכיל משאבים לדוגמה שבהם אנחנו משתמשים בניסויים עם אחזור
‫js/main.js הוא קובץ ה-JavaScript הראשי של האפליקציה, ובו תכתבו את כל הקוד
‫index.html הוא דף ה-HTML הראשי של האתר או האפליקציה לדוגמה
‫package-lock.json ו-package.json הם קובצי הגדרה של שרת הפיתוח ושל התלות בשרת האקו
‫server.js הוא שרת פיתוח של צומת

ל-Fetch API יש ממשק פשוט יחסית. בקטע הזה מוסבר איך לכתוב בקשת HTTP בסיסית באמצעות fetch.

אחזור קובץ JSON

ב-js/main.js, הלחצן Fetch JSON של האפליקציה מצורף לפונקציה fetchJSON.

מעדכנים את הפונקציה fetchJSON כדי לבקש את הקובץ examples/animals.json ולתעד את התגובה:

function fetchJSON() {
  fetch('examples/animals.json')
    .then(logResult)
    .catch(logError);
}

שומרים את הסקריפט ומרעננים את הדף. לוחצים על Fetch JSON (אחזור JSON). התגובה לאחזור צריכה להופיע ביומן של המסוף.

הסבר

ה-method ‏fetch מקבלת את הנתיב למשאב שאנחנו רוצים לאחזר כפרמטר, במקרה הזה examples/animals.json. ‫fetch מחזירה הבטחה שמובילה לאובייקט Response. אם ההבטחה מתממשת, התשובה מועברת לפונקציה logResult. אם ה-Promise נדחה, הפונקציה catch משתלטת והשגיאה מועברת לפונקציה logError.

אובייקטים של תגובה מייצגים את התגובה לבקשה. הם מכילים את גוף התשובה וגם מאפיינים ושיטות שימושיים.

בדיקת תגובות לא תקינות

בודקים את התגובה שנרשמה ביומן במסוף. שימו לב לערכים של המאפיינים status, url ו-ok.

מחליפים את המשאב examples/animals.json ב-fetchJSON במשאב examples/non-existent.json. הפונקציה המעודכנת fetchJSON אמורה להיראות כך:

function fetchJSON() {
  fetch('examples/non-existent.json')
    .then(logResult)
    .catch(logError);
}

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

בודקים שהאחזור הושלם בהצלחה ולא הפעיל את החסימה catch. עכשיו מחפשים את המאפיינים status, URL ו-ok של התגובה החדשה.

הערכים צריכים להיות שונים בשני הקבצים (האם ברור לך למה?). אם קיבלתם שגיאות במסוף, האם הערכים תואמים להקשר של השגיאה?

הסבר

למה תגובה שנכשלה לא הפעילה את החסימה catch? הערה חשובה לגבי fetch ו-promises – תגובות לא טובות (כמו 404) עדיין נפתרות! הבטחת אחזור נדחית רק אם הבקשה לא הושלמה, ולכן תמיד צריך לבדוק את התוקף של התגובה. בקטע הבא נבדוק את התשובות.

אפשר לקבל מידע נוסף

אובייקטים של תגובות

בדיקת התוקף של התשובה

אנחנו צריכים לעדכן את הקוד שלנו כדי לבדוק את התוקף של התשובות.

ב-main.js, מוסיפים פונקציה לאימות התשובות:

function validateResponse(response) {
  if (!response.ok) {
    throw Error(response.statusText);
  }
  return response;
}

לאחר מכן מחליפים את fetchJSON בקוד הבא:

function fetchJSON() {
  fetch('examples/non-existent.json')
    .then(validateResponse)
    .then(logResult)
    .catch(logError);
}

שומרים את הסקריפט ומרעננים את הדף. לוחצים על Fetch JSON (אחזור JSON). בודקים את המסוף. עכשיו התשובה ל-examples/non-existent.json אמורה להפעיל את הבלוק catch.

מחליפים את examples/non-existent.json בפונקציה fetchJSON בערך המקורי examples/animals.json. הפונקציה המעודכנת אמורה להיראות כך:

function fetchJSON() {
  fetch('examples/animals.json')
    .then(validateResponse)
    .then(logResult)
    .catch(logError);
}

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

הסבר

עכשיו, אחרי שהוספנו את הבדיקה validateResponse, תגובות גרועות (כמו 404) יגרמו לשגיאה והבדיקה validateResponse תתבצע.catch כך אנחנו יכולים לטפל בתשובות שנכשלו ולמנוע מתשובות לא צפויות להתפשט בשרשרת האחזור.

קריאת התשובה

תגובות של בקשות Fetch מיוצגות כ-ReadableStreams (מפרט של streams) וצריך לקרוא אותן כדי לגשת לגוף התגובה. לאובייקטים של התגובה יש שיטות לעשות זאת.

ב-main.js, מוסיפים פונקציה readResponseAsJSON עם הקוד הבא:

function readResponseAsJSON(response) {
  return response.json();
}

לאחר מכן, מחליפים את הפונקציה fetchJSON בקוד הבא:

function fetchJSON() {
  fetch('examples/animals.json') // 1
  .then(validateResponse) // 2
  .then(readResponseAsJSON) // 3
  .then(logResult) // 4
  .catch(logError);
}

שומרים את הסקריפט ומרעננים את הדף. לוחצים על Fetch JSON (אחזור JSON). בודקים במסוף שה-JSON מ-examples/animals.json נרשם ביומן (במקום אובייקט התגובה).

הסבר

בואו נבדוק מה קורה.

שלב 1. הפונקציה fetch מופעלת על משאב, examples/animals.json. הפונקציה Fetch מחזירה הבטחה שמובילה לאובייקט Response. כשההבטחה מתממשת, אובייקט התגובה מועבר אל validateResponse.

שלב 2. ‫validateResponse בודקת אם התגובה תקפה (האם היא 200?). אם לא, מוצגת שגיאה, שגורמת לדילוג על שאר הבלוקים של then ולהפעלת הבלוק catch. הדבר חשוב במיוחד. בלי הבדיקה הזו, תשובות לא תקינות מועברות בהמשך השרשרת ועלולות לשבור קוד מאוחר יותר שעשוי להסתמך על קבלת תשובה תקינה. אם התשובה תקינה, היא מועברת אל readResponseAsJSON.

שלב 3. ‫readResponseAsJSON קורא את גוף התגובה באמצעות השיטה Response.json(). השיטה הזו מחזירה הבטחה שמובילה ל-JSON. אחרי שההבטחה הזו מתקיימת, נתוני ה-JSON מועברים אל logResult. (אם ההבטחה מ-response.json() נדחית, מופעל הבלוק catch).

שלב 4. לבסוף, נתוני ה-JSON מהבקשה המקורית אל examples/animals.json נרשמים ביומן על ידי logResult.

אפשר לקבל מידע נוסף

הפונקציה Fetch לא מוגבלת ל-JSON. בדוגמה הזו, נאחזר תמונה ונוסיף אותה לדף.

ב-main.js, כותבים פונקציית showImage עם הקוד הבא:

function showImage(responseAsBlob) {
  const container = document.getElementById('img-container');
  const imgElem = document.createElement('img');
  container.appendChild(imgElem);
  const imgUrl = URL.createObjectURL(responseAsBlob);
  imgElem.src = imgUrl;
}

לאחר מכן מוסיפים פונקציה readResponseAsBlob שקוראת את התשובות כ-Blob:

function readResponseAsBlob(response) {
  return response.blob();
}

מעדכנים את הפונקציה fetchImage באמצעות הקוד הבא:

function fetchImage() {
  fetch('examples/fetching.jpg')
    .then(validateResponse)
    .then(readResponseAsBlob)
    .then(showImage)
    .catch(logError);
}

שומרים את הסקריפט ומרעננים את הדף. לוחצים על שליפת תמונה. בדף אמור להופיע כלב חמוד שמביא מקל (זו בדיחה על משחק הבאת המקל!).

הסבר

בדוגמה הזו, מתבצעת אחזור של תמונה, examples/fetching.jpg. בדומה לתרגיל הקודם, התגובה מאומתת באמצעות validateResponse. התגובה נקראת כ-Blob (במקום JSON כמו בקטע הקודם). נוצר אלמנט תמונה שמצורף לדף, ומאפיין src של התמונה מוגדר לכתובת URL של נתונים שמייצגת את ה-Blob.

הערה: נעשה שימוש ב שיטה createObjectURL() של אובייקט כתובת ה-URL כדי ליצור כתובת URL של נתונים שמייצגת את ה-Blob. חשוב לזכור את זה. אי אפשר להגדיר את המקור של תמונה ישירות ל-Blob. צריך להמיר את ה-Blob לכתובת URL של נתונים.

אפשר לקבל מידע נוסף

החלק הזה הוא אתגר אופציונלי.

מעדכנים את הפונקציה fetchText ל

אחזור /examples/words.txt
אימות התשובה באמצעות validateResponse
לקרוא את התשובה כטקסט (רמז: אפשר לעיין ב-Response.text())
ולהציג את הטקסט בדף

אפשר להשתמש בפונקציה showText כדי להציג את הטקסט הסופי:

function showText(responseAsText) {
  const message = document.getElementById('message');
  message.textContent = responseAsText;
}

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

הערה: אולי תרצו לאחזר HTML ולהוסיף אותו באמצעות המאפיין innerHTML, אבל כדאי להיזהר. הדבר עלול לחשוף את האתר שלכם למתקפות XSS‏ (cross-site scripting).

אפשר לקבל מידע נוסף

Response.text()

כברירת מחדל, הפונקציה fetch משתמשת בשיטת GET, שמאחזרת משאב ספציפי. אבל הפונקציה fetch יכולה להשתמש גם בשיטות אחרות של HTTP.

שליחת בקשת HEAD

מחליפים את הפונקציה headRequest בקוד הבא:

function headRequest() {
  fetch('examples/words.txt', {
    method: 'HEAD'
  })
  .then(validateResponse)
  .then(readResponseAsText)
  .then(logResult)
  .catch(logError);
}

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

הסבר

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

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

אופציונלי: איך בודקים את הגודל של משאב

כדי לקבוע את גודל הקובץ, נבדוק את הכותרות של תגובת האחזור של examples/words.txt.

מעדכנים את הפונקציה headRequest כדי לרשום ביומן את המאפיין content-length של התגובה headers (טיפ: אפשר לעיין במסמכי התיעוד של headers ובשיטה get).

אחרי שמעדכנים את הקוד, שומרים את הקובץ ומרעננים את הדף. לוחצים על בקשת HEAD. הגודל (בבייטים) של examples/words.txt צריך להופיע ביומן של המסוף.

הסבר

בדוגמה הזו, נעשה שימוש בשיטת HEAD כדי לבקש את הגודל (בבייטים) של משאב (שמיוצג בכותרת content-length) בלי לטעון בפועל את המשאב עצמו. בפועל, אפשר להשתמש בזה כדי לקבוע אם צריך לבקש את המשאב המלא (או אפילו איך לבקש אותו).

אופציונלי: אפשר לגלות את הגודל של examples/words.txt בשיטה אחרת ולוודא שהוא תואם לערך בכותרת התגובה (אפשר לחפש איך לעשות את זה במערכת ההפעלה הספציפית שלכם – בונוס אם משתמשים בשורת הפקודה!).

אפשר לקבל מידע נוסף

הפונקציה Fetch יכולה גם לשלוח נתונים באמצעות בקשות POST.

הגדרת שרת הד

כדי להריץ את הדוגמה הזו, צריך להריץ שרת הד. מהספרייה fetch-api-lab/app/ מריצים את הפקודה הבאה (אם שורת הפקודה חסומה על ידי השרת localhost:8081, פותחים חלון או כרטיסייה חדשים של שורת הפקודה):

node echo-servers/cors-server.js

הפקודה הזו מפעילה שרת פשוט בכתובת localhost:5000/ שמחזיר את הבקשות שנשלחות אליו.

אפשר להפסיק את השרת הזה מתי שרוצים באמצעות ctrl+c.

שליחת בקשת POST

מחליפים את הפונקציה postRequest בקוד הבא (אם לא השלמתם את קטע 4, הקפידו להגדיר את הפונקציה showText):

function postRequest() {
  fetch('http://localhost:5000/', {
    method: 'POST',
    body: 'name=david&message=hello'
  })
    .then(validateResponse)
    .then(readResponseAsText)
    .then(showText)
    .catch(logError);
}

שומרים את הסקריפט ומרעננים את הדף. לוחצים על POST request (פרסום בקשה). הבקשה שנשלחה משתקפת בדף. הוא צריך לכלול את השם וההודעה (שימו לב שעדיין לא מתקבלים נתונים מהטופס).

הסבר

כדי לשלוח בקשת POST באמצעות fetch, משתמשים בפרמטר init כדי לציין את השיטה (בדומה לאופן שבו הגדרנו את שיטת HEAD בקטע הקודם). כאן גם מגדירים את גוף הבקשה, שבמקרה הזה הוא מחרוזת פשוטה. הגוף הוא הנתונים שאנחנו רוצים לשלוח.

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

כשנתונים נשלחים כבקשת POST אל localhost:5000/, הבקשה מוחזרת כתשובה. לאחר מכן התשובה מאומתת באמצעות validateResponse, נקראת כטקסט ומוצגת בדף.

בפועל, השרת הזה מייצג API של צד שלישי.

אופציונלי: שימוש בממשק FormData

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

בפונקציה postRequest, יוצרים מופע חדש של אובייקט FormData מרכיב הטופס msg-form:

const formData = new FormData(document.getElementById('msg-form'));

לאחר מכן מחליפים את הערך של הפרמטר body במשתנה formData.

שומרים את הסקריפט ומרעננים את הדף. ממלאים את הטופס (השדות שם והודעה) בדף ולוחצים על בקשת POST. בודקים את תוכן הטופס שמוצג בדף.

הסבר

ה-constructor‏ FormData יכול לקבל form HTML וליצור אובייקט FormData. האובייקט הזה מאוכלס במפתחות ובערכים של הטופס.

אפשר לקבל מידע נוסף

הפעלת שרת הד שאינו CORS

עוצרים את שרת האקו הקודם (על ידי הקשה על ctrl+c משורת הפקודה) ומפעילים שרת אקו חדש מהספרייה fetch-lab-api/app/ באמצעות הפקודה הבאה:

node echo-servers/no-cors-server.js

הפקודה הזו מגדירה עוד שרת הד פשוט, הפעם בכתובת localhost:5001/. עם זאת, השרת הזה לא מוגדר לקבלת בקשות חוצות מקורות.

אחזור מהשרת החדש

עכשיו שהשרת החדש פועל בכתובת localhost:5001/, אפשר לשלוח אליו בקשת אחזור.

מעדכנים את הפונקציה postRequest כדי לאחזר נתונים מ-localhost:5001/ במקום מ-localhost:5000/. אחרי שמעדכנים את הקוד, שומרים את הקובץ, מרעננים את הדף ולוחצים על POST Request (שליחת בקשת POST).

צריכה להופיע שגיאה במסוף שמציינת שהבקשה חוצת המקורות נחסמה כי חסרה כותרת ה-CORS‏ Access-Control-Allow-Origin.

מעדכנים את fetch בפונקציה postRequest באמצעות הקוד הבא, שמשתמש במצב no-cors (כפי שמוצע ביומן השגיאות), ומסיר את הקריאות לפונקציות validateResponse ו-readResponseAsText (הסבר מופיע בהמשך):

function postRequest() {
  const formData = new FormData(document.getElementById('msg-form'));
  fetch('http://localhost:5001/', {
    method: 'POST',
    body: formData,
    mode: 'no-cors'
  })
    .then(logResult)
    .catch(logError);
}

שומרים את הסקריפט ומרעננים את הדף. לאחר מכן ממלאים את טופס ההודעה ולוחצים על POST Request (שליחת בקשת POST).

בודקים את אובייקט התגובה שמתועד במסוף.

הסבר

הפונקציות Fetch ו-XMLHttpRequest פועלות בהתאם למדיניות המקור הזהה. כלומר, הדפדפנים מגבילים בקשות HTTP ממקורות שונים מתוך סקריפטים. בקשת CORS מתרחשת כשדומיין אחד (לדוגמה, http://foo.com/) מבקש משאב מדומיין נפרד (לדוגמה, http://bar.com/).

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

מכיוון שלשרת של האפליקציה שלנו יש מספר יציאה שונה משני שרתי ההד, בקשות לאחד משני שרתי ההד נחשבות כבקשות חוצות מקורות. עם זאת, שרת האקו הראשון שפועל ב-localhost:5000/ מוגדר לתמיכה ב-CORS (אפשר לפתוח את echo-servers/cors-server.js ולבדוק את ההגדרה). שרת האקו החדש, שפועל ב-localhost:5001/, לא (ולכן מתקבלת שגיאה).

השימוש ב-mode: no-cors מאפשר אחזור של תגובה אטומה. השיטה הזו מאפשרת לנו לקבל תגובה, אבל מונעת גישה לתגובה באמצעות JavaScript (ולכן אי אפשר להשתמש ב-validateResponse, ב-readResponseAsText או ב-showResponse). עדיין אפשר להשתמש בתגובה באמצעות ממשקי API אחרים או לשמור אותה במטמון באמצעות קובץ שירות (service worker).

שינוי הכותרות של הבקשות

בנוסף, הפונקציה Fetch תומכת בשינוי של כותרות בקשות. עוצרים את שרת האקו localhost:5001 (ללא CORS) ומפעילים מחדש את שרת האקו localhost:5000 (עם CORS) מהקטע 6:

node echo-servers/cors-server.js

שחזור הגרסה הקודמת של הפונקציה postRequest שמביאה נתונים מ-localhost:5000/:

function postRequest() {
  const formData = new FormData(document.getElementById('msg-form'));
  fetch('http://localhost:5000/', {
    method: 'POST',
    body: formData
  })
    .then(validateResponse)
    .then(readResponseAsText)
    .then(showText)
    .catch(logError);
}

עכשיו משתמשים בממשק הכותרות כדי ליצור אובייקט כותרות בתוך הפונקציה postRequest שנקראת messageHeaders, עם הכותרת Content-Type ששווה ל-application/json.

לאחר מכן מגדירים את המאפיין headers של האובייקט init להיות המשתנה messageHeaders.

מעדכנים את המאפיין body לאובייקט JSON שעבר המרה למחרוזת, למשל:

JSON.stringify({ lab: 'fetch', status: 'fun' })

אחרי שמעדכנים את הקוד, שומרים את הקובץ ומרעננים את הדף. לאחר מכן לוחצים על POST Request (שליחת בקשת POST).

שימו לב שבבקשה שהוחזרה יש עכשיו Content-Type עם הערך application/json (במקום multipart/form-data שהיה קודם).

עכשיו מוסיפים כותרת Content-Length בהתאמה אישית לאובייקט messageHeaders ונותנים לבקשה גודל שרירותי.

אחרי שמעדכנים את הקוד, שומרים את הקובץ, מרעננים את הדף ולוחצים על POST Request (שליחת בקשת POST). שימו לב שהכותרת הזו לא משתנה בבקשה שמוחזרת.

הסבר

ממשק הכותרות מאפשר ליצור ולשנות אובייקטים של כותרות. אפשר לשנות חלק מהכותרות, כמו Content-Type, באמצעות אחזור. אחרים, כמו Content-Length, מוגנים ואי אפשר לשנות אותם (מטעמי אבטחה).

הגדרת כותרות בקשה בהתאמה אישית

‫Fetch תומך בהגדרת כותרות בהתאמה אישית.

מסירים את הכותרת Content-Length מהאובייקט messageHeaders בפונקציה postRequest. מוסיפים את הכותרת המותאמת אישית X-Custom עם ערך שרירותי (לדוגמה, X-CUSTOM': 'hello world').

שומרים את הסקריפט, מרעננים את הדף ולוחצים על POST Request (בקשת POST).

אפשר לראות שבבקשה שהוחזרה יש את המאפיין X-Custom שהוספתם.

עכשיו מוסיפים Y-Custom כותרת לאובייקט Headers. שומרים את הסקריפט, מרעננים את הדף ולוחצים על POST Request (בקשת POST).

במסוף אמורה להופיע שגיאה דומה לזו:

Fetch API cannot load http://localhost:5000/. Request header field y-custom is not allowed by Access-Control-Allow-Headers in preflight response.

הסבר

בדומה לבקשות ממקורות שונים, השרת שממנו מתבקש המשאב צריך לתמוך בכותרות מותאמות אישית. בדוגמה הזו, שרת האקו שלנו מוגדר לקבל את הכותרת X-Custom אבל לא את הכותרת Y-Custom (אפשר לפתוח את echo-servers/cors-server.js ולחפש את Access-Control-Allow-Headers כדי לראות בעצמכם). בכל פעם שמוגדרת כותרת בהתאמה אישית, הדפדפן מבצע בדיקת קדם-הפעלה. כלומר, הדפדפן שולח קודם בקשת OPTIONS לשרת, כדי לקבוע אילו methods וכותרות HTTP מותרות על ידי השרת. אם השרת מוגדר לקבל את ה-method והכותרות של הבקשה המקורית, הבקשה נשלחת. אחרת, מוצגת שגיאה.

אפשר לקבל מידע נוסף

קוד הפתרון

כדי לקבל עותק של הקוד הפעיל, עוברים לתיקייה solution.

עכשיו אתם יודעים איך להשתמש ב-Fetch API.

משאבים

כדי לראות את כל ה-codelabs בקורס ההדרכה בנושא PWA, אפשר לעיין ב-codelab המבוא לקורס.

Fetch API קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

מבוא

מה תלמדו

מה חשוב לדעת

מה צריך

אחזור קובץ JSON

הסבר

בדיקת תגובות לא תקינות

הסבר

אפשר לקבל מידע נוסף

בדיקת התוקף של התשובה

הסבר

קריאת התשובה

הסבר

אפשר לקבל מידע נוסף

הסבר

אפשר לקבל מידע נוסף

אפשר לקבל מידע נוסף

שליחת בקשת HEAD

הסבר

אופציונלי: איך בודקים את הגודל של משאב

הסבר

אפשר לקבל מידע נוסף

הגדרת שרת הד

שליחת בקשת POST

הסבר

אופציונלי: שימוש בממשק FormData

הסבר

אפשר לקבל מידע נוסף

הפעלת שרת הד שאינו CORS

אחזור מהשרת החדש

הסבר

שינוי הכותרות של הבקשות

הסבר

הגדרת כותרות בקשה בהתאמה אישית

הסבר

אפשר לקבל מידע נוסף

קוד הפתרון

משאבים

Fetch API