等待Ajax请求绘制图表

Question

我的javascript代码有问题。我正在尝试使用动态图表，它将在使用plotly.resure函数更改选择字段时更新。我在chart((函数中调用了一个基于Ajax请求的函数，希望它等待变量赋值，然后绘制一个图表。我认为我在错误的地方使用了async/await。你们能帮我吗？这是我的第一个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];
}

Answer 1

由于设置的原因，我无法测试它，但它应该可以工作。。。并按您期望的顺序退货。

这是使用fetchapi，它通常比xmlhttp请求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];
})
}