JS fetch async examples with error handling and comparison to promise.

asyncFetch.js

// Old
function handleErrors(response) {
    if (!response.ok) {
        throw Error(response.statusText);
    }
    return response;
}

// GET
fetch(`/myAPI/GetMethod?param=${this.param}`, {
        method: 'get',
        credentials: 'same-origin',
        headers: new Headers({
            'Content-Type': 'application/json'
        })
    })
    .then(handleErrors)
    .then(response => response.json())
    .then((response) => {
        this.data = response;
    })
    .catch(error => {
        alert(error);
    });
// New
async function fetchAsync() {
    try {  
        let response = await fetch(`/myAPI/GetMethod?param=${this.param}`, {
            method: 'get',
            credentials: 'same-origin',
            headers: new Headers({
                'Content-Type': 'application/json'
            })
        });
        handleErrors(response);
        let data = await response.json();
        return data;
    }
    catch (error) {
        alert(error);
    }
}



// Post
fetch('/myAPI/PostMethod', {
        method: 'post',
        credentials: 'same-origin',
        headers: new Headers({
            'Content-Type': 'application/json'
        }),
        body: JSON.stringify(
            this.search
        ),
    })
    .then(handleErrors)
    .then(response => response.json())
    .then((response) => {
        this.data = response;
    })
    .catch(error => {
        alert(error);
    });

// New
async function fetchAsync() {
    try { 
        let response = await fetch('/myAPI/PostMethod', {
            method: 'post',
            credentials: 'same-origin',
            headers: new Headers({
                'Content-Type': 'application/json'
            }),
            body: JSON.stringify(
                this.search
            )
        });
        handleErrors(response);
        let data = await response.json();
        return data;
    }
    catch (error) {
        alert(error);
    }
}