javascript - 递归函数中的 promise

Question

我有以下代码:

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 < children.length; i++) {
    var child = children[i];

    if (child.tagName.indexOf('-') >= 0) {
      load(child.tagName.toLowerCase(), parent);
    }
    else {
      var parsedNode = parseNode(child, context);
      parent.appendChild(parsedNode);
      if (child.hasChildNodes())
        parse(child, parsedNode, context);
    }
  }
}

基本上，这就是它应该做的:

1. 在我的 app.js 中调用 load函数，将导入两个文件，一个 html和一个js ，当这些请求的 promise 得到满足时，它会调用一个名为 parse 的函数。它将循环到 HTML 中并使用 JS 文件中声明的类解析一些字符串。
2. 在循环内部，可以找到一些自定义标签，例如 <my-element> ，然后，它将尝试加载 my-element.html和 my-element.js ，它也会在该 HTML 中循环。
3. 正如您在代码中看到的那样，我传递了父级和上下文，因此在完成所有循环之后，“大”父级应该包含所有其他组件。

问题

自 load函数返回一个 promise ，我同步调用它，它立即返回，因此， child 没有放在正确的 parent 中。

如果我在 C# 中这样做，例如，或者使用 ES7 async和 await关键字，那会很容易。但我不知道我怎么调用它 load异步运行。有什么猜测吗？

Answer 1

如果一个函数是异步的，它应该返回一个 promise 。总是。甚至(或:特别是)在 then 回调中。

如果您在该循环中产生多个 promise ，您可以通过 Promise.all 等待它们:

function load(lab, el) {
  return Promise.all([Util.loadHtml(lab), Util.loadScript(lab)])
    .then(function(responses) {
      return 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; });

  return Promise.all(children.map(function(child, i) {
//^^^^^^^^^^^^^^^^^^

    if (child.tagName.indexOf('-') >= 0) {
      return load(child.tagName.toLowerCase(), parent);
//    ^^^^^^
    } else {
      var parsedNode = parseNode(child, context);
      parent.appendChild(parsedNode);
      if (child.hasChildNodes())
        return parse(child, parsedNode, context);
//      ^^^^^^
    }
  }));
}

If I was doing that in C#, for example, or with the ES7 async and await keywords, that would be pretty easy. But I have no idea how can I call that load function asynchronously

是的，你真的应该考虑使用那些。或者您可以使用 ES6 生成器函数和运行器(由许多流行的 promise 库提供)来模拟它们。但无论如何你都在使用转译器，对吧？

用它们编写 load 会很容易:

async function load(lab, el) {
  var responses = await Promise.all([Util.loadHtml(lab), Util.loadScript(lab)]);
  return parse(responses[0], el, responses[1]);
}