Programmazione asincrona - Promises, fetch e async/await

var users;
function makeHttpReq(method, url) {
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open(method, url);
        xhr.onload = function () {
            if (this.status == 200) {
                resolve(xhr.response); //se la chiamata ha risposto con uno status code di successo allora mettiamo la promise in resolved
            } else {
                reject({ //se la chiamata non ha risposto con 200 mettiamo la promise in rejected
                    status: this.status,
                    statusText: xhr.statusText
                });
            }
        };
        xhr.onerror = function () {
            reject({ //se ci sono stati degli errori per cui la chiamata non è andata a buon fine mettiamo la promise in rejected
                status: this.status,
                statusText: xhr.statusText
            });
        };
        xhr.send();
    });
}

makeHttpReq('GET', 'http://jsonplaceholder.typicode.com/users')
    .then(function (res) { //dentro la funzione then si possono passare 2 callback, la prima viene eseguita se la promise viene resolved
        users = res;
        console.log("2", users); //alla fine, quando la promise si è conclusa con successo, viene stampata la risposta della chiamata
    }, function (error) { //la seconda callback viene eseguita se la promise viene rejected
        console.log(error);
        console.log("3", users); //questa riga non viene stampata se non si verificano errori
    });

console.log("1", users); //viene stampata prima questa riga, che viene eseguita in modo sincrono
//in questo momento la Promise non si è ancora conclusa perciò gli users sono ancora undefined

//qui sbagliamo l'url in modo che la chiamata dia uno status code diverso da 200
makeHttpReq('GET', 'http://jsonplaceholder.typicode.com/usersssssss')
    .then(function (res) {
        users = res;
        console.log("4", users); //questa riga non verrà stampata 
    }, function (error) {
        console.log(error); //{status: 404, statusText: "Not Found"}
    });


//usando async / await
async function makeAsyncReq() {
    let response = await makeHttpReq('GET', 'http://jsonplaceholder.typicode.com/users');
    return response;
}

makeAsyncReq()
.then(
    function(res) {
        users = res;
        console.log("users", users);
    },
    function() {
        console.log.log(error);
    }
);

//facciamo la stessa chiamata ma usando la funzione fetch
//concateniamo insieme due then e alla fine la catch
var request = new Request('http://jsonplaceholder.typicode.com/users', {
    method: 'GET'
});
fetch(request)
    .then(function (resp) {
        return resp.json();//la risposta che arriva dalla fetch deve prima essere trasformata in JSON
    }) //Attenzione, niente punto e virgola!
    .then(function (data) {
        console.log(data);
    }) //Attenzione, niente punto e virgola!
    .catch(function (error) {
        console.log(error); //qui solo se network error o request non completata
    });

//alla then passiamo solo la success function perchè fetch sarà sempre resolved
var request = new Request('http://jsonplaceholder.typicode.com/userssssssss', {//sbagliamo l'url
    method: 'GET'
});
fetch(request)
    .then(function (resp) {
        if (resp.status == 200) {
            return resp.json();
        }
        else {
            return { status: resp.status, statusText: resp.statusText }
        }

    })
    .then(function (data) {
        console.log(data); //{status: 404, statusText: "Not Found"}
    })
    .catch(function (error) {
        console.log(error);
    });

//usando async / await
async function getUsersRight() {
    try {
        let response = await fetch('http://jsonplaceholder.typicode.com/users');
        return response.json();
    } catch (err) {
        console.error(err);
    }
}

getUsersRight()
    .then(function (res) {
        console.log(res);
    });

async function getUsersWrong() {
    try {
        let response = await fetch('http://jsonplaceholder.typicode.com/usersssssss'); //sbagliamol'url per avere un 404
        if (response.status == 200) {
            return response.json();
        }
        else {
            return {status: response.status, statusText: response.statusText}
        }
    } catch (err) {
        throw new Error(err);
    }
}

getUsersWrong()
    .then(function (res) {
        console.log(res); //{status: 404, statusText: "Not Found"}
    });

//cancellare una fetch
var controller = new AbortController();
var signal = controller.signal;

fetch("http://jsonplaceholder.typicode.com/posts", {
  signal: signal
}).then(function (response) {
  console.log(response);
}).catch(function (e) {
  console.warn(e);
});

setTimeout(function () {
  return controller.abort();
}, 100);