javascript - 如何重构这个 promise 回退？

Question

这是一个经典的后备解决方案。如果第一个 el 没有被渲染，那么它会使用其他渲染器重试。如何最好地重构它？

这段代码的问题在于:

• 渲染器需要位于数组中，但在这里，它们位于 then block 中。
• 当先前的渲染器无法工作时，它们需要切换到另一个渲染器
• 第一个渲染器与第二个渲染器和其他渲染器具有相同的算法。它检查结果是否为空。那里有重复。但是，第一个需要先运行，第二个和其他可以一起运行，只要其中一个返回结果就可以停止。

let first = $('#id1');

return this.render('priorityRenderer', first).then(isEmpty => {

  let els = [
    $('#id2'), $('#id3')
  ];

  if (isEmpty) {
    // put back the first el to the pool to render it again below
    els.unshift(first);
  }

  return Promise.all(els.map(el => {
    return this.render('secondaryRenderer', el)
      .then(result => {
        if (result) {
          return result;
        } else {
          return this.render('3thRenderer', el)
        }
      })
      .then(result => {
        if (result) {
          return result;
        } else {
          return this.render('4thRenderer', el)
        }
      })
      .then(result => {
        if (result) {
          return result;
        } else {
          return this.render('5thRenderer', el)
        }
      });
    })
});

Answer 1

您可以使用 these approaches 之一调用渲染器链直到第一个渲染器返回结果:

renderers(rs, el, i=0) {
    if (i < rs.length)
        return this.render(rs[i], el).then(result => result || this.renderers(rs, el, i+1));
    else
        return Promise.reject(new Error("no renderer worked, tried: "+rs));
}

然后在你的方法中，你可以这样做

let first = $('#id1');
let els = [$('#id2'), $('#id3')];
let rs = ['secondaryRenderer', '3rdRenderer', '4thRenderer', '5thRenderer'];

return Promise.all([
    this.renderers(['priorityRenderer'].concat(rs), first)
].concat(els.map(el =>
    this.renderers(rs, el)
)));