Question

我试图找出一个更有效的方法来创建DOM中的列表项。

目前，在创建每个API请求时创建列表。

我将每个对象推送到自己的数组中，我想在所有数据加载后创建列表。

此外，我还使用了Webpack和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);
        });
    });

};

更新：一切正常！

Answer 1

未经测试，但我希望它能按预期工作。

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

我可能会做这样的事情，因为我真的很想将一个任务分解成小函数，减少对内联注释的需求并将可变状态保持在最低限度。

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;
}

GET请求完成后创建列表项

2 个答案: