JavaScript: inviare un form usando le Fetch API

Con JavaScript possiamo inviare un form usando le Fetch API.

Si tratta di impostare POST come metodo HTTP con il corrispettivo valore application/x-www-form-urlencoded per l'header Content-Type e di interrogare la proprietà ok dell'oggetto risposta tenendo presente che con questo approccio la Promise risolve in ogni caso.

'use strict';

const request = (url, queryString) => {
    return new Promise((resolve, reject) => {

        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: queryString
        }).then(response => {
            if(response.ok) {
                resolve(response.json());
            } else {
                reject({
                   error: 500
                });
            }
        });

    });
};

A questo punto dobbiamo creare la query string a partire dai valori dei campi del form.

'use strict';

const buildQuery = form => {
    let q = [];
    Array.prototype.forEach.call(form.elements, element => {
        if(element.type !== 'submit') {
            let str = element.name + '=' + element.value;
            q.push(str);
        }
    });
    return q.join('&');
};

Non ci resta quindi che collegare il nostro codice al form di riferimento.

'use strict';

const submitForm = async form => {
    let query = buildQuery(form);
    try {
        let result = await request('/api/contact', query);
        // OK
    } catch(err) {
        console.warn(err);
    }
};

document.querySelector('#contact').addEventListener('submit', e => {
    e.preventDefault();
    submitForm(this);
}, false);

Sfruttando il modello async/await manteniamo il nostro codice compatto evitando inutili callback.