Javascript 方法清除数组，然后将其填充到空数组中

我目前正在尝试清空一个数组，然后在调用上覆函数的每次迭代时用从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
        })
}

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
    //...
}

我非常确定callAPI（）函数在各个点上都能从console.log（）正确地完成它的工作

但是，当我在forEach语句之前输入console.log（array.length）时，结果是0。我了解到console.log在这种情况下可能不是最准确的，但是：

• 在clearArray（）函数之后添加console.log（数组）- 但是在callAPI（）之前-在 控制台
• 在callAPI（）之后添加console.log（数组）也是一样的 打电话来
• console.log（array.length）任意位置的结果为0
• 在调用每个函数之前和之后使用断点总是显示数组为空

我尝试使用回调强制它等待，如下所示：

callAPI（回调）

getInfo（）：

但我也遇到了同样的错误

使用

wait

for fetch（url）得到的结果完全相同

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

---

我对JavaScript还比较不熟悉，所以如果需要任何进一步的信息，我完全可以提供。

在回调情况下，必须从

然后

中的一个调用它。在

回调中

使用

数组。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);

对于async/await（Promissions），您需要使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(...);
}

或

---

在回调情况下，它必须从

中的一个调用，然后从
调用。在
回调中
使用
数组。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);

对于async/await（Promissions），您需要使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(...);
}

或

您的代码表现出这种行为的原因是javascript在看到异步代码时不会停止

这就是正在发生的事情

当JavaScript进入函数
getInfo
时，它执行
clearArray
并转到下一条指令
callAPI
。然后它会看到
callAPI
包含异步代码。然后，它立即将这段异步代码发送到Web API来处理它，这样它就不用等待了。然后转到下一条指令
forEach
（而异步代码仍由Web API执行）。在那个时候，异步代码中的承诺还没有得到解决，这意味着对象还没有被推送到全局数组中，所以数组仍然是空的

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

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

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
    //...
}

您的代码表现出这种行为的原因是javascript在看到异步代码时不会停止

这就是正在发生的事情

当JavaScript进入函数
getInfo
时，它执行
clearArray
并转到下一条指令
callAPI
。然后它会看到
callAPI
包含异步代码。然后，它立即将这段异步代码发送到Web API来处理它，这样它就不用等待了。然后转到下一条指令
forEach
（而异步代码仍由Web API执行）。在那个时候，异步代码中的承诺还没有得到解决，这意味着对象还没有被推送到全局数组中，所以数组仍然是空的

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

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

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
    //...
}

显示实际代码，或者如果实际代码受到限制，则创建表示问题的代码。如果clear和callAPI函数不是异步的（也不使用异步请求），则依次调用，并且这两个函数都在访问同一个数组，则不会出现问题。您确定callAPI没有通过
fetch（）
或
XMLHTTPRequest
使用某些异步请求吗。后者需要被明确告知发出同步请求。抱歉-callAPI正在使用fetch，但我之所以说它不是异步的，是因为我尝试在fetch（url）前面使用
wait
，控制台在那一行给了我一个“wait仅在异步函数中有效”错误。我也尝试过对callAPI函数使用回调，但最终结果仍然是array.length为0。我将更新我的问题以显示更好的代码，包括我尝试的回调，感谢警告。好的，所以我意识到我需要将函数标记为async，所以我成功地将wait放在获取之前以及它将响应转换为json时。但数组仍然显示为空，这是相同的问题。显示实际代码，或者如果实际代码受到限制，则创建一个表示问题的数组。如果clear和callAPI函数不是异步的（也不使用异步请求），则依次调用，并且这两个函数都在访问同一个数组，则不会出现问题。您确定callAPI没有通过
fetch（）
或
XMLHTTPRequest
使用某些异步请求吗。后者需要被明确告知发出同步请求。抱歉-callAPI正在使用fetch，但我之所以说它不是异步的，是因为我尝试在fetch（url）前面使用
wait
，控制台在那一行给了我一个“wait仅在异步函数中有效”错误。我也尝试过对callAPI函数使用回调，但最终结果仍然是array.length为0。我将更新我的问题以显示更好的代码，包括我尝试的回调，感谢警告。好的，所以我意识到我需要将函数标记为async，所以我成功地将wait放在获取之前以及它将响应转换为json时。但是数组仍然是空的，同样的问题。谢谢你，修复了它。我对整个异步概念仍然很不了解，但您的回答会有所帮助