Fetch（）和array.push（）之后数组为空

Question

我有一个对API的访存调用，该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)); } 

 <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>