Menu
CoddyTech
Zacznij naukę

Strona wywołująca API

Część sekcji API REST ścieżki Node.js w Coddy. Lekcja 21 z 25.

Strona wywołuje Twoje API za pomocą fetch. Żądanie POST wymaga trzech opcji: metody, nagłówków i treści. Przekonwertuj obiekt JavaScript na tekst JSON dla treści i oznacz ten tekst jako 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();

Pierwsze await odbiera odpowiedź HTTP. Drugie odczytuje jej treść JSON. response.ok informuje, czy jej status mieści się w zakresie oznaczającym powodzenie. Status taki jak 400 lub 409 nie powoduje odrzucenia obietnicy fetch; otrzymujesz odpowiedź, w której ok ma wartość false. Kod formularza i listy jest już dostępny; skup się na wysłaniu żądania i obsłudze jego wyniku.

Dostarczona zmienna message odnosi się do akapitu z komunikatem na stronie. Ustaw jej textContent, aby wyświetlić tekst, lub przypisz pusty ciąg znaków, aby go wyczyścić:

message.textContent = data.error.message;
// Wyczyść to po pomyślnym zakończeniu:
message.textContent = '';

Strona i API mają ten sam origin, więc to wywołanie nie wymaga uprawnień CORS. FormData koduje formularz inaczej niż JSON; użyj tekstu JSON, ponieważ to API korzysta z express.json().

challenge icon

Wyzwanie

Łatwy

Twoje API nie ma jeszcze interfejsu. Dodaj do niego prostą stronę, serwowaną przez ten sam serwer, której formularz dodaje zadania za pośrednictwem API.

  1. W pliku server.js serwuj folder public za pomocą express.static, aby GET / zwracało public/index.html.
  2. W pliku public/index.html nasłuchiwanie zdarzenia submit odczytuje już tytuł. Spraw, aby wysyłało nowe zadanie do API:
    • Użyj dostarczonej zmiennej title, która zawiera tekst z pola wejściowego.
    • Wyślij je za pomocą fetch('/api/tasks', ...) jako żądanie POST.
    • Treść żądania to tekst w formacie JSON utworzony za pomocą JSON.stringify, na przykład {"title":"Water the plants"}.
    • Żądanie wymaga nagłówka 'Content-Type': 'application/json' w opcji headers funkcji fetch, w przeciwnym razie express.json() nie odczyta treści żądania.
  3. Jeśli odpowiedź jest prawidłowa (jej właściwość ok ma wartość true dla każdego statusu od 200 do 299), wyczyść formularz za pomocą form.reset(), opróżnij #message i wywołaj load(), aby na liście pojawiło się nowe zadanie.
  4. W przeciwnym razie treść odpowiedzi ma opisany wcześniej format błędu, na przykład:
    { "error": { "code": "conflict", "message": "A task with this title already exists" } }
    Wyświetl jej message w akapicie #message.

Testy uruchamiają dostarczony skrypt strony z prostym symulowanym formularzem i rzeczywistym API z lekcji. Wysyłają zadanie oraz jego duplikat, a następnie sprawdzają listę, formularz i komunikat. Wypróbuj też rzeczywistą stronę obok edytora.

Wypróbuj: wyślij GET /. Strona otworzy się w widoku strony z 3 początkowymi zadaniami. Wpisz "Water the plants" i naciśnij Add: pole wejściowe zostanie opróżnione, a zadanie pojawi się na dole listy. Wpisz ponownie "Water the plants" i naciśnij Add: lista pozostanie bez zmian, a pod formularzem pojawi się komunikat "A task with this title already exists".

Spróbuj swoich sił

<!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>

Wszystkie lekcje w sekcji API REST

1Zasoby i czasowniki

Zasoby i URL-eTworzenie za pomocą POSTLekcja projektowaCzęściowe aktualizacje za pomocą PATCHLekcja projektowaUsuwanieLekcja projektowaZastępowanie za pomocą PUTLekcja projektowa

4Przeglądarki, wersje i konfiguracja

Czym jest originZezwalanie na dostęp z innego originCORSStrona wywołująca APILekcja projektowaWersjonowanieLekcja projektowaKonfiguracjaLekcja projektowa

2Walidacja i błędy

Walidacja danych wejściowychLekcja projektowaOpisywanie treści żądaniaKorzystanie ze sprawdzonych danychPola opcjonalneOdczytywanie błędów walidacjiSchematy z zodJeden format błęduLekcja projektowaKonfliktyLekcja projektowa

5Projekt: Etykiety

EtykietyLekcja projektowaTerminyLekcja projektowa

3Listy

Filtrowanie listLekcja projektowaSortowanie tekstuLekcja projektowaSortowanieLekcja projektowaPaginacjaLekcja projektowa

Poćwicz samodzielnie: Edytor online Express