等待 Ajax 请求绘制图表

Question

我遇到了 javascript 代码的问题。我正在尝试动态图表，它将在使用 plotly.reshape 函数更改选择字段时更新。我在 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

由于设置的原因，我无法对此进行测试，但这应该可以工作……并按照您期望的顺序返回东西。

这是使用 fetch api，它通常比 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];

    })

 }