صفحة تستدعي API

جزء من قسم واجهات REST API في رحلة Node.js على Coddy. الدرس 14 من 18.

ليس لدى API الخاص بك شاشة بعد. يمكن لصفحة يقدّمها الخادم نفسه استدعاؤه باستخدام fetch، دون الحاجة إلى CORS، لأن المصدر هو نفسه. يقدّم express.static('public') الملف public/index.html عند المسار /.

const res = await fetch('/api/comments/3', { method: 'DELETE' });
if (!res.ok) {
    const { error } = await res.json();
    message.textContent = error.message;
}

تكون قيمة res.ok صحيحة لأي حالة من 200 إلى 299. يوضع المحتوى في الخيار body، ويتطلب JSON أمرين: النص الناتج من JSON.stringify(...) والترويسة 'Content-Type': 'application/json'، التي يبحث عنها express.json(). يرسل محتوى FormData حقول النموذج بدلًا من ذلك، وهذا API يرفضها. لا تستطيع الاختبارات تشغيل JavaScript الخاص بالصفحة: فهي تتحقق من تقديم الصفحة، ومن أنها ترسل JSON، ومن استدعاءات API التي تجريها.

التحدي

سهل

قدّم مجلد public باستخدام express.static، بحيث يفتح / الملف public/index.html.
يرسل إرسال النموذج { "title" } إلى POST /api/tasks بصيغة JSON. عند النجاح، أفرغ النموذج ونفّذ load()؛ وعند حدوث خطأ، اعرض error.message في #message.

افتح / في عرض الصفحة، وأضف مهمة، ثم أضف العنوان نفسه مرة أخرى.

جرّب بنفسك

<!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 res = await fetch('/api/tasks?limit=50');
            const page = await res.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();
            // 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>