使用fetch()请求数据后无法将login字段存入数组arr的问题

• createList() 是异步函数，调用后不会阻塞后续代码执行，如果你在调用createList()后立刻读取数组arr，此时fetch请求还未返回结果，遍历存入数组的逻辑还没执行，自然读不到存入的内容。
• 当前代码仅实现了将login字段存入数组的逻辑，没有编写数组填充完成后统一调用createListItem渲染的步骤，所以哪怕数组已经有值，也不会自动渲染到页面上。
• 额外注意：你定义的请求url末尾多了一个多余的空格，建议删除避免出现不必要的请求错误。

方案1：在异步逻辑内部统一处理数组和渲染 #

function createListItem(text) {  
  const parent = document.getElementsByTagName("ol");  
  const entry = document.createElement("li");  
  entry.textContent = text;
  parent[0].appendChild(entry);
}
// 去掉url末尾的多余空格
const url = "https://api.github.com/users";
async function fetchURL() {  
  return (await fetch(url)).json();
}
async function createList() {  
  const data = await fetchURL();
  // 先提取所有login字段存入数组
  const arr = data.map(item => item.login);
  // 再统一遍历数组渲染列表项
  arr.forEach(login => createListItem(login));
}
createList();

方案2：如果需要在函数外部使用填充完成的数组，通过异步回调获取 #

// 改造createList直接返回处理好的login数组
async function createList() {  
  const data = await fetchURL();
  return data.map(item => item.login);
}

// 方式一：在立即执行的异步函数中通过await获取数组
;(async () => {
  const arr = await createList();
  // 此处可正常读取完整的arr做任意处理
  arr.forEach(login => createListItem(login));
})()

// 方式二：通过.then回调获取数组
/*
createList().then(arr => {
  arr.forEach(login => createListItem(login));
})
*/

内容的提问来源于stack exchange，提问作者user7186002