Menu
CoddyTech
Öğrenmeye başla

API'yi Çağıran Bir Sayfa

Coddy'nin Node.js Journey'sinin REST API'leri bölümünün bir parçası. Ders 21 / 25.

Bir sayfa, fetch ile API'nizi çağırır. Bir POST için üç seçenek gerekir: yöntem, başlıklar ve gövde. Gövde için JavaScript nesnesini JSON metnine dönüştürün ve bu metni application/json olarak etiketleyin.

const response = await fetch('/api/books', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({title: title}),
});
const data = await response.json();

İlk await, HTTP yanıtını alır. İkincisi, yanıtın JSON gövdesini okur. response.ok, yanıtın durum kodunun başarılı aralıkta olup olmadığını belirtir. 400 veya 409 gibi bir durum kodu, fetch sözünü reddetmez; ok değeri false olan bir yanıt verir. Form ve liste kodları sağlanmıştır; isteği göndermeye ve sonucunu işlemeye odaklanın.

Sağlanan message değişkeni, sayfanın ileti paragrafını belirtir. Görüntülenecek metni göstermek için textContent özelliğine bu metni, iletiyi temizlemek içinse boş bir dize atayın:

message.textContent = data.error.message;
// Başarılı olduktan sonra temizle:
message.textContent = '';

Sayfa ile API aynı kaynağı paylaştığından bu çağrı için CORS izni gerekmez. FormData, formu JSON'dan farklı biçimde kodlar; bu API express.json() kullandığı için JSON metni kullanın.

challenge icon

Görev

Kolay

API'nizin henüz bir ekranı yok. Ona, aynı sunucu tarafından sunulan ve formu API üzerinden görev ekleyen küçük bir sayfa ekleyin.

  1. server.js içinde public klasörünü express.static ile sunun; böylece GET /, public/index.html dosyasını döndürür.
  2. public/index.html içinde gönderim dinleyicisi başlığı zaten okuyor. Yeni görevi API'ye göndermesini sağlayın:
    • Girdi metnini içeren, sağlanan title değişkenini kullanın.
    • fetch('/api/tasks', ...) ile POST olarak gönderin.
    • İstek gövdesi, JSON.stringify ile oluşturulan JSON metnidir; örneğin {"title":"Water the plants"}.
    • İstek, fetch'in headers seçeneğinde 'Content-Type': 'application/json' başlığına ihtiyaç duyar; aksi hâlde express.json() gövdeyi okuyamaz.
  3. Yanıt OK ise (ok özelliği 200 ile 299 arasındaki herhangi bir durum kodu için true olur), formu form.reset() ile temizleyin, #message içeriğini boşaltın ve listenin yeni görevi göstermesi için load() çağrısını yapın.
  4. Aksi hâlde yanıt gövdesi, önceki hata biçimindedir; örneğin:
    { "error": { "code": "conflict", "message": "A task with this title already exists" } }
    message değerini #message paragrafında gösterin.

Kontroller, bu sağlanan sayfa betiğini küçük bir simüle edilmiş formla ve dersin gerçek API'siyle çalıştırır. Bir görev ve ardından yinelenen bir görev gönderir, sonra listeyi, formu ve mesajı inceler. Gerçek sayfayı da düzenleyicinin yanında deneyin.

Deneyin: GET / isteği gönderin. Sayfa görünümünde, başlangıçtaki 3 görevle birlikte sayfa açılır. "Water the plants" yazıp Add düğmesine basın: girdi boşalır ve görev listenin en altında görünür. Yeniden "Water the plants" yazıp Add düğmesine basın: liste aynı kalır ve formun altında "A task with this title already exists" görünür.

Kendin dene

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

REST API'leri bölümündeki tüm dersler

1Kaynaklar ve Fiiller

Kaynaklar ve URL'lerPOST ile OluşturmaProje dersiPATCH ile Kısmi GüncellemelerProje dersiSilmeProje dersiPUT ile DeğiştirmeProje dersi

4Tarayıcılar, Sürümler ve Yapılandırma

Origin NedirBaşka Bir Origin'e İzin VermeCORSAPI'yi Çağıran Bir SayfaProje dersiSürümlemeProje dersiYapılandırmaProje dersi

2Doğrulama ve Hatalar

Girdiyi DoğrulamaProje dersiBir Gövdeyi TanımlamaDoğrulanmış Veriyi Kullanmaİsteğe Bağlı AlanlarDoğrulama Hatalarını Okumazod ile ŞemalarTek Hata BiçimiProje dersiÇakışmalarProje dersi

5Proje: Etiketler

EtiketlerProje dersiSon TarihlerProje dersi

3Listeler

Listeleri FiltrelemeProje dersiMetinleri SıralamaProje dersiSıralamaProje dersiSayfalamaProje dersi

Kendi başına pratik yap: Express playground