דף שקורא ל-API

חלק מהיחידה REST APIs במסלול ה-Node.js של Coddy. שיעור 21 מתוך 25.

דף שולח קריאה ל-API שלך באמצעות fetch. בקשת POST דורשת שלוש אפשרויות: שיטה, כותרות וגוף. המירו את אובייקט ה-JavaScript לטקסט JSON עבור הגוף, וציינו שסוג הטקסט הזה הוא application/json.

const response = await fetch('/api/books', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({title: title}),
});
const data = await response.json();

ה-await הראשון מקבל את תגובת ה-HTTP. השני קורא את גוף ה-JSON שלה. response.ok מציין אם הסטטוס שלה נמצא בטווח ההצלחות. סטטוס כמו 400 או 409 אינו דוחה את הבטחת fetch; הוא מחזיר תגובה שבה ok הוא false. הקוד של הטופס והרשימה מסופק; התמקדו בשליחת הבקשה ובטיפול בתוצאה שלה.

המשתנה message שסופק מתייחס לפסקת ההודעה בדף. הגדירו את textContent שלו כדי להציג טקסט, או מחרוזת ריקה כדי לנקות אותו:

message.textContent = data.error.message;
// נקה אותו לאחר הצלחה:
message.textContent = '';

הדף וה-API חולקים מקור, ולכן הקריאה הזאת אינה דורשת הרשאת CORS. FormData מקודד טופס באופן שונה מ-JSON; השתמשו בטקסט JSON כי ה-API הזה משתמש ב-express.json().

אתגר

קל

ל־API שלך עדיין אין ממשק. הוסף לו דף קטן שמוגש על ידי אותו שרת, ובו טופס שמוסיף משימות דרך ה־API.

ב־server.js, הגש את התיקייה public באמצעות express.static, כך ש־GET / יחזיר את public/index.html.
ב־public/index.html, מאזין השליחה כבר קורא את הכותרת. הגדר אותו כך שישלח את המשימה החדשה ל־API:
- השתמש במשתנה title שסופק, המכיל את הטקסט שהוזן.
- שלח אותה באמצעות fetch('/api/tasks', ...) כבקשת POST.
- גוף הבקשה הוא טקסט JSON שנוצר באמצעות JSON.stringify, כמו {"title":"Water the plants"}.
- הבקשה זקוקה לכותרת 'Content-Type': 'application/json', באפשרות headers של fetch, אחרת express.json() לא יקרא את גוף הבקשה.
אם התגובה תקינה (המאפיין ok שלה הוא true בכל סטטוס מ־200 עד 299), נקה את הטופס באמצעות form.reset(), רוקן את #message וקרא ל־load() כדי שהרשימה תציג את המשימה החדשה.
אחרת, גוף התגובה הוא במבנה השגיאה שהוצג קודם, לדוגמה:
```
{ "error": { "code": "conflict", "message": "A task with this title already exists" } }
```
הצג את message שלה בפסקה #message.

הבדיקות מריצות את סקריפט הדף שסופק עם טופס מדומה קטן ועם ה־API האמיתי של השיעור. הן שולחות משימה ומשימה כפולה, ואז בודקות את הרשימה, את הטופס ואת ההודעה. כדאי גם לנסות את הדף עצמו לצד העורך.

נסה זאת: שלח GET /. הדף נפתח בתצוגת הדף ומציג את 3 המשימות ההתחלתיות. הקלד "Water the plants" ולחץ על Add: שדה הקלט מתרוקן והמשימה מופיעה בתחתית הרשימה. הקלד "Water the plants" שוב ולחץ על Add: הרשימה נשארת ללא שינוי, וההודעה "A task with this title already exists" מופיעה מתחת לטופס.

נסו בעצמכם

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Tasks</title>
</head>
<body>
    <h1>Tasks</h1>
    <ul id="list"></ul>
    <form id="add">
        <input name="title" placeholder="New task" required>
        <button>Add</button>
    </form>
    <p id="message"></p>
    <script>
        const list = document.querySelector('#list');
        const form = document.querySelector('#add');
        const message = document.querySelector('#message');

        async function load() {
            const response = await fetch('/api/tasks?limit=50');
            const page = await response.json();
            list.replaceChildren(...page.items.map((task) => {
                const item = document.createElement('li');
                item.textContent = (task.done ? '[x] ' : '[ ] ') + task.title;
                return item;
            }));
        }

        form.addEventListener('submit', async (event) => {
            event.preventDefault();
            const title = form.elements.title.value;
            // Send the title to POST /api/tasks as JSON. On success clear
            // the form and load() again; on an error show its message.
        });

        load();
    </script>
</body>
</html>