Assegnare dati fetch request ad una variabile globale

[Utonto Tonto]

In pratica quello che vorrei fare è prendere i dati ottenuti tramite una fetch request, looppare sui dati con un forEach e poi memorizzare il risultato in una variabile globale.

const url = '...API_URL...';
let users = [];

try {
    fetch(url, { method: 'GET' })
        .then(res => {
            if (res.status !== 200) {
                throw new Error(res.statusText);
                return;
            }
            return res.json();
        })
        .then(data => {
            data.data.forEach(user => {
                let userData = {
                    firstName: user.first_name,
                    lastName: user.last_name
                };
                users.push(userData);
            })
        })
} catch (error) {
    throw new Error(error);
}

const url = '...API_URL...';
let users = [];

function getSingleUserData(userdata) {
    userdata.data.forEach(user => {
        let userData = {
            firstName: user.first_name,
            firstName: user.first_name
        };
        users.push(userData);
    });
}
  
async function getUsersData() {
    const res = await fetch(url, { method: 'GET' });
    const data = await res.json();
    getSingleUserData(data);
}

getUsersData();

So che l'API fetch è asincrona e ha bisogno di un po' di tempo per fare il suo lavoro, quindi in entrambi i casi se faccio un console.log() della variabile users quello che ottengo è un array vuoto perché la fetch request è ancora in lavorazione. La mia domanda è: come posso aspettare che la fetch request sia terminata e poi memorizzare i dati nella variabile globale?

[linoma]

il method fetch implementa diverse interfacce tra quali i workers proprio xche asincrona. Quindi puoi cmq gestiirne gli eventi, cn i metodi di Worker, e trattare l'oggetto Response in conseguenza degli eventi generati

[Utonto Tonto]

Hm non mi è molto chiara la tua risposta, comunque per il momento sto usando setTimeout per aspettare che la variabile sia riempita con i dati della fetch request. Può andar bene secondo te?

[ninja72]

Sconsiglio vivamente di gestire la/le promises con setTimeout o simili.

test.json

{
    "data": {
        "first_name": "max",
        "last_name": "mad"
    }
}

async function getUsersData(url) {
            const res = await fetch(url, { method: 'GET' });
            return res.json();
        }

        // gestisci i dati della promises con async/await all'interno di una iife (Immediately Invoked Function Expression) 
        (async () => {
            const url = 'test.json';
            let users = await getUsersData(url)
            console.log(users.data.first_name,users.data.last_name)
        })()
        
        // gestisci i dati della promises con .then()
        getUsersData('test.json').then(data => {
            console.log(data.data.first_name, data.data.last_name)
        })

[linoma]

..potresti aspettare l'esito di fetch piuttosto che complicarti il discorso. Un await al posto di async e dovrebbe bloccare sino a quando fetch nn termina

[Utonto Tonto]

Sconsiglio vivamente di gestire la/le promises con setTimeout o simili.

test.json

{
    "data": {
        "first_name": "max",
        "last_name": "mad"
    }
}

async function getUsersData(url) {
            const res = await fetch(url, { method: 'GET' });
            return res.json();
        }

        // gestisci i dati della promises con async/await all'interno di una iife (Immediately Invoked Function Expression) 
        (async () => {
            const url = 'test.json';
            let users = await getUsersData(url)
            console.log(users.data.first_name,users.data.last_name)
        })()
        
        // gestisci i dati della promises con .then()
        getUsersData('test.json').then(data => {
            console.log(data.data.first_name, data.data.last_name)
        })

Ciao ninja72,
grazie per la risposta. Domanda, sono due metodi diversi o sono un tutt'uno? Lo chiedo perchè funzionano entrambi singolarmente. Comunque nella mia risposta precedente non mi sono spiegato bene, non sono le promises che sto gestendo con setTimeout bensì la variabile globale per aspettare che venda popolata dalla fetch request.

[ninja72]

Sono due modi per gestire i dati che potresti ricevere da un promises, non conosco tutto il contesto del tuo progetto ma forse il metodo della iife fa più al caso tuo.

ps. il setTimeout non è adatto a prescindere in questo contesto, anche perchè la fetch restituisce una promises.

[Utonto Tonto]

Sono due modi per gestire i dati che potresti ricevere da un promises, non conosco tutto il contesto del tuo progetto ma forse il metodo della iife fa più al caso tuo.

ps. il setTimeout non è adatto a prescindere in questo contesto, anche perchè la fetch restituisce una promises.

Capisco ma quella variabile non viene popolata all'istante quando carico la pagina, occorre sempre aspettare quella manciata di millisecondi e se utilizzo la variabile senza aspettare che venga popolata il mio
progetto non funziona.