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

Posted 2023-02-27

【中文标题】在同步函数和 for 循环中获取 API

【英文标题】：Fetch API in sync functions and for loop

【发布时间】：2019-09-11 03:27:27

【问题描述】：

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 以外的其他东西？

【参考方案1】：

async function - javascript | MDN

异步函数可以包含等待表达式 暂停异步函数的执行并等待 通过了 Promise 的决议，然后恢复异步函数的 执行并返回解析后的值。

---

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

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

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