在等待的函数之前执行具有等待的函数答案

【问题标题】：Function with await being executed before the awaited function在等待的函数之前执行具有等待的函数
【发布时间】：2021-04-02 11:52:40
【问题描述】：

我需要根据 GET 请求创建图表。

为此，我有 3 个功能应按以下顺序执行：

1 - EventListener 触发绘制图表的函数。

2 - 请求对象绘制图表的函数。

3 - 绘制图表的函数。

由于某种我无法理解的原因，绘制图表的函数似乎在 GET 请求之前就准备好了。

我尝试为绘制图表的函数和请求对象的函数提供 Async/Await。但是我做错了什么：

searchForm.addEventListener("submit" , function(event)
    {
        event.preventDefault(); // Evita a submissão normal do formulário  
        changeLogoImage(searchBar.value);
        giveCompanieSymbol(searchBar.value);
        turnDisplayBlock(mainContainer);
        console.log('This should come first')
        displayChart();
    }
)


async function displayChart()
    {   
        await objectForChart();
        console.log('This should come last');
        let ano = arrayOfMonths.slice(0,10)
        var chart = new Chart(ctx, {
        (...)
     }

async function objectForChart()
{
    let http = new XMLHttpRequest();

    http.open('GET' , 'url');
    http.send();

    http.onreadystatechange = function() 
    {
        if (http.readyState == XMLHttpRequest.DONE) 
        {
            let responseObject = JSON.parse(http.response);

            for(let month in responseObject['Monthly Time Series'] )
            {
                arrayOfMonths.push(month);
            }
            console.log('This should come 2nd');
        }
    }
}

控制台按以下顺序为我提供日志：

-这应该是第一位的

-这应该是最后一个

-这应该排在第二位

【问题讨论】：

标签： async-await es6-promise

【解决方案1】：

您需要等待objectForChart 中的请求。尝试使用 fetch（基于承诺）而不是 XMLHttpRequest（基于回调）。

async function objectForChart() {
  const data = await fetch(url);
  return data.json();
}

【讨论】：