title: Await in catch block fails inside forEach
body: <p>I have an array-like structure that exposes async methods. The async method calls contain try-catch blocks which in turn expose more async methods in the case of caught errors. I'd like to understand why <code>forEach</code> doesn't play nicely with <code>async</code>/<code>await</code>.</p>
  
  <pre><code>let items = ['foo', 'bar', 'baz'];
  
  // Desirable behavior
  processForLoop(items);
  /* Processing foo
   * Resolved foo after 3 seconds.
   * Processing bar
   * Resolved bar after 3 seconds.
   * Processing baz
   * Resolved baz after 3 seconds.
   */
  
  // Undesirable behavior
  processForEach(items);
  /* Processing foo
   * Processing bar
   * Processing baz
   * Resolved foo after 3 seconds.
   * Resolved bar after 3 seconds.
   * Resolved baz after 3 seconds.
   */
  
  async function processForLoop(items) {
      for(let i = 0; i &lt; items.length; i++) {
          await tryToProcess(items[i]);
      }
  }
  
  async function processForEach(items) {
      items.forEach(await tryToProcess);
  }
  
  async function tryToProcess(item) {
      try {
          await process(item);
      } catch(error) {
          await resolveAfter3Seconds(item);
      }
  }
  
  // Asynchronous method
  // Automatic failure for the sake of argument
  function process(item) {
      console.log(`Processing ${item}`);
      return new Promise((resolve, reject) =&gt;
          setTimeout(() =&gt; reject(Error('process error message')), 1)
      );
  }
  
  // Asynchrounous method
  function resolveAfter3Seconds(x) {
      return new Promise(resolve =&gt; setTimeout(() =&gt; {
          console.log(`Resolved ${x} after 3 seconds.`);
          resolve(x);
      }, 3000));
  }
  </code></pre>