API를 호출하는 페이지

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

페이지에서 fetch로 API를 호출합니다. 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 응답을 받습니다. 두 번째 await는 응답의 JSON 본문을 읽습니다. response.ok는 응답 상태가 성공 범위에 있는지 알려 줍니다. 400이나 409 같은 상태 코드는 fetch 프라미스를 거부하지 않습니다. 대신 ok가 false인 응답을 반환합니다. 양식과 목록 코드는 제공되어 있으니, 요청을 보내고 그 결과를 처리하는 데 집중하세요.

제공된 message 변수는 페이지의 메시지 문단을 가리킵니다. 표시할 텍스트를 설정하려면 textContent에 값을 지정하고, 내용을 지우려면 빈 문자열을 지정하세요.

message.textContent = data.error.message;
// 성공한 후 지웁니다:
message.textContent = '';

페이지와 API는 같은 출처를 사용하므로 이 호출에는 CORS 권한이 필요하지 않습니다. FormData는 양식을 JSON과 다른 방식으로 인코딩합니다. 이 API는 express.json()을 사용하므로 JSON 텍스트를 사용하세요.

챌린지

쉬움

아직 API에 화면이 없습니다. 같은 서버에서 제공하는 간단한 페이지를 만들어, 폼을 통해 API에 작업을 추가하세요.

server.js에서 express.static으로 public 폴더를 제공하여 GET / 요청이 public/index.html을 반환하도록 하세요.
public/index.html에서 제출 리스너는 이미 제목을 읽습니다. 새 작업을 API로 보내도록 만드세요:
- 입력 텍스트가 들어 있는 제공된 title 변수를 사용하세요.
- fetch('/api/tasks', ...)를 POST로 보내세요.
- 본문은 JSON.stringify로 만든 JSON 텍스트입니다. 예를 들면 {"title":"Water the plants"}와 같습니다.
- 요청에는 fetch의 headers 옵션에 'Content-Type': 'application/json' 헤더가 필요합니다. 그렇지 않으면 express.json()이 본문을 읽지 못합니다.
응답이 OK이면(상태 코드가 200에서 299 사이일 때 ok 속성은 true입니다), 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>