javascript - 回调/Promise 嵌套循环，2 个 API 调用

Question

我对这个标题表示歉意，我找不到更好的标题。如果这个问题已经有了答案，请随时在下面的评论中告诉我，我会立即删除它，但请记住，这不是一个一般性问题。

说明:有一个 API 调用将从服务器(一个数组)获取数据，然后根据该数组启动一个循环，在循环内我们有另一个基于父索引的 API(子进程使用父索引进行 API 调用)并且获取一些数据并将它们映射到变量(数组)中。我需要在最后一个父级的最后一个子级完成其工作后调用回调。

<小时/>

模仿代码:

for(let i=0;i<2;++i){
    for(let j=0;j<2;++j){
        map data into another array with predefined shape
        console.log(i +", "+ j)
    }
}
console.log('good to go for callback');

理想的结果

0, 0
0, 1
1, 0
1, 1
good to go for callback

<小时/>

真实代码:

var projects = api.getProjects(req);

projects.then(function(response){
    response.projects.map(_e => {
        var project = api.getProjectContent(_e.id);
        project.then(function(_response){
            _response.content.map(e=> {
                a_globa_array.push(...);
                console.log('hello');
            });
        });
    });

    console.log('yellow');
});

我想在将每个父级的每个子级插入数组后，在控制台中打印“黄色”(或获取数组的长度)。

<小时/>

到目前为止我尝试过的:

var projects = api.getProjects(req);

projects.then(function(response){
    Promise.all(response.projects.map(_e => {
        var project = api.getProjectContent(_e.id);
        project.then(function(_response){
            _response.content.map(e=> {
                a_globa_array.push(...);
                console.log('hello');
            });
        });
    })).then(()=>{ console.log('yellow'); });
});

还有

var projects = api.getProjects(req);

projects.then(function(response){
    let pr = new Promise((resolve, reject) => {response.projects.map(_e => {
        var project = api.getProjectContent(_e.id);
        project.then(function(_response){
            _response.content.map(e=> {
                a_globa_array.push(...);
                console.log('hello');
            });
        });
    })) });

    pr.then(()=>{ console.log('yellow'); });
});

还有更多。上面代码中的拼写错误并不重要，因为我是在 SO 编辑器中编写它们的，所以也许我错过了一些括号/大括号。附加信息:没有错误。如果您认为有更好的解决方案而不是 promise (异步/等待...)，请告诉我并分享您的想法。

Answer 1

你的第一次尝试并不遥远。您只需不要忘记从回调中返回 promise ，例如then 或 Promise.all 可以等待它们:

projects.then(function(response){
    return Promise.all(response.projects.map(_e => {
//  ^^^^^^
        var project = api.getProjectContent(_e.id);
        return project.then(function(_response) {
//      ^^^^^^
            return _response.content.map(e=> {
//          ^^^^^^
                console.log('hello');
                return ...;
//              ^^^^^^
            });
        });
    }));
}).then(array_of_arrays => {
//      ^^^^^^^^^^^^^^^ you get the results here
    // you can un-nest this then() call
    console.log('yellow');
});