Syntactical sugar experiments against promise indentation hell

1-original.js

return getFoo()
  .then(foo => {
    return getBar(foo)
      .then(bar => {
        return getBaz(foo, bar)
          .then(baz => {
            return getQux(foo, bar, baz);
          });
      });
  });

2-broken.js

return getFoo()
  .then(foo => {
    return getBar(foo);
  })
  .then(bar => {
    return getBaz(foo, bar); // Bad reference: foo
  })
  .then(baz => {
    return getQux(foo, bar, baz); // Bad reference: foo, bar
  });  

3-magic.js

return magic('foo', getFoo())
  .then(res => {
    return magic('bar', getBar(res.foo));
  })
  .then(res => {
    return magic('baz', getBaz(res.foo, res.bar));
  })
  .then(res => {
    return getQux(res.foo, res.bar, res.baz);
  });  

4-magic.js

return getFoo()
  .then(magic(foo => {
    return getBar(foo);
  }))
  .then(magic((foo, bar) => {
    return getBaz(foo, bar);
  }))
  .then(magic((foo, bar, baz) => {
    return getQux(foo, bar, baz);
  }));  

5-context.js

return contextualize(context => {
  return getFoo()
    .then(context(foo => {
      return getBar(foo);
    }))
    .then(context((foo, bar) => {
      return getBaz(foo, bar);
    }))
    .then(context((foo, bar, baz) => {
      return getQux(foo, bar, baz);
    }));
});

6-collect.js

return collect({ foo: (collect) => {
  return getFoo();
})
.then((collect) => {
  return collect({ bar: getBar(collect.foo) });
}))
.then((collect) => {
  return collect({ baz: getBaz(collect.foo, collect.bar) });
}))
.then((collect) => {
  return collect({ qux: getQux(collect.foo, collect.bar, collect.baz) });
}));

7-declarative.js

magic({
  foo: () => {
    return getFoo();
  },
  bar: (foo) => {
    return getBar(foo);
  },
  baz: (foo, bar) => {
    return getBaz(foo, bar);
  },
  qux: (foo, bar, baz) => {
    return getQux(foo, bar, baz);
  }
});

8-promise.all.js

return Promise.all({ foo: getFoo() })
  .then((res) => {
    return Promise.all(Object.assign({ bar: getBar(foo) }, res));
  })
  .then((res) => {
    return Promise.all(Object.assign({ baz: getBaz(res.foo, res.bar) }, res));
  })
  .then((res) => {
    return getQux(res.foo, res.bar, res.baz);
  });

9-seems-to-work.js

let theFoo = null;
let theBar = null;
let theBaz = null;

return Promise.resolve()
  .then(() => {
    return getFoo();
  })
  .then(foo => {
    theFoo = foo;
    return getBar(theFoo);
  })
  .then(bar => {
    theBar = bar;
    return getBaz(theFoo, theBar);
  })
  .then(baz => {
    return getQux(theFoo, theBar, baz);
  });