API를 호출하는 페이지

Coddy Node.js 여정의 REST API 섹션에 포함된 레슨. 18개 중 14번째.

아직 API에 화면이 없습니다. 같은 서버에서 제공하는 페이지는 출처가 동일하므로 CORS 없이 fetch를 호출할 수 있습니다. 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까지의 모든 상태 코드에서 true입니다. 본문은 body 옵션에 넣습니다. JSON을 보내려면 두 가지가 필요합니다. JSON.stringify(...)에서 얻은 텍스트와 express.json()이 확인하는 헤더 'Content-Type': 'application/json'입니다. FormData 본문은 대신 양식 필드를 전송하며, 이 API는 이를 거부합니다. 검사는 페이지의 JavaScript를 실행할 수 없습니다. 검사는 페이지가 제공되는지, JSON을 전송하는지, 그리고 페이지에서 호출하는 API를 확인합니다.

챌린지

쉬움

express.static을 사용해 public 폴더를 제공하여 /에서 public/index.html이 열리도록 하세요.
양식 제출 시 { "title" }을 JSON으로 POST /api/tasks에 보냅니다. 성공하면 양식을 비우고 load()를 실행하세요. 오류가 발생하면 #message에 error.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>