如何在嵌套的异步/等待 function 中返回数据

Question

我正在使用node-vibrant vibrant api 来检索调色板，但即使我已将async-await放入代码中，它似乎也为时已晚。

绝对不会等待，因为我在下面输入的 console.log 显示modified->transformed->new data 。

我不确定我遗漏了什么或意外添加了什么，因为我已经多次将代码分解了，这让我感到困惑。

if(artist == 'picasso'){
   transformedData = await transformPage(data, artistObject)
}

export async function transformPage(pageData: PageData, artist: any){
    pageData.components.forEach(async function(component){
        if(component == 'header'){
            await transformHeader(component.attributes, artist);
        }
    });

    console.log('transformed');

    return pageData;
}

function transformHeader(attributesFragment: any,  artist: any) {
    generateColourPalette(attributesFragment['container'], artist).then(modified => attributesFragment['container'] = modified);

    console.log('modified');
        
    return attributesFragment;
}

async function generateColourPalette(container: any,  artist: any) {
    const albumCover = artist['image']['url'];
    
    const v = new Vibrant(albumCover);
    const palette = (await v.getPalette()).Vibrant?.hex;
    container['backgroundColour']= palette;

    console.log('new container'); 
    
    return container;
}

Answer 1

为了让事情更清楚，我尝试注释掉代码并用我的建议替换它们

export async function transformPage(pageData: PageData, artist: any){
    // Instead of the forEach you need to use the Promise with a map function to properly handle nested async
    // pageData.components.forEach(async function(component){
    //     if(component == 'header'){
    //         await transformHeader(component.attributes, artist);
    //     }
    // });
    await Promise.all(pageData.components.map(async function(component){
        if(component == 'header'){
            await transformHeader(component.attributes, artist);
        }
    }));
    console.log('transformed');

    return pageData;
}
// Here you need to add async in front of you function
// function transformHeader(attributesFragment: any,  artist: any) {
async function transformHeader(attributesFragment: any,  artist: any) {
    // for constency in your code keep using the async/await 
    // generateColourPalette(attributesFragment['container'], artist).then(modified => attributesFragment['container'] = modified);
    const modified = await generateColourPalette(attributesFragment['container'], artist)
    attributesFragment['container'] = modified

    console.log('modified');
        
    return attributesFragment;
}

async function generateColourPalette(container: any,  artist: any) {
    const albumCover = artist['image']['url'];
    
    const v = new Vibrant(albumCover);
    const palette = (await v.getPalette()).Vibrant?.hex;
    container['backgroundColour']= palette;

    console.log('new container'); 
    
    return container;
}

Answer 2

当前，“transformPage”会触发许多异步 function 调用，但不会等待这些调用，因此 function 会立即返回。 您可以在“for... of”循环中等待，也可以同时等待多个请求。 一些有用的信息可以在这里找到：

将 async/await 与 forEach 循环一起使用