Javascript 数组数据每秒钟仅呈现到HTML表，否则未定义 //相关代码： const searchBtn=document.getElementById（“search btn”）； 常量输入=document.getElementById（“输入”）； const leftTable=document.querySelector（“左表”）； 让url=”https://api.github.com/search/repositories?q=?"; 让塔格苏尔； 让dataArr； 让名称=[]； 让语言=[]； 让latestTag=[]； 让tableDataArr=[名称、语言、最新标记]； //获取包含用户查询的回购的前2项 函数搜索（newURL）{ 获取（newURL{ 标题：{ “授权”：“xxxx” } }) 。然后（resp=>{ 返回resp.json（）； }) 。然后（数据=>{ dataArr=data.items.slice（0,2）； 返回extractData（）； }); input.value=“”； } //从返回的对象（语言、名称、最新标记）中提取必要的值，并推送到相应的数组 函数extractData（）{ dataArr.forEach（i=>{ 名称。推送（即全名）； 语言推送（即语言）； 获取（i.tags\u url） 。然后（resp=>{ 返回resp.json（）； }) 。然后（resp=>{ 如果（响应[0]）{ latestTag.push（resp[0].name）； }否则{ latestTag.push（“”）； } 返回console.log（tableDataArr）； }); //getLatestTag（i.tags\uURL）； }); renderData（）； } //将数组数据呈现到HTML表 函数renderData（）{ tableDataArr[0]。forEach（（i，j）=>{ 设newRow=document.createElement（“tr”）； newRow.className=“行”； newRow.innerHTML=`${i} ${tableDataArr[1][j]} ${tableDataArr[2][j]} 加`； leftTable.appendChild（newRow）； }); } //用户输入事件侦听器 searchBtn.addEventListener（“单击”，（）=>{ 搜索（url+input.value）； }); input.addEventListener（“键控”，e=>{ 如果（如keyCode===13）{ 搜索（url+input.value）； } });

我需要tableDataArr中每个数组的内容在事件侦听器触发后呈现到HTML表中。tableDataArr[0]和tableDataArr[1]中的内容每次呈现都没有问题

---

但是，tableDataArr[2]中的内容在第一次调用时呈现undefined，然后在下一次调用时正确呈现undefined，然后是undefined，依此类推，使用undefined和data之间的这种交替模式。这里发生了什么？

您正在调用

renderData

，在

获取

完成之前，它还没有完成获取。尝试将其移动到

内部，然后

以了解我的意思

fetch

是异步的—它必须等待网络响应—并且您在

中编写的代码会等待它完成，但在将该项推送到数组之前，
renderData
会立即被调用

看起来，即使进行了此更改，如果您以这种方式进行多次提取并将其推到数组上，代码也可能会出错。
提取和链接的thens将返回一个Promise对象。在调用renderData（）之前，您可以将所有这些内容推送到一个数组中，并使用Promise.all（）检查您的所有抓取和接取是否完成

此示例代码将指导您


//从返回的对象（语言、名称、最新标记）中提取必要的值，并推送到相应的数组中
函数extractData（）{
设psArr=[]；
dataArr.forEach（i=>{
名称。推送（即全名）；
语言推送（即语言）；
让ps=fetch（i.tags\u url）
。然后（resp=>{
返回resp.json（）；
})
。然后（resp=>{
如果（响应[0]）{
latestTag.push（resp[0].name）；
}否则{
latestTag.push（“”）；
}
返回响应；
});
psArr推力（ps）；
//getLatestTag（i.tags\uURL）；
});
承诺。所有（psArr）。然后（（）=>{
renderData（）；
});
}
这可能没有什么帮助：
返回console.log（tableDataArr）
我已经记录了console.log几乎所有的内容。tableDataArr看起来像一个完全正常的数组，包含3个项，每个项本身看起来都非常正常。不知道发生了什么事！这不是承诺吗？谢谢你！承诺。一切都解决了：）
// Relevant code: 

const searchBtn = document.getElementById("search-btn");
const input = document.getElementById("input");
const leftTable = document.querySelector("#left-table");
let url = "https://api.github.com/search/repositories?q=?";
let tagsUrl;
let dataArr;
let names = [];
let language = [];
let latestTag = [];
let tableDataArr = [names, language, latestTag];

// Fetch first 2 items for repos containing user query
function search(newURL) {
  fetch(newURL, {
    headers: {
      "Authorization": "xxxx" 
    }
  })
    .then(resp => {
      return resp.json();
    })
    .then(data => {
      dataArr = data.items.slice(0, 2);
      return extractData();
    });
  input.value = ""; 
}

// Extract necessary values from returned object (language, name, latest tag) and push to corresponding arrays
function extractData() {
  dataArr.forEach(i => {
    names.push(i.full_name);
    language.push(i.language);
    fetch(i.tags_url)
      .then(resp => {
        return resp.json();
      })
      .then(resp => {
        if (resp[0]) {
         latestTag.push(resp[0].name);
        } else {
         latestTag.push(" ");
        }
        return console.log(tableDataArr);
      });
    //  getLatestTag(i.tags_url);
  });
  renderData();
}

// Render array data to HTML table
function renderData() {
  tableDataArr[0].forEach((i, j) => {
    let newRow = document.createElement("tr");
    newRow.className = "row";
    newRow.innerHTML = `<td class='cell'>${i}</td>
    <td class='cell'>${tableDataArr[1][j]}</td>
    <td class='cell'>${tableDataArr[2][j]}</td>
    <td class='cell'><button class='add-btn'>Add</button></td>`;
    leftTable.appendChild(newRow);
  });
}

// User input event listeners
searchBtn.addEventListener("click", () => {
  search(url + input.value);
});

input.addEventListener("keyup", e => {
  if (e.keyCode === 13) {
    search(url + input.value);
  }
});