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>