如何通过跨多个页面的异步获取请求将数据存储在数组中？

问题描述

我目前正在浏览不同的页面以收集满足特定条件的对象。如果我用 console.log 而不是返回的对象替换最后一行，我的代码就可以工作。我试图理解为什么在处理完所有内容后最后返回 no 对象。

async function getobjects(threshold) {
    let pages
    let objectNames = []
    
    const extractObjects = (json) => {
        for (const object of json.data) {
            if (object.item_count > threshold) objectNames.push(object.titleName);
        }
    }
    
    const getFirstPage = await fetch('https://website.com/apI/Objects').then(response => response.json()).then(json => {
        pages = json.total_pages
        extractObjects(json)
    });
    
    for (let i=0;i<pages;i++) {
        await fetch(`https://website.com/apI/Objects?page=${i+1}`).then(response => response.json()).then(json => {
        extractObjects(json)
    });
    }
    return objectNames
    
}

解决方法

不管怎样，asynchronous function 总是返回一个 Promise。即使什么都没有返回。在您的示例中，有一个返回语句 return objectNames。无论在函数内发生什么。您的函数在一天结束时返回 Promise Object。

因此，无论您在何处调用 getObjects，都可以在它之后使用 then() 块来检查从 async 函数返回的结果。

getObject().then(data=>console.log(data)).catch(err=>console.log(err))

Async-Await 演示示例： https://codepen.io/emmeiWhite/pen/PoGQpzE?editors=0011