How to combine a .map() with a promise? : <p>I have an array and I need, for each element of this array, to <code>fetch</code> some data (dependent on the element) and add this data to the element in the array.</p>

<p>To set an example, I will simulate the <code>fetch</code> with a Promise (in real life, this will be the answer of a webservice):</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let p = new Promise((resolve, reject) =&gt; resolve('x'))
let a = ['a', 'b']
a = a.map(x =&gt; p.then(y =&gt; x + y))
console.log(a)</code></pre>
</div>
</div>
</p>

<p>What I expected is to have for the first element (<code>a</code>) <code>p</code> being called, and upon resolution the result added to <code>a</code> (giving <code>ax</code>). Same for <code>b</code>.</p>

<p>Ultimately I expected a new array <code>['ax', 'bx']</code>.</p>

<p>What I get instead is an array of Promises</p>

<p>Being quite new to Promises (which I find in theory wonderful) I have a hard time understanding what went wrong here. <strong>Is it possible to combine <code>.map()</code> and asynchronous actions within?</strong></p>
