Question

我目前正在尝试清空一个数组，然后在每次调用覆盖函数的每次迭代中，都使用API从API抓取的信息填充该数组，全部使用JavaScript。

function getInfo() {
    clearArray()

    // call the API
    callAPI()

    // push arrayObjects into DOM
    array.forEach(object => {
        // do stuff with it
    }
}

clearArray（）将数组的长度设置为零：

function clearArray() {
    array.length = 0
}

callAPI（）是提取函数：

function callAPI() {
    fetch(urlG)
        .then(response => response.json())
        .then(function(response) {
            // parse and then push objects into global array
        })
}

我很确定在各个方面都可以从console.log（）调用callAPI（）函数正确地完成工作。

但是，当我在forEach语句之前使用console.log（array.length）时，它变为0。我读到在这种情况下console.log可能不是最准确的，但是：

在clearArray（）函数之后添加console.log（array）- 但在callAPI（）之前-打印出正确填写的数组控制台。
在callAPI（）之后添加console.log（array）的方法是叫。
console.log（array.length）任何地方都为0。
在每个函数被调用之前和之后使用断点总是显示该数组为空。

我尝试使用回调强制其等待，例如：

callAPI（回调）

function callAPI(callback) {
    fetch(url)
        .then(response => response.json())
        .then(function(response) {
            // do stuff
        })
    callback()
}

getInfo（）：

function getInfo() {
    // reset news array
    clearArray()

    // call the news APIs
    callAPI(function() {

        console.log(array.length)
        // push arrayObjects into DOM
        array.forEach(arrayObject => {
            // do stuff
        })
    }
}

但是我遇到了同样的错误。

使用await获取fetch（url）会遇到同样的问题。

async function callAPI() {
    let response = await fetch(url)
    let json = response.json()
    let results = json.response.results
    // do stuff
}

我还是不太熟悉JavaScript，因此如果需要任何进一步的信息，我绝对可以提供。

Answer 1

在回调情况下，必须从then之一调用它。在callback中使用array.forEach

function handleData(array){
  array.forEach(...);
}

function callAPI(callback) {
    fetch(url)
        .then(response => response.json())
        .then(function(response) {
          callback(response)
        })
        //or this, both are equivalent
        then(callback)
}

callAPI(handleData);

对于异步/等待（承诺），您需要使callAPI成为异步函数并正确使用它：

async function callAPI() {
    let response = await fetch(url)
    //json() also returns a promise so you have to await that as well
    let array = await response.json();
    array.forEach(...);
}

或

async function callAPI() {
    let response = await fetch(url)
    let array = await response.json();
    return array;
}

callAPI().then(function(array){
  array.forEach(...);
})

Answer 2

您的代码之所以会这样，是因为javascript在看到异步代码时不会停止。

这就是正在发生的事情。

当JavaScript输入您的函数getInfo时，它将执行clearArray并转到下一条指令callAPI。然后，它看到callAPI包含异步代码。然后，它立即将那段异步代码发送到Web API进行处理，因此它不会等待。然后，它转到下一条指令forEach（而异步代码仍由Web API执行）。那时异步代码中的承诺尚未解决，这意味着对象尚未被推送到全局数组中，因此该数组仍为空。

因此，这是一种通过在async/await函数中使用callAPI来解决此问题的方法：

function async callAPI() {
    const apiResponse = await fetch(urlG) //pause and get apiResponse before continuing execution
    const jsonResponse = await apiResponse.json() //pause and get jsonResponse before continuing execution

    //parse and then push objects into global array
    //...
}

清除数组然后填充它的方法最终变成一个空数组

2 个答案: