Erstellen von Listenelementen, nachdem die GET-Anforderung abgeschlossen ist

Question

Ich versuche, einen effizienteren Weg zu finden, um die Listenelemente im DOM zu erstellen.

Im Moment wird die Liste erstellt, wenn jede API-Anfrage gestellt wird.

Ich dränge jedes Objekt in ein eigenes Array, ich möchte die Liste erstellen, sobald alle Daten geladen haben.

Zusätzlich verwende ich Webpack und Babel.

let streamApi = 'https://wind-bow.glitch.me/twitch-api/streams/'; 
let twitchUsers = ['ESL_SC2', 'OgamingSC2', 'freecodecamp', 'noobs2ninjas', 'comster404']; 
let streamByUser = []; 

window.onload = function() { 
    //Make a API request for each user and store in an array 
    twitchUsers.map((user) => { 
     fetch(streamApi + user, {method: 'GET'}) 
     .then(response => response.json()) 
     .then(json => { 
      streamByUser.push(json); 
      let uL = document.getElementById("user-list");   
      let listItem = document.createElement("li"); 
      listItem.className = "list-group-item"; 
      if (json.stream === null) { 
       listItem.innerHTML = "null"; 
      } else { 
       listItem.innerHTML = json.stream.channel.display_name; 
      } 
      uL.appendChild(listItem); 
     }); 
    }); 

}; 

UPDATE: Alles funktioniert!

Answer 1

Nicht getestet, aber ich hoffe, es sollte wie erwartet funktionieren.

const streamApi = "https://wind-bow.glitch.me/twitch-api/streams/"; 
const twitchUsers = [ 
    "ESL_SC2", 
    "OgamingSC2", 
    "freecodecamp", 
    "noobs2ninjas", 
    "comster404" 
]; 
const twitchUsersStreams = twitchUsers.map(user => 
    fetch(streamApi + user, { method: "GET" }).then(res => res.json()) 
); 

let streamByUser = []; 
window.onload = function() { 
    Promise 
    .all(twitchUsersStreams) 
    .then(everythingArray => { 
     //do something with everythingArray after all the requests resolved 
    }) 
    .catch(err => { 
     // As soon as any of the 'fetch' results in promise rejection 
    }); 
}; 

Answer 2

würde ich wahrscheinlich so etwas tun, weil ich wirklich eine Aufgabe in kleine Funktionen zerlegen mag, dass die Notwendigkeit für die Inline-Kommentare zu reduzieren und auf ein Minimum wandelbaren Zustand zu halten.

const streamApi = 'https://wind-bow.glitch.me/twitch-api/streams/'; 
const twitchUsers = ['ESL_SC2', 'OgamingSC2', 'freecodecamp', 'noobs2ninjas', 'comster404']; 

window.onload = async function() { 
    const list = document.getElementById("user-list"); 
    const addToList = list.appendChild.bind(list); 
    const twitchStreams = await fetchUsers(twitchUsers); 
    twitchStreams.map(toListItem).forEach(addToList); 
}; 

async function fetchUser(user) { 
    const response = await fetch(`${streamApi}${user}`, {method: 'GET'}); 
    return response.json(); 
} 

function fetchUsers(users) { 
    return Promise.all(users.map(fetchUser)); 
} 

function toListItem(user) { 
    const listItem = document.createElement("li"); 
    listItem.className = "list-group-item"; 
    listItem.innerHTML = user.stream !== null 
    ? user.stream.channel.display_name 
    : "null"; 
    return listItem; 
}