APIを呼び出すページ

CoddyのNode.jsジャーニー「REST API」セクションの一部。レッスン 14/18。

まだ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には2つ必要です。JSON.stringify(...)から得られるテキストと、express.json()が確認するヘッダー'Content-Type': 'application/json'です。FormDataの本文では代わりにフォームフィールドが送信されますが、このAPIはそれを拒否します。チェックではページのJavaScriptは実行できません。ページが配信されること、JSONを送信すること、そしてページが行うAPI呼び出しを確認します。

チャレンジ

簡単

public フォルダーを express.static で配信し、/ を開くと 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>