Javascript - multiple .then-clauses inside the executer of promise

Question

Im having trouble to understand the following javascript code:

/**
* Outputs the result of compiling a template.
*
* @module generator.generate
* @param  {Object}        config Configuration options
* @param  {Object|String} config.asyncapi AsyncAPI JSON or a string pointing to an AsyncAPI file.
* @param  {String}        config.target_dir Path to the directory where the files will be generated.
* @return {Promise}
*/
generator.generate = config => new Promise((resolve, reject) => {
 bundleAndApplyDefaults(config)
   .then((cfg) => {
     async function start () {
       await registerHelpers(cfg);
       await registerPartials(cfg);
       await generateDirectoryStructure(cfg);
     }

     start().then(resolve).catch(reject);
   })
   .catch(reject);
});

More specifically in which order the .then's are called and what promise they belong to. I think that the first .then gets called when the method bundleAndApplyDefaults(config) is completed. But im not sure what where the parameter cfg comes from.

Inside the function start() gets called and the second .then with the resolve of the original promise gets executed, the original promise only has .catch(reject) outside the executor and no .then for success, as far as i know.

Hereby im also not sure, why there is a .then after the start method, when theres no actual promise.

I appreciate any help.

"*im not sure what where the parameter cfg comes from.*" it's what the promise returned by `bundleAndApplyDefaults` will pass into the `then` when resolved. — VLAZ, Jan 14 '20 at 11:04

score 4 · Accepted Answer · answered Jan 14 '20 at 11:25

4

This is horrible code, full of the Promise constructor antipattern and mixing async/await syntax with then method calls. It should simply be

generator.generate = async (config) => {
  const cfg = await bundleAndApplyDefaults(config);
  await registerHelpers(cfg);
  await registerPartials(cfg);
  await generateDirectoryStructure(cfg);
};

answered Jan 14 '20 at 11:25

Bergi

630,263
148
957
1,375

This is way better to understand, thanks! But isnt there a return statement missing, as seen in the comment `@return {Promise}`? – NicO Jan 14 '20 at 12:05
1

@NicO async functions always return a promise. Also, the original code also doesn't have an explicit return - it just returns a Promise that will not have any further values, it will just be resolved eventually. – VLAZ Jan 14 '20 at 12:12

score 1 · Answer 2 · answered Jan 14 '20 at 11:17

This is poorly written code. This is what the author meant to write:

generator.generate = config => bundleAndApplyDefaults(config).then(async (cfg) => {
    await registerHelpers(cfg);
    await registerPartials(cfg);
    await generateDirectoryStructure(cfg);
  });

This code works exactly like your code, just without the bloat.

The wrapping new Promise() is an antipattern, and comes here with the additional cost that you have to resolve/reject it by forwarding the values from the Promise that start() returns.

im also not sure, why there is a .then after the start method, when theres no actual promise.

An async function returns a Promise.

I'd argue that (unncessarily) mixing `then` and `await` is still poor code :-) — Bergi, Jan 14 '20 at 11:30

score 0 · Answer 3 · answered Jan 14 '20 at 11:14

0

Because start is async, it will return an implicit promise.

The MDN reference has more information.

answered Jan 14 '20 at 11:14

patrickb

422
2
9

Javascript - multiple .then-clauses inside the executer of promise

3 Answers3