title: Promises inside a recursive function
body: <p>I have the following code:</p>
  
  <pre><code>function load(lab, el) {
    return Promise.all([Util.loadHtml(lab), Util.loadScript(lab)])
      .then(function(responses) {
        parse(responses[0], el, responses[1]);
      });
  }
  
  function parse(html, parent, context) {
    var children = [].slice.call(html.childNodes).filter(function (item) { return item.nodeType === 1 || item.nodeType === 3; });
  
    for (var i = 0; i &lt; children.length; i++) {
      var child = children[i];
  
      if (child.tagName.indexOf('-') &gt;= 0) {
        load(child.tagName.toLowerCase(), parent);
      }
      else {
        var parsedNode = parseNode(child, context);
        parent.appendChild(parsedNode);
        if (child.hasChildNodes())
          parse(child, parsedNode, context);
      }
    }
  }
  </code></pre>
  
  <p>Basically, that's what it should do:</p>
  
  <ol>
  <li>In my app.js I call the <code>load</code> function, that will import two files, one <code>html</code> and one <code>js</code>, and when the promise of those requests is fullfilled, it calls a function named <code>parse</code> which will loop into the HTML and will parse some strings with the class declared in the JS file.</li>
  <li>Inside the loop, it's possible to find some custom tag, for example <code>&lt;my-element&gt;</code>, and then, it will try to load <code>my-element.html</code> and <code>my-element.js</code>, and it will loop inside that HTML too.</li>
  <li>As you can see in the code, I pass the parent and the context, so after finishing all the loopings, the 'big' parent should have all the other components inside it.</li>
  </ol>
  
  <p><strong>The problem</strong></p>
  
  <p>Since the <code>load</code> function returns a promise, and I'm calling it synchronously, it immediately returns, and for that reason, the children is not placed inside the correct parents.</p>
  
  <p>If I was doing that in C#, for example, or with the ES7 <code>async</code> and <code>await</code> keywords, that would be pretty easy. But I have no idea how can I call that <code>load</code> function asynchronously. Any guesses?</p>