javascript - 在同步函数和 for 循环中获取 API

Question

var lineArr = [];
    var MAX_LENGTH = 10;
    var duration = 500;
    var chart = realTimeLineChart();

function getData() {
  fetch('./getRealTimeData').then((response) => response.json()
.then((data) => {
  return data;
}));
}

function seedData() {
  var now = new Date();
  for (var i = 0; i < MAX_LENGTH; ++i) {
    let data = getData();
    lineArr.push({
      time: new Date(now.getTime() - ((MAX_LENGTH - i) * duration)),
      x: data.x,
      y: data.y,
      z: data.z
    });
  }
}

function updateData() {
  var now = new Date();
  let data = getData();

  var lineData = {
    time: now,
    x: data.x,
    y: data.y,
    z: data.z
  };
  lineArr.push(lineData);

  if (lineArr.length > 30) {
    lineArr.shift();
  }
  d3.select("#chart").datum(lineArr).call(chart);
}

function resize() {
  if (d3.select("#chart svg").empty()) {
    return;
  }
  chart.width(+d3.select("#chart").style("width").replace(/(px)/g, ""));
  d3.select("#chart").call(chart);
}

document.addEventListener("DOMContentLoaded", function() {
  seedData();
  window.setInterval(updateData, 250);
  d3.select("#chart").datum(lineArr).call(chart);
  d3.select(window).on('resize', resize);
});

结果:

rt_st.js:19 Uncaught TypeError: Cannot read property 'x' of undefined
    at seedData (rt_st.js:19)
    at HTMLDocument.<anonymous> (rt_st.js:53)

因为 fetch 是异步的，所以在同步上下文中使用可能会出现很多问题，我不明白如何让 getData() 函数在执行对服务器的请求时等待？或者我可以用什么来代替 fetch？或者我应该使用除 fetch 之外的其他东西？

Answer 1

async function - JavaScript | MDN

An async function can contain an await expression that pauses the execution of the async function and waits for the passed Promise's resolution, and then resumes the async function's execution and returns the resolved value.

---

将 async 关键字添加到使用 getData() 的所有函数，并在调用 getData() 时使用 await 关键字:

async function seedData() {
  // ...
  let data = await getData();
  // ...

function updateData() {
  var now = new Date();
  let data = await getData();
  // ...