javascript - 在同步函数和 for 循环中获取 API
问题描述
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 以外的东西?
解决方案
异步函数可以包含一个 await 表达式,它暂停异步函数的执行并等待传递的 Promise 的解析,然后恢复异步函数的执行并返回解析的值。
在调用时将关键字添加async
到所有使用getData()
和使用关键字的函数中:await
getData()
async function seedData() {
// ...
let data = await getData();
// ...
function updateData() {
var now = new Date();
let data = await getData();
// ...
推荐阅读
- python - 如果组在指定列表中,如何根据组对组的值求和?
- javascript - 使用带有firestore的异步函数返回未定义的数组
- c - GCC 优化魔法
- c# - C# Entity Framework 代码首先无法将相关数据添加到对象列表中
- mysql - 任何自动化 mySQL 查询验证的好工具?
- html - 如何使一些图像显示在带有文本的 div 下?
- vmware-clarity - 如何使用清晰的库迁移到 Angular 10?
- python - 如何将多个 .pcd 文件组合成一个包含点云数据(python)的 .pcd 文件?
- r - 在 R 中计算月份数
- apollo-server - 如何在 React Relay 和 Apollo Server 中使用持久查询