ריאקט נייטיב נותנת לנו לעבוד עם fetch בשביל לגשת לשרת ולבקש מידע.
אם יש לכם ניסיון עם ES6 אז אתם בטח מכירים את היכולות של fetch ותוכלו להתחיל לעבוד בקלות מול השרת בריאקט נייטיב.
שליחת בקשת GET
שליחה של בקשת GET לממשק API היא המקרה הפשוט ביותר. פשוט מעבירים URL לתוך ה fecth ונקבל בחזרה Promise עם התשובה שלנו.אם אתם לא יודעים מה זה Promise תוכלו לקרוא כאן.
מבחינת אבטחה שימו לב שבשונה מווב בריאקט נייטיב אין לנו את הבעיה של Cors. דבר נוסף שחשוב לדעת הוא ש- iOS יחסום כברירת מחדל כל בקשה שאינה מוצפנת באמצעות SSL. אם אתה צריך לגשת ל API שמתחיל עם http תצטרך קודם כל להוסיף החרגת אבטחה.
הגיע הזמן לדוגמא:
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(data => console.log(data))
תוכלו להריץ את הקוד אפילו דרך הקונסול ולראות שתקבלו תשובה.
דבר שאנחנו צריכים לזכור זה לתפוס את השגיאות. בעזרת catch נוכל לתפוס את השגיאות שחוזרות בגלל בעיות ברשת.
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(data => console.log(data))
.catch((error) =>{
console.error(error);
});
למתקדמים שבינינו כמובן שנוכל גם להשתמש ב async/await שאותו קיבלנו בגרסת ES7
async function getTodosApi() {
try {
let response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
let responseJson = await response.json();
console.log(responseJson)
return responseJson;
} catch (error) {
console.error(error);
}
}
שליחת בקשת POST
בעת שליחה של בקשת POST, אנחנו צריכים לספק את כתובת הAPI כארגומנט הראשון ואובייקט המכיל את פרטי הבקשה כארגומנט השני. צריך לזכור לעטוף את אובייקט הjson בעזרת stringify
נוכל לראות את כל מה שתיארתי בקוד הבא(תוכלו לראות אותו בדוקיומנטציה של ריקאט נייטיב)
fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
}),
});
צורה נוספת שבאה לנו מובנית עם ריאקט נייטיב היא –XMLHttpRequest API
המשמעות של זה היא שאנחנו יכולים לעבוד עם ספריות צד שלישי שנשענות על צורת הפנייה הזו כמו axios למשל. או שאנחנו יכולים להשתמש ישירות ב XMLHttpRequest
