在 forEach 中使用时等待 return 预期数据，但在地图中承诺

Question

我无法理解所采用的两种方法之间的区别。

我有一个 Promise.All 按预期工作，之后，使用 then 函数从响应中提取数据。我不明白为什么如果我使用 forEach 方法我会打印数据，但如果我使用地图方法我会得到 return Promises。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        Promise.all(
            ["koop4", "gVenturi", "aledocdonnini" ].map(  user => fetch( 'https://api.github.com/users/'+user+'/repos', { method: 'GET'})  )
        ).then( res => {
            // this works properly
            const data = [];
            res.forEach( async r  => { 
              data.push(await r.json()); 
            });
            return data;
            // this return promises
            /* return res.map( async r  => await r.json() n)*/
        }).then(console.log)
    </script>
</head>
<body>
    
</body>
</html>

Answer 1

使用map代替forEach

Promise.all([
    "koop4",
    "gVenturi",
    "aledocdonnini"
].map(user => fetch("https://api.github.com/users/" + user + "/repos", {method: "GET"})))
    .then(res => Promise.all(res.map(r => r.json())))
    .then(console.log);

或者先做 .json() map 我认为更干净

Promise.all([
    "koop4",
    "gVenturi",
    "aledocdonnini"
].map(user => fetch("https://api.github.com/users/" + user + "/repos", {method: "GET"}).then(r => r.json())))
    .then(console.log);

在 forEach 中使用时等待 return 预期数据，但在地图中承诺

Await return expected data when used within forEach but promise within map

javascript

foreach

array-map

async-await