javascript - 等待 Ajax 请求绘制图表
问题描述
我在使用 javascript 代码时遇到问题。我正在尝试使用动态图表,它将在使用 plotly.reshape 函数更改选择字段时更新。我在 chart() 函数内部调用了一个基于 Ajax 请求的函数,我希望它等待变量赋值,然后绘制图表。我想我在错误的地方使用了异步/等待。你们能帮帮我吗?这是我的第一个 js 脚本,但我在项目中需要它。
function chart(){
var x = Chart();
var X =x[0];
var Close=x[1];
var High=x[2];
var Low=x[3];
var Open=x[4];
console.log(X);
var trace1 = {
x: X,
close: Close,
decreasing: {line: {color: '#7F7F7F'}},
high: High,
increasing: {line: {color: '#17BECF'}},
line: {color: 'rgba(31,119,180,1)'},
low: Low,
open: Open,
type: 'ohlc',
xaxis: 'x',
yaxis: 'y'
};
var data = [trace1];
var layout = {
...
};
Plotly.newPlot('chart', data, layout);
}
function Chart(){
var data, date = [], price = [], open=[], Timestamp=[], High=[], Low = [];
let selectedItem = document.getElementById('currency-selector').value;
var url = `http://127.0.0.1:8000/${selectedItem}/`;
var x = new Array()
var requestURL = url; //URL of the JSON data
var request = new XMLHttpRequest({mozSystem: true}); // create http request
request.onreadystatechange = async function() {
if(request.readyState == 4 && request.status == 200) {
data = JSON.parse(request.responseText);
for (var i=0; i<data.length;i++) {
date.push(data[i].date)
price.push(data[i].close);
High.push(data[i].high);
open.push(data[i].Open);
Low.push(data[i].low);
}
//chart(date,price,High,Low,open);
}
await request.open('GET', requestURL, true);
request.send(); // send the request
}
return [date,price,High,Low,open];
}
解决方案
由于设置的原因,我无法对此进行测试,但这应该可以工作......并按照您期望的顺序返回内容。
这是使用 fetch api,它通常比 xmlhttp request api 干净得多。
但是你知道,async 是包含 await 的函数的标签。并且 .then() 是如何在这样的回调中对事物进行排序......等待的值将在返回等待的值之前先执行每个然后。
async function Chart(){
let date = [], price = [], open=[], Timestamp=[], High=[], Low = [];
let selectedItem = document.getElementById('currency-selector').value;
let url = `http://127.0.0.1:8000/${selectedItem}/`;
let requestURL = url; //URL of the JSON data
return await fetch(requestURL)
.then(res=>res.json())
.then(data=>{
data.forEach(x=>{
date.push(x.date)
price.push(x.close);
High.push(x.high);
open.push(x.Open);
Low.push(x.low);
})
})
.then(()=>{
return [date,price,High,Low,open];
})
}
推荐阅读
- java - 如何在Java中获取for循环的最后一个值?
- windows - 在 Windows 上突出显示或下划线输出到标准输出
- java - 用于连续重复字母、数字和特殊字符的 Java 正则表达式
- javascript - Angular 6 typescript 与 KotlinJs 的集成
- reactjs - React 中的 .map() 问题
- python - 关于 Disconnected-RNN 的问题(发布于 ACL 2018)
- c++ - 为什么弹出我的堆栈返回垃圾而不是初始变量?
- adobe-indesign - 如何根据 Extendscript for Indesign 中的名称导出 xml 标签之间的内容?
- python - 我的 django 创建用户和配置文件信号不起作用
- debugging - dlv 附加
[二进制位置] 拒绝访问