באמצעות fetch()
אפשר ליצור בקשות רשת הדומות ל-XMLHttpRequest (XHR).
ההבדל העיקרי הוא ש-Fetch API משתמש ב-Promises,
ממשק API פשוט יותר שיעזור לכם להימנע מהקריאות החוזרות המורכבות
API ל-XMLHttpRequest.
אם לא השתמשתם בעבר הבטחות מומלץ לקרוא קודם את המאמר מבוא להבטחות של JavaScript.
בקשת אחזור בסיסית
הנה דוגמה שהוטמעה באמצעות XMLHttpRequest
ולאחר מכן עם fetch
. אנחנו רוצים לבקש כתובת אתר, לקבל תשובה ולנתח
כקובץ JSON.
XMLHttpRequest
ל-XMLHttpRequest
נדרשים שני מאזינים כדי להתמודד עם ההצלחה
ומקרים של שגיאות, וקריאה ל-open()
ול-send()
.
דוגמה ממסמכי MDN.
function reqListener() {
var data = JSON.parse(this.responseText);
console.log(data);
}
function reqError(err) {
console.log('Fetch Error :-S', err);
}
var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();
הבא
בקשת האחזור שלנו נראית כך:
fetch('./api/some.json')
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
// Examine the text in the response
response.json().then(function(data) {
console.log(data);
});
}
)
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
לבקשת fetch()
נדרשת רק קריאה אחת כדי לבצע את אותן פעולות כמו ה-XHR
לדוגמה. כדי לעבד את התשובה, קודם אנחנו בודקים שסטטוס התגובה
200, ואז מנתחים את התשובה בתור JSON. התגובה לבקשת fetch()
היא
אובייקט Stream שפירושו שאחרי
שאנחנו קוראים לשיטה json()
, מוחזרת הבטחה.
השידור מתרחש באופן אסינכרוני.
מטא-נתונים של התשובה
בדוגמה הקודמת הוצג הסטטוס של אובייקט Response, ואיך לנתח את התשובה בפורמט JSON. כך תטפלו במטא-נתונים שאולי תרצו לגשת אליהם, כמו כותרות:
fetch('users.json').then(function(response) {
console.log(response.headers.get('Content-Type'));
console.log(response.headers.get('Date'));
console.log(response.status);
console.log(response.statusText);
console.log(response.type);
console.log(response.url);
});
סוגי תגובה
כשאנחנו שולחים בקשת אחזור, התגובה תקבל response.type
מתוך "basic
",
cors
או
"opaque
".
הם types
מראים מאיפה הגיע המשאב, ואפשר להשתמש בהם כדי
לקבוע איך לטפל באובייקט התגובה.
כשהדפדפן מבקש משאב מאותו מקור, התשובה כוללת
מקלידים basic
עם הגבלות על מה שרואים בתשובה.
אם נשלחה בקשה למשאב ממקור אחר, והמקור הזה מחזיר
כותרות COR, הסוג הוא cors
. cors
התשובות דומות ל-basic
תשובות, אבל הן מגבילות את הכותרות
יכול להציג את Cache-Control
, Content-Language
, Content-Type
, Expires
,
Last-Modified
ו-Pragma
.
התשובות של opaque
מגיעות ממקור אחר שלא מחזיר CORS
כותרות עליונות. עם תגובה אטומה לא נוכל
לקרוא את הנתונים שהוחזרו או להציג את סטטוס הבקשה, כלומר אי אפשר לבדוק
ולבדוק אם הבקשה בוצעה בהצלחה.
אפשר להגדיר מצב לבקשת אחזור כך שרק סוגים מסוימים של בקשות לפתור את הבעיה. המצבים שניתן להגדיר הם:
- הקוד
same-origin
מצליח רק בבקשות לנכסים מאותו המקור, וגם דוחה את כל הבקשות האחרות. - האפליקציה
cors
מאפשרת בקשות לנכסים מאותו המקור ובמקורות אחרים להחזיר את כותרות ה-COR המתאימות. cors-with-forced-preflight
מבצעת קדם-הפעלה סימן וי לפני הגשת בקשה כלשהי.- המטרה של
no-cors
היא לשלוח בקשות למקורות אחרים שאין להם CORS והתוצאה היא תשובהopaque
, אבל כפי שצוין , זו לא התשובה אפשרית בהיקף הגלובלי כרגע.
כדי להגדיר את המצב, מוסיפים אובייקט אפשרויות כפרמטר השני ב
של הבקשה fetch
ומגדירים את המצב באובייקט הזה:
fetch('http://some-site.com/cors-enabled/some.json', {mode: 'cors'})
.then(function(response) {
return response.text();
})
.then(function(text) {
console.log('Request successful', text);
})
.catch(function(error) {
log('Request failed', error)
});
שרשרת להבטיח
אחת התכונות הנהדרות של הבטחות היא היכולת לשרשר אותן יחד. עבור
fetch()
, כך אפשר לשתף לוגיקה בין בקשות אחזור.
אם אתם עובדים עם API בפורמט JSON, צריך לבדוק את הסטטוס ולנתח את JSON לכל תגובה. כדי לפשט את הקוד, אפשר להגדיר את הסטטוס ניתוח JSON בפונקציות נפרדות שמחזירות הבטחות, ומשתמשים באחזור בקשה לטפל רק בנתונים הסופיים ובמקרה השגיאה.
function status(response) {
if (response.status >= 200 && response.status < 300) {
return Promise.resolve(response)
} else {
return Promise.reject(new Error(response.statusText))
}
}
function json(response) {
return response.json()
}
fetch('users.json')
.then(status)
.then(json)
.then(function(data) {
console.log('Request succeeded with JSON response', data);
}).catch(function(error) {
console.log('Request failed', error);
});
בדוגמה הזו מוגדרת פונקציית status
שבודקת את response.status
מחזירה 'Promise' שמפוענח כ-
Promise.resolve()
,
או הבטחה שנדחתה,
Promise.reject()
.
זו השיטה הראשונה שנקראת בשרשרת fetch()
.
אם ה-Promise פותר את הבעיה, הסקריפט קורא לשיטה json()
,
מחזירה הבטחה שנייה מהקריאה response.json()
ויוצרת
שמכיל את קובץ ה-JSON שנותח. אם הניתוח נכשל, ההבטחה
נדחה והצהרת ה-catch תפעל.
המבנה הזה מאפשר לשתף את הלוגיקה בכל בקשות האחזור, קל יותר לתחזק, לקרוא ולבדוק את הקוד.
בקשת POST
לפעמים אפליקציית אינטרנט צריכה לקרוא ל-API באמצעות שיטת POST ולכלול
פרמטרים בגוף הבקשה. כדי לעשות את זה, צריך להגדיר את method
ואת body
פרמטרים באפשרויות של fetch()
:
fetch(url, {
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: 'foo=bar&lorem=ipsum'
})
.then(json)
.then(function (data) {
console.log('Request succeeded with JSON response', data);
})
.catch(function (error) {
console.log('Request failed', error);
});
שליחת פרטי כניסה באמצעות בקשת אחזור
כדי לשלוח בקשת אחזור עם פרטי כניסה כמו קובצי cookie, צריך להגדיר את פרטי הבקשה
הערך של credentials
ל-"include"
:
fetch(url, {
credentials: 'include'
})