如何在嵌套的 async/await 函数中返回数据答案

【问题标题】：How to return data in nested async/await function如何在嵌套的 async/await 函数中返回数据
【发布时间】：2021-03-10 11:33:02
【问题描述】：

我正在使用node-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;
}

【问题讨论】：

标签： javascript typescript async-await

【解决方案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;
}

【讨论】：

太棒了，它现在可以工作了！感谢您的明确解释。

【解决方案2】：

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

Using async/await with a forEach loop

【讨论】：