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接受 function 作为参数，而不是像.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>

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

1 个答案: