javascript - 数组对象循环中的问题 javascript

Question

这个问题已经有答案了:

How do I return the response from an asynchronous call? (42 个回答)

已关闭 3 年前。

当我不习惯从 api 调用 forEach 我的数组对象时，我遇到了麻烦，当我运行 forEach 时，控制台不显示任何内容，我的代码和我的数组对象如下所示:

function renderingData(){
    const ra = fetching()
    console.log(typeof(ra))
    console.log(ra)
    ra.forEach( as => console.log(as))
}
renderingData()

数组中共有 224 个对象，而我的 forEach 也不起作用，这是我的抓取功能:

function fetching() {
    let result = []
    fetch("the-url", {
        "method": "GET",
        "headers": {
            "x-rapidapi-host": "the-host",
            "x-rapidapi-key": "the-key"
        }
    })
    .then(res => res.json())
    .then(res => res.response.forEach( d => {
        let ar = {
            negara:d.country,
            positif:d.cases.active,
            sembuh:d.cases.recovered,
            meninggal:d.deaths.total,
            total:d.cases.total
        }
        result.push(ar)
    }))
    return result
}

但是当我尝试测试写入数组时，如下所示:

function renderingData(){
    // const ra = fetching()
    const rr = [{negara: "China", positif: 723, sembuh: 77474, meninggal: 4633, total: 82830},
    {negara: "Italy", positif: 105813, sembuh: 66624, meninggal: 26977, total: 199414},
    {negara: "Spain", positif: 85069, sembuh: 120832, meninggal: 23521, total: 229422},
    {negara: "Germany", positif: 37839, sembuh: 114500, meninggal: 6050, total: 158389}
    ]
    console.log(typeof(rr))
    console.log(rr)
    rr.forEach( as => console.log(as))
}
renderingData()

一切正常，forEach 正常工作，请问如何解决这个问题？

Answer 1

您误解了 Promise 的异步性质。别担心，它们很复杂。

如果我必须给你 Sparknotes，你就不会再使用 return 了。

让我们看看您的获取函数:

function fetching() {
    let result = []
    fetch("the-url", {
        "method": "GET",
        "headers": {
            "x-rapidapi-host": "the-host",
            "x-rapidapi-key": "the-key"
        }
    })
    .then(res => res.json())
    .then(res => res.response.forEach( d => {
        let ar = {
            negara:d.country,
            positif:d.cases.active,
            sembuh:d.cases.recovered,
            meninggal:d.deaths.total,
            total:d.cases.total
        }
        result.push(ar)
    }))
    return result
}

你发现了吗？

您正在混契约(Contract)步和异步方法。在函数顶部，将 result 声明为空数组。之后，您开始获取。

返回不会等待 promise 完成，提取会自行进行，并且您的返回会立即发生(在您的任何数据到达之前)回来!)

发生的情况是这样的:

fetching called ----------> return result (empty array)
|
|
|
(eventually, some time later)
|
|
|
V
Promise fulfilled, data is sent back

或者，作为列表:

1. 调用您的抓取函数
2. 您创建一个空结果数组并开始提取
3. 您返回空数组
4. 一段时间后，数据返回。你错过了!

您可以采取多种措施来解决此问题。一种较旧的方法是使用回调。

function fetching(callback){
    // After the forEach, but still in the .then:
    if(callback) callback(result);
}

一些更好的方法是返回你自己的 promise 。您可以使用 new Promise() 对象。实现起来并不复杂。

当然，两者都需要您修改 renderingData 函数。

最后，如果您不关心 Internet Explorer(我不关心!)，您可以使用我最喜欢的 async 和 await。它使代码更具可读性。

研究所有这些替代方案并使用您觉得舒服的!

这是一个使用 async 和 await 的简短示例，现代解决方案(同样，如果您尝试使 Internet Explorer 会感到不安它运行这个)!

async function fetching(){
    let result = []
    let data = await (await fetch(url, options)).json();
    data.forEach(...);
    return data;
}

并使用获取功能:

let results = await fetching();

这就是我推荐异步和等待的原因!代码更加简洁，看!您仍然可以像普通函数一样使用 return!真好。

请注意，任何使用await 的函数都需要标记为异步。这意味着您需要更改:

async function renderingData

...还有