如何重构这个承诺后备？

Question

This is a classic fallback solution. If the first el does not get rendered, then it's retrying it with other renderers. How to best refactor this?

What's wrong with this code is that:

• Renderers need to be in an array, but here, they're in then blocks.
• They need to fall down to another renderer when the prior renderer didn't work
• The first renderer is kind of the same algo like the 2th and other renderers. It checks whether the result is empty. There is a duplication there. But, the first one needs to run first, and the 2nd and others can run together, they can stop whenever one of them returns a result.

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

You can use one of these approaches to call a chain of renderers until the first one returns a result:

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));
}

Then inside your method, you can do

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)
)));