Array Empty After Fetch() and array.push()

Question

我有一个对API的fetch调用，该调用使用回调迭代返回的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));
}

<input type="input" id="symbol_input">
<button id="priceButton" onclick="getPrice()">Get Price</button>

Answer 1

.then接受函数作为参数，而不是像.then(console.log(valueArray))那样的简单语句。这样做，console.log将立即执行(在fetch完成之前(。

请改用函数。(要使用的示例输入："abc"(

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));
}

<input type="input" id="symbol_input">
<button id="priceButton" onclick="getPrice()">Get Price</button>