Fetch()和array.push()之后的数组空

我有一个API调用,它使用回调迭代返回的JSON,然后我想将结果输出到控制台.问题是我觉得即使这应该异步进行,我也在使用then()调用,我认为它会等待返回并正确打印出来.但是在第一次调用时,它会在控制台中打印出一个空数组,然后在第二个按钮上按下它会正确记录数组.

function getPrice() {
  var valueArray = [];

  var symbol = document.getElementById("symbol_input").value;
  var url = "https://api.iextrading.com/1.0/stock/" + symbol + "/chart"
  fetch(url)
    .then(res => res.json())
    .then(function(res) {
      res.forEach(element => {
        valueArray.push(element);
      });
    })
    .then(console.log(valueArray))
    .catch(err => console.log(err));
}

Get Price

function getPrice() {
  var valueArray = [];

  var symbol = document.getElementById("symbol_input").value;
  var url = "https://api.iextrading.com/1.0/stock/" + symbol + "/chart"
  fetch(url)
    .then(res => res.json())
    .then(function(res) {
      res.forEach(element => {
        valueArray.push(element);
      });
    })
    .then(() => console.log(valueArray))
    .catch(err => console.log(err));
}

Get Price