Fetch ו-APIs: חיבור React ל-Backend

תכנות, אלגוריתמיקה ו-Web · 5–6 שעות

⌨ כתיבת קוד (2)תרגילים ומשימות קוד לשיעור 18

// סקירה

שיעור 18 — Fetch ו-APIs: חיבור React ל-Backend

בשיעור 17 בנינו Todo App שחי בזיכרון הדפדפן. כשרוענן — הכל נמחק. APIs הם הגשר לנתונים אמיתיים שחיים בשרת וזמינים מכל מכשיר.

✓נושאי השיעור

REST API — מה זה, HTTP Methods, Status Codes
Fetch API — הדרך המובנית, POST/PUT/DELETE, if(!res.ok)
useEffect + fetch — cancelled flag, Race Condition
Axios — למה עדיף בפרויקטים גדולים, Interceptors, Instance
Loading/Error States — תמיד שלושה: data + loading + error
Optimistic Updates — עדכן UI מיד, Rollback אם נכשל
useFetch Custom Hook — לא לשכפל קוד, refetch
Todo App + API — אינטגרציה שלמה עם jsonplaceholder

// פרק 1

REST API — יסודות

REST = הסכם לתקשורת Client-Server. Client שולח HTTP request, Server מחזיר JSON.

HTTP Methods ב-API

Method	שימוש	URL דוגמה	Body?
GET	קרא נתונים	GET /api/todos	לא
POST	צור משאב חדש	POST /api/todos	✅ הנתונים החדשים
PUT	עדכן מלא	PUT /api/todos/5	✅ כל השדות
PATCH	עדכן שדה ספציפי	PATCH /api/todos/5	✅ רק מה שמשתנה
DELETE	מחק	DELETE /api/todos/5	לא

Status Codes

קוד	קטגוריה	מתי?
200 OK	✅ הצלחה	GET/PUT הצליח
201 Created	✅ הצלחה	POST הצליח — משאב נוצר
400 Bad Request	❌ שגיאת Client	הבקשה לא תקינה, בדוק מה שלחת
401 Unauthorized	❌ שגיאת Client	לא מחובר — צריך Token
403 Forbidden	❌ שגיאת Client	מחובר אבל אין הרשאה
404 Not Found	❌ שגיאת Client	המשאב לא קיים — בדוק URL
500 Server Error	💥 שגיאת Server	באג בקוד Server

⚠️ 4xx vs 5xx — מי אשם?

4xx = הלקוח אשם — URL שגוי, חסר Token, פרמטר חסר. בדוק מה שלחת.
5xx = השרת אשם — באג בקוד Server. אם קיבלת 500 בזמן פיתוח — בדוק את הbody שלך (אולי JSON לא תקין).

✏תרגול — REST API3 שאלות

שאלה 1

יצרת Todo חדש בהצלחה. מה Status Code מתאים?

✓ תשובה: ד) 201 Created — POST שיצר משאב → 201. GET/PUT שהצליח → 200. DELETE שהצליח → 200 או 204.

שאלה 2

קיבלת שגיאת 404. מה עושים?

✓ תשובה: ג) — 404 = Not Found = 4xx = שגיאת Client. URL שגוי, המשאב נמחק, או ID לא קיים.

שאלה 3

רוצים לעדכן רק שדה done=true של Todo. Method הנכון?

✓ תשובה: ג) PATCH — PATCH = עדכון חלקי (רק שדות שמשתנים). PUT = עדכון מלא (כל השדות חובה). כאן שולחים רק { done: true }.

// פרק 2

Fetch API — Pattern מלא

fetch() לא זורק שגיאה על 404/500! חובה לבדוק if (!res.ok). תמיד.

GET, POST, PATCH, DELETE

// GET — הפשוט ביותר:
const res = await fetch('/api/todos');
if (!res.ok) throw new Error(`HTTP שגיאה: ${res.status}`); // חובה!
const todos = await res.json();

// POST — יצירה:
const res = await fetch('/api/todos', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' }, // חובה!
  body: JSON.stringify({ text: 'לקנות חלב', done: false }),
});
const newTodo = await res.json();

// PATCH — עדכון שדה:
await fetch(`/api/todos/${id}`, {
  method: 'PATCH',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ done: true }),
});

// DELETE — מחיקה (אין body):
await fetch(`/api/todos/${id}`, { method: 'DELETE' });

useEffect + Fetch — Pattern המלא

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let cancelled = false; // ← Race Condition protection

    async function loadTodos() {
      try {
        const res = await fetch('/api/todos');
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const data = await res.json();
        if (!cancelled) setTodos(data); // ← בדוק לפני setState
      } catch (err) {
        if (!cancelled) setError(err.message);
      } finally {
        if (!cancelled) setLoading(false);
      }
    }

    loadTodos();
    return () => { cancelled = true; }; // ← Cleanup!

  }, []);

  if (loading) return <p>טוען...</p>;
  if (error)   return <p>שגיאה: {error}</p>;
  return <ul>{todos.map(t => <li key={t.id}>{t.text}</li>)}</ul>;
}

💡 למה cancelled flag?

משתמש עובר לדף אחר לפני שה-fetch סיים. ללא cancelled: setTodos() יקרא על קומפוננטה שכבר לא על המסך → React Warning + Memory Leak. Cleanup function מציבה cancelled=true.

✏תרגול — Fetch Pattern4 שאלות

שאלה 1 — fetch + 404

למה הקוד הזה לא יעבוד נכון?

const res = await fetch('/api/todos/999');
const data = await res.json();
setTodos(data);

✓ תשובה: ב) — fetch לא זורק על 4xx/5xx! תיקון: if (!res.ok) throw new Error(res.status) לפני res.json().

שאלה 2 — async useEffect

מה שגוי בקוד זה (3 שגיאות)?

useEffect(async () => {
  const res = await fetch(`/api/users?q=${query}`);
  setUsers(await res.json());
}); // ← שים לב

✓ תשובה: ב) 3 שגיאות: (1) async ישירות בuseEffect שגוי. (2) אין dependency array → infinite loop. (3) אין if(!res.ok).

שאלה 3 — Race Condition

משתמש לוחץ מהר על "User 1" ואז "User 2". מה יקרה ללא cancelled flag?

✓ תשובה: ב) — Race Condition: בקשה ל-User2 יצאה, אבל בקשת User1 שהייתה איטית חוזרת אחרי ומדרסת. cancelled flag: כשiD משתנה, cleanup מציבה cancelled=true על הבקשה הישנה.

שאלה 4 — POST headers

שלחנו POST אבל השרת מחזיר 400. מה הגורם הנפוץ?

✓ תשובה: א) — ללא Content-Type: application/json, השרת לא יודע שה-body הוא JSON → 400. זה גם הגורם הנפוץ ביותר לבאגים בPOST requests!

// פרקים 3–4

Axios, Loading States ו-Optimistic Updates

Axios עוטפת fetch ומוסיפה: auto-JSON, שגיאה על 4xx/5xx, Interceptors לToken. Loading/Error States = UX נכון.

Fetch vs Axios

מה רוצים	Fetch (מובנה)	Axios (ספרייה)
שגיאות על 4xx/5xx	ידני: if(!res.ok)	אוטומטי — throw!
קריאת JSON	await res.json() ידני	response.data ישירות
שליחת JSON	JSON.stringify + Content-Type	אוטומטי
Token גלובלי	בכל בקשה בנפרד	Interceptor — פעם אחת!
Timeout	צריך AbortController	timeout: 5000 בהגדרה

// api.js — Instance עם הגדרות קבועות:
import axios from 'axios';
const api = axios.create({
  baseURL: 'https://api.myapp.com',
  timeout: 5000,
});
// Interceptor: הוסף Token לכל בקשה אוטומטית:
api.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});
export default api;

// שימוש:
const { data } = await api.get('/todos'); // data מגיע ישירות!
const { data: created } = await api.post('/todos', { text, done: false });

// שגיאה נזרקת אוטומטית:
try { await api.get('/todos/999'); }
catch (err) { console.log(err.response.status); } // 404

Loading/Error States + Optimistic Update

// תמיד שלושה:
const [data,    setData]    = useState(null);
const [loading, setLoading] = useState(false);
const [error,   setError]   = useState(null);

// סדר הבדיקות חשוב:
if (loading) return <div>טוען...</div>;
if (error)   return <div>שגיאה: {error}</div>;
if (!data)   return null; // הגנה
return <div>{data.name}</div>; // data בטוח לא null

// Optimistic Update — UI קודם, Rollback אם נכשל:
async function toggleTodo(id) {
  const previousTodos = todos; // שמור backup
  setTodos(prev => prev.map(t =>   // עדכן UI מיד
    t.id === id ? { ...t, done: !t.done } : t
  ));
  try {
    await api.patch(`/todos/${id}`, { done: !todos.find(t=>t.id===id).done });
  } catch {
    setTodos(previousTodos); // Rollback!
    alert('לא הצלחנו לעדכן. נסה שוב.');
  }
}

✏תרגול — Axios + States4 שאלות

שאלה 1 — Axios vs Fetch

מה היתרון הגדול ביותר של Axios על Fetch?

✓ תשובה: ג) — לגאמא: "בחרתי Axios כי Token מנוהל פעם אחת ב-interceptor ולא בכל בקשה." + auto-error על 4xx/5xx = פחות קוד boilerplate.

שאלה 2 — Missing Error State

מה קורה אם fetch נכשל ואין Error State?

✓ תשובה: ג) Spinner אינסופי — loading=true לעולם לא ישתנה ל-false כי catch לא מטפל בsetLoading(false). תמיד: data + loading + error. תמיד!

שאלה 3 — Optimistic Update

מה Optimistic Update ולמה?

✓ תשובה: א) — Optimistic: עדכן מיד + Rollback. Pessimistic: מחכה לשרת. Optimistic = UX טוב לפעולות שכמעט תמיד מצליחות (toggle, like). Pessimistic = תשלום, מחיקה.

שאלה 4 — Interceptors

למה Interceptor ב-Axios עדיף על הוספת Token ידנית בכל בקשה?

✓ תשובה: ב) — DRY (Don't Repeat Yourself). Interceptor = Middleware על כל בקשה. אם Token משתנה — משנים במקום אחד.

// פרק 5

Custom Hook — useFetch

כל קומפוננטה שצריכה נתונים כותבת את אותו קוד. Custom Hook = מרכז הלוגיקה ומחזיר { data, loading, error }.

// hooks/useFetch.js
import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [trigger, setTrigger] = useState(0); // לrefetch

  useEffect(() => {
    if (!url) return;
    let cancelled = false;
    setLoading(true);
    setError(null);

    fetch(url)
      .then(res => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return res.json();
      })
      .then(json => { if (!cancelled) setData(json); })
      .catch(err => { if (!cancelled) setError(err.message); })
      .finally(() => { if (!cancelled) setLoading(false); });

    return () => { cancelled = true; };
  }, [url, trigger]);

  const refetch = () => setTrigger(t => t + 1);
  return { data, loading, error, refetch };
}

export default useFetch;

// שימוש — שורה אחת במקום 20!
function UserList() {
  const { data: users, loading, error } = useFetch('/api/users');
  if (loading) return <p>טוען...</p>;
  if (error)   return <p>שגיאה: {error}</p>;
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

// Refresh button:
function TodoPage() {
  const { data, loading, refetch } = useFetch('/api/todos');
  return (
    <div>
      <button רענן</button>
      {loading ? <p>טוען...</p> : data?.map(t => ...)}
    </div>
  );
}

💡 Custom Hooks — הכלל הגדול

Custom Hook = פונקציה JS שמתחילה ב-use. יכולה לקרוא לHooks מובנים. כל קומפוננטה שמשתמשת ב-useFetch מקבלת עותק נפרד של ה-State — לא שיתוף.

✏תרגול — Custom Hooks3 שאלות

שאלה 1

שתי קומפוננטות משתמשות ב-useFetch('/api/users'). האם הן חולקות State?

✓ תשובה: א) — Custom Hook = לוגיקה משותפת, State נפרד. לשיתוף State בין קומפוננטות → Context API או Redux.

שאלה 2

מדוע trigger counter מאפשר refetch?

✓ תשובה: ד) — useEffect([url, trigger]): כשtrigger++ → React מזהה שינוי ב-dep → מריץ effect מחדש = fetch מחדש.

שאלה 3 — Custom Hook naming

למה Custom Hook חייב להתחיל ב-"use"?

✓ תשובה: ג) — ב+ג נכונים. שם ה-use מאפשר ל-ESLint לבדוק Rules of Hooks ולזרוק אזהרות כשמשתמשים ב-Hook בצורה לא נכונה.

// פרקים 6–8 + סיכום

Todo App + API מלא וסיכום

שידרוג Todo App מ-localStorage ל-API אמיתי (jsonplaceholder). ארכיטקטורה נכונה: State מרכזי, Optimistic Updates, Separation of Concerns.

קוד מלאTodo App + Axios + jsonplaceholder ›

const api = axios.create({ baseURL: 'https://jsonplaceholder.typicode.com' });

function App() {
  const [todos, setTodos] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // טעינה ראשונית:
  useEffect(() => {
    api.get('/todos?_limit=10')
      .then(({ data }) => setTodos(
        data.map(t => ({ id: t.id, text: t.title, done: t.completed }))
      ))
      .catch(e => setError(e.message))
      .finally(() => setLoading(false));
  }, []);

  async function addTodo(text) {
    const { data } = await api.post('/todos', { title: text, completed: false });
    setTodos(prev => [...prev, { id: data.id, text, done: false }]);
  }

  async function toggleTodo(id) {
    const prev = todos; // backup לRollback
    setTodos(todos.map(t => t.id===id ? {...t, done:!t.done} : t));
    try { await api.patch(`/todos/${id}`, { completed: !todos.find(t=>t.id===id).done }); }
    catch { setTodos(prev); } // Rollback!
  }

  if (loading) return <p>טוען...</p>;
  if (error)   return <p>שגיאה: {error}</p>;
  return (
    <div>
      <AddTodo />
      <ul>{todos.map(t =>
        <TodoItem key={t.id} todo={t} />
      )}</ul>
    </div>
  );
}

ניתוח ארכיטקטוני

עקרון	יישום בקוד
State מרכזי	todos ב-App בלבד — TodoItem לא מודע ל-API
Optimistic Update	toggleTodo — UI מגיב מיד, Rollback אם נכשל
Data Transform	API מחזיר completed, אפליקציה עובדת עם done
Separation of Concerns	api.js=בקשות, App=State, TodoItem=תצוגה

✓מה למדנו — שיעור 18

HTTP Methods: GET קורא, POST יוצר, PUT/PATCH מעדכן, DELETE מוחק. 4xx=Client, 5xx=Server.
Fetch: לא זורק על 4xx/5xx — חובה if (!res.ok). JSON.stringify + Content-Type לPOST.
useEffect + Fetch: cancelled flag למניעת Race Condition + state update על unmounted component.
Axios: Auto-JSON, שגיאה על 4xx/5xx, Interceptors לToken, Instance עם baseURL.
Loading/Error States: תמיד שלושה — data + loading + error. אין חצי-פתרון.
Optimistic Update: עדכן UI מיד + Rollback. Pessimistic: מחכה לשרת.
useFetch Custom Hook: מרכז לוגיקה, מחזיר {data, loading, error, refetch}.
Todo App + API: State מרכזי, Separation of Concerns, Data Transform.

🎯 שיעור הבא — שיעור 19

Context API ו-Redux — כשה-State גדל מעבר לקומפוננטה אחת: prop drilling, Context, useReducer.

✏תרגול סיכום — גאמא סטייל4 שאלות

סיכום 1 — שאלת ראיון

מה ההבדל בין Optimistic ל-Pessimistic Update?

✓ תשובה: א) — Optimistic לפעולות שכמעט תמיד מצליחות (toggle, like, delete). Pessimistic לפעולות קריטיות (תשלום, שינוי סיסמה).

סיכום 2 — fetch vs Axios

מתי Fetch מספיק ומתי כדאי Axios?

✓ תשובה: ג) — לגאמא: "בחרתי Axios כי יש לנו Auth token שצריך להישלח בכל בקשה — Interceptor מנהל זאת פעם אחת."

סיכום 3 — Bug Hunt

מצא את הבאג הקריטי:

useEffect(async () => {
  const res = await fetch('/api/todos');
  setTodos(await res.json());
}, []);

✓ תשובה: ד) — (1) async ישירות ב-useEffect: ה-Promise מוחזר אבל מתעלמים ממנו. (2) חסר if(!res.ok): 404/500 לא יזרקו שגיאה.

סיכום 4

מה useFetch Custom Hook מחזיר ולמה?

✓ תשובה: א) — Object עדיף על מערך כאן: ניתן לשנות שמות (data: users) ולקחת רק מה שצריך. refetch מאפשר ריענון ידני.

// תרגול נוסף

תרגול נוסף — REST: Methods, Status ו-CORS

שאלות העשרה נוספות לחיזוק החומר של השיעור — באותו פורמט בחירה של הקורס.

✏תרגול נוסף3 שאלות

שאלה 1 [קל]

מה ההבדל בין POST ל-PUT?

✓ תשובה נכונה: א — POST /users → יוצר, השרת מקצה ID. PUT /users/5 → מחליף את resource 5 במלואו. PUT הוא Idempotent, POST לא.

שאלה 2 [בינוני]

API מחזיר 401 Unauthorized. מה המשמעות?

✓ תשובה נכונה: ד — 401 = 'מי אתה?' (אימות נכשל/חסר). 403 = 'אני יודע מי אתה, אך אסור לך'. ההבחנה קריטית ב-Debug של API.

שאלה 3 [קשה]

Frontend ב-localhost:3000 שולח ל-API ב-localhost:8000. מה יקרה?

✓ תשובה נכונה: ד — Same-Origin Policy: פרוטוקול+דומיין+פורט חייבים להתאים. פורט שונה = Origin שונה. פתרון: השרת מחזיר Access-Control-Allow-Origin.

// אתגר מעשי

אתגר מעשי — Fetch ו-APIs: עבודה מול Backend

שיא השיעור: לממש את הלוגיקה שמאחורי ה-Web — פרסור, אירועים, state ואבטחה. פתרו את החובה ואז את האתגר; ההגשה נבדקת אוטומטית מול מקרי-קצה נסתרים.

T2 · בסיסי200 נק'~15 דק'algorithmic

ניווט בטוח בתגובת API (JSON path)

תגובות API הן JSON מקונן; לעיתים שדות חסרים. ממש get_path(data, path, default=None) שמנווט לפי נתיב מופרד-בנקודות (מפתחות במילונים, אינדקסים ברשימות — כולל שליליים). אם צעד כלשהו נכשל (מפתח חסר / אינדקס מחוץ לתחום / טיפוס לא-מתאים) — החזר את default במקום לקרוס.

דוגמאות

get_path(D, 'user.addresses.0.city') # D=API response → 'TLV'

get_path(D, 'user.addresses.9.city') → None

get_path({}, 'x', 'NA') → 'NA'

הפתרון שלךהפתרון נשמר מקומית ומשותף עם עמוד „כתיבת קוד”.

פתרון-ייחוס ניווט בטוח בתגובת API (JSON path) ›

def get_path(data, path, default=None):
    cur = data
    for part in path.split('.'):
        if isinstance(cur, dict) and part in cur:
            cur = cur[part]
        elif isinstance(cur, list) and part.lstrip('-').isdigit():
            i = int(part)
            if -len(cur) <= i < len(cur): cur = cur[i]
            else: return default
        else:
            return default
    return cur

T3 · בינוני400 נק'~30 דק'algorithmic

Rate Limiter — דלי אסימונים (Token Bucket)

הגן על API מפני הצפה עם מגביל-קצב 'דלי אסימונים'. הדלי מתחיל מלא (capacity אסימונים) ומתמלא ב-refill אסימונים לשנייה (חסום ל-capacity). נתונה רשימת חותמות-זמן requests (לא יורדת, בשניות). עבור כל בקשה: מלא לפי הזמן שחלף, ואז אם יש ≥1 אסימון — צרוך אחד ואשר (True); אחרת דחה (False). החזר רשימת bool באורך הבקשות.

דוגמאות

rate_limit([0,0,0], 2, 1) → [True, True, False]

rate_limit([0,1,2], 1, 1) → [True, True, True]

הפתרון שלךהפתרון נשמר מקומית ומשותף עם עמוד „כתיבת קוד”.

פתרון-ייחוס Rate Limiter — דלי אסימונים (Token Bucket) ›

def rate_limit(requests, capacity, refill):
    tokens = float(capacity); last = None; out = []
    for t in requests:
        if last is not None:
            tokens = min(capacity, tokens + (t - last) * refill)   # מילוי מאז הבקשה הקודמת
        last = t
        if tokens >= 1: tokens -= 1; out.append(True)              # מותר
        else:           out.append(False)                          # נחסם
    return out

שאלות תרגול ותשובות (10)

שאלה 1 · מה מחזירה הקריאה ל-fetch?

const res = fetch("https://api.example.com/users");

א. את גוף התשובה כטקסט
ב. אובייקט JSON מוכן
ג. Promise שנפתר לאובייקט Response
ד. מערך של תוצאות

תשובה: ג

fetch מחזירה Promise. גם אחרי await מקבלים Response — צריך .json() כדי לקבל את הנתונים.

שאלה 2 · למה צריך שתי פעמים await?

const res = await fetch(url);
const data = await res.json();

א. כי res.json() גם היא אסינכרונית וקוראת את ה-stream
ב. כי fetch איטית
ג. כדי לוודא שהשרת חי
ד. זו טעות — מספיק await אחד

תשובה: א

ה-headers מגיעים ראשונים; קריאת הגוף ופענוח ה-JSON הם שלב אסינכרוני נוסף.

שאלה 3 · מה יקרה כשהשרת מחזיר 404?

try {
  const res = await fetch(url);
  const data = await res.json();
} catch (err) {
  console.log("error");
}

א. ה-catch יתפוס את השגיאה
ב. fetch לא זורקת על 404 — צריך לבדוק res.ok
ג. הקוד יקרוס
ד. התשובה תהיה null

תשובה: ב

fetch נכשלת רק על תקלת רשת. סטטוס שגיאה מחייב בדיקה: if (!res.ok) throw new Error(res.status).

שאלה 4 · מה חסר בבקשת ה-POST הזו?

await fetch(url, {
  method: "POST",
  body: JSON.stringify({ name: "Dan" })
});

א. await נוסף
ב. שדה credentials
ג. כותרת Content-Type: application/json
ד. המרה ל-FormData

תשובה: ג

בלי Content-Type השרת לא יודע לפרש את הגוף כ-JSON ולרוב יחזיר 400.

שאלה 5 · מה עיקר ההבדל בין axios ל-fetch?

א. axios עובד רק בדפדפן
ב. axios מפענח JSON אוטומטית וזורק שגיאה על סטטוס 4xx/5xx
ג. fetch מהירה משמעותית
ד. axios לא תומך ב-POST

תשובה: ב

axios מחזירה response.data מפוענח וזורקת על סטטוס שגיאה — פחות קוד תחזוקה.

שאלה 6 · השרת החזיר 400 Bad Request. מי אשם?

א. השרת קרס
ב. הלקוח — הבקשה שגויה או חסרה שדות
ג. חומת האש חסמה
ד. ה-DNS נכשל

תשובה: ב

🎯 דגש למבחן — 4xx מול 5xx: 4xx = הלקוח טעה (400 בקשה שגויה, 401 לא מאומת, 403 אין הרשאה, 404 לא נמצא). 5xx = השרת טעה (500 שגיאה פנימית, 502 שער פגום, 503 לא זמין). האבחנה הזו מראה שאתם מבינים את מודל Client-Server — ותמיד נשאלת בראיון.

שאלה 7 · מהי שגיאת CORS?

א. הדפדפן חוסם תשובה מדומיין אחר שלא אישר את מקור הבקשה
ב. סיסמת ה-API שגויה
ג. הבקשה חרגה מזמן ההמתנה
ד. ה-JSON פגום

תשובה: א

CORS נאכף בדפדפן. הפתרון הוא בצד השרת — כותרת Access-Control-Allow-Origin.

שאלה 8 · מה הבעיה בקוד הזה?

useEffect(() => {
  fetch(url)
    .then(r => r.json())
    .then(setData);
});

א. חסר מערך תלויות — הבקשה תרוץ בלולאה אינסופית
ב. חסר await
ג. fetch לא עובדת בתוך useEffect
ד. צריך useState במקום

תשובה: א

setData גורם לרינדור → האפקט רץ שוב → בקשה נוספת. יש להוסיף [] או [url].

שאלה 9 · איך שולחים טוקן אימות בבקשה?

await fetch(url, {
  headers: { ______: `Bearer ${token}` }
});

א. Auth
ב. Authorization
ג. X-Token
ד. Bearer

תשובה: ב

התקן הוא כותרת Authorization עם הערך "Bearer <token>".

שאלה 10 · למה חשוב להציג מצב טעינה בזמן בקשת רשת?

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

תשובה: ג

בקשה נמשכת זמן לא ידוע. מצבי loading/error/success הם חלק בלתי נפרד מכל אינטגרציה תקינה.

← שיעור קודם שיעור הבא →