4.6 בקשות HTTP תרגול

תרגול - בקשות HTTP¶

כל התרגילים משתמשים ב-API של JSONPlaceholder: https://jsonplaceholder.typicode.com

תרגיל 1 - בקשת GET בסיסית¶

כתבו פונקציה getUser שמקבלת מזהה משתמש (id) ומחזירה את פרטי המשתמש מה-API.

השתמשו ב-async/await
בדקו response.ok
הדפיסו את שם המשתמש והאימייל שלו
טפלו בשגיאות עם try/catch

בדקו עם:

const user = await getUser(1);
// should print something like: "Leanne Graham - Sincere@april.biz"

await getUser(999);
// should print an error message (user not found)

תרגיל 2 - הצגת רשימה מה-API¶

כתבו פונקציה displayPosts שמביאה את כל הפוסטים (/posts) ומציגה אותם בדף HTML.

צרו דף HTML עם <div id="posts"></div>
עבור כל פוסט, צרו כרטיס עם כותרת וגוף
הוסיפו הודעת "טוען..." בזמן שהבקשה מתבצעת
טפלו בשגיאות והציגו הודעה מתאימה

תרגיל 3 - בקשת POST¶

כתבו פונקציה createPost שיוצרת פוסט חדש.

הפונקציה מקבלת אובייקט עם title, body, ו-userId
שלחו בקשת POST ל-/posts
הדפיסו את הפוסט שנוצר (כולל ה-id שהשרת החזיר)
טפלו בשגיאות

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

await createPost({
    title: "My First Post",
    body: "Hello from the frontend!",
    userId: 1
});
// should print: { id: 101, title: "My First Post", ... }

תרגיל 4 - חיפוש עם Query Parameters¶

כתבו פונקציה searchPosts שמחפשת פוסטים לפי מזהה משתמש.

השתמשו ב-URLSearchParams כדי לבנות את ה-URL
הנתיב: /posts?userId=X
הציגו את מספר התוצאות ואת הכותרות
הוסיפו פרמטר _limit כדי להגביל את מספר התוצאות

await searchPosts(1);       // all posts by user 1
await searchPosts(1, 3);    // first 3 posts by user 1

תרגיל 5 - CRUD מלא¶

כתבו אובייקט PostService עם המתודות הבאות:

const PostService = {
    getAll(),        // GET /posts
    getById(id),     // GET /posts/:id
    create(data),    // POST /posts
    update(id, data),// PUT /posts/:id
    delete(id)       // DELETE /posts/:id
};

כל המתודות צריכות לבדוק response.ok
כל המתודות צריכות לטפל בשגיאות
כל המתודות צריכות להיות async

בדקו:

const posts = await PostService.getAll();
console.log(posts.length); // 100

const post = await PostService.getById(1);
console.log(post.title);

const newPost = await PostService.create({ title: "Test", body: "Body", userId: 1 });
console.log(newPost.id); // 101

await PostService.update(1, { title: "Updated", body: "New body", userId: 1 });
await PostService.delete(1);

תרגיל 6 - טיימאאוט וביטול¶

א. כתבו פונקציה fetchWithTimeout שעוטפת fetch ומוסיפה timeout.

הפונקציה מקבלת URL, options, ו-timeout (באלפיות שנייה)
אם הבקשה לא מסתיימת בזמן, היא מתבטלת ונזרקת שגיאה

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

// only the last request should complete
fetchLatest("/search?q=h");     // cancelled
fetchLatest("/search?q=he");    // cancelled
fetchLatest("/search?q=hel");   // cancelled
fetchLatest("/search?q=hello"); // this one completes

רמז: שמרו את ה-AbortController הנוכחי במשתנה חיצוני.

תרגיל 7 - בקשות מקבילות¶

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

שלחו את שתי הבקשות במקביל עם Promise.all
/users/:id לפרטי המשתמש
/posts?userId=:id לפוסטים
החזירו אובייקט בצורה: { user: {...}, posts: [...] }
אם אחת הבקשות נכשלת, טפלו בזה

const result = await getUserWithPosts(1);
console.log(result.user.name);    // "Leanne Graham"
console.log(result.posts.length); // 10

תרגיל 8 - פונקציית עטיפה¶

בנו פונקציית עטיפה api שמספקת ממשק נקי לעבודה עם API:

מקבלת base URL ומחזירה אובייקט עם מתודות
תומכת ב-GET, POST, PUT, DELETE
מוסיפה כותרות אוטומטית (Content-Type, Authorization)
בודקת response.ok
כוללת timeout
מאפשרת להגדיר token

const client = createApiClient("https://jsonplaceholder.typicode.com");

// optional: set auth token
client.setToken("my-secret-token");

const posts = await client.get("/posts");
const newPost = await client.post("/posts", { title: "Hi", body: "World", userId: 1 });
await client.put("/posts/1", { title: "Updated", body: "New", userId: 1 });
await client.delete("/posts/1");