I do realise that when returning a non-promise in a .then() handler, it is immediately passed on to the next handler, if it's a promise that is returned, executing is halted for the promise to resolve before it is passed on to the next handler.

Also I know that only one value can be returned from a promise.

That beeing said, how would I go about returning multiple parameters from one .then() handler to the next one? Esepcailly if it's a mix of promises and non-promises. Currently I put everything into a custom object, return it, and use async await in the following then() handler for the promises to reslolve.

Then is use the resolved promise values and the non-promise value to do some work together.

This works fine but my gut is saying that this is somehow not the way it is supposed to be... maybe?

Example:

const current = 'blah';
const previous = 'blubb';

this.doSomeAsyncWork()
.then(
    result => {
        const nonPromiseValue = new domSomethingSynchronous(current, previous);
        // "custom object, mix of promises and non-promises"
        return {
            nonPromise: nonPromise,
            promiseA: ControllerA.asyncOperationA(current, nonPromiseValue.someProperty),
            promiseB: ControllerB.asyncOperationB(nonPromiseValue.someOtherProperty),
        }
    }
)
.then(
    async x => {
        const nonPromiseValue = x.nonPromiseValue;
        const valueA = await x.promiseA;
        const valueB = await x.promiseB;

        // do something with the results of those three variables

    }
)
.catch(
    // ...
)

I do realise that when returning a non-promise in a .then() handler, it is immediately passed on to the next handler, if it's a promise that is returned, executing is halted for the promise to resolve before it is passed on to the next handler.

Also I know that only one value can be returned from a promise.

That beeing said, how would I go about returning multiple parameters from one .then() handler to the next one? Esepcailly if it's a mix of promises and non-promises. Currently I put everything into a custom object, return it, and use async await in the following then() handler for the promises to reslolve.

Then is use the resolved promise values and the non-promise value to do some work together.

This works fine but my gut is saying that this is somehow not the way it is supposed to be... maybe?

Example:

const current = 'blah';
const previous = 'blubb';

this.doSomeAsyncWork()
.then(
    result => {
        const nonPromiseValue = new domSomethingSynchronous(current, previous);
        // "custom object, mix of promises and non-promises"
        return {
            nonPromise: nonPromise,
            promiseA: ControllerA.asyncOperationA(current, nonPromiseValue.someProperty),
            promiseB: ControllerB.asyncOperationB(nonPromiseValue.someOtherProperty),
        }
    }
)
.then(
    async x => {
        const nonPromiseValue = x.nonPromiseValue;
        const valueA = await x.promiseA;
        const valueB = await x.promiseB;

        // do something with the results of those three variables

    }
)
.catch(
    // ...
)

• javascript
• promise
• return

1 Answer 1

Use return Promise.all on the array of Promises and non-Promises at the end of a .then, and then you can destructure the results immediately in the next .then, no await nor async needed.

The Promise.all will resolve once all Promises in the array have resolved. The non-Promises passed to it will just be passed to the next .then.

const makeProm = () => new Promise(resolve => setTimeout(resolve, 1000, 'resolveValue'));

Promise.resolve()
  .then(() => {
    const prom = makeProm();
    const otherValue = 'foo';
    return Promise.all([prom, otherValue]);
  })
  .then(([resolveValue, otherValue]) => {
    console.log(resolveValue, otherValue);
  });