javascript - 数组数据仅每隔两个事件呈现到 HTML 表，否则未定义

Question

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

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

但是，tableDataArr[2] 中的内容在第一次调用时渲染为 undefined，然后正确渲染下一次调用，然后渲染为 undefined，依此类推，在未定义和数据之间采用这种交替模式。这是怎么回事？

Answer 1

您在 fetch 完成之前调用 renderData，因此它尚未完成提取。尝试将其移至 then 内部，看看我的意思。

fetch 是异步的 - 它必须等待网络响应 - 并且您在 then 中编写的代码会等待它完成，但是 在将该项目推送到数组之前，会立即调用 renderData。

即使进行了此更改，如果您以这种方式进行多次提取并推送到数组，您的代码也可能容易出错 - tags 可能会被乱序推送并且与名称如您所料。