Fetch API

Fetch API позволяет отправлять асинхронные запросы на сервер. Результат выполнения функции — Promise, объект позволяющий указать обработчик (или цепочку обработчиков) ответа от сервера (а точнее результата асинхронной операции в общем случае).

Изменения в коде#

contacts.js

contactForm.addEventListener('submit', (event) => {
    event.preventDefault();
    const formData = new FormData(contactForm);
    const contact = new Contact(Object.fromEntries(formData.entries()));
    createContact(contact)
        .then(appendContact, alert)
        .then(_ => contactForm.reset())
})

const contactsEndpoint = 'http://localhost:3000/contacts';

function createContact(contact) {
    return fetch(contactsEndpoint, {
        method: 'POST', 
        headers:  {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(contact)
    })
    .then(response => response.json())
}

Полный диф

Изменения в коде#

Promise и Async/Await#