Return value after Promise.all

Question

How I can return value from renderRedirect function after Promise.all? This is my dispatch actions:

 this.props.getChildrens(),
 this.props.getTeachers(),
 this.props.getTeachers()

renderRedirect function:

renderRedirect = async () => {
   Promise.all([
     this.props.getChildrens(),
     this.props.getTeachers(),
     this.props.getTeachers()
    ]).then(() => {
      return 'test';
    });
  };

In my compontent I console.log renderRedirect function and here is output:

console.log(this.renderRedirect())
Promise {<resolved>: undefined}

Vencovsky · Answer 1 · 2019-07-24T12:01:14.477

2

You forgot to return Promise.all.

renderRedirect = () => {
   // added return keyword
   return Promise.all([
     this.props.getChildrens(),
     this.props.getTeachers(),
     this.props.getTeachers()
    ]).then(() => {
      return 'test';
    });
  };

But you shoudl also notice that console.log(this.renderRedirect()) still don't work because you need to await for the result of the promise.

You should do something like:

let result = await this.renderRedirect()
console.log(result)

edited Jul 24 '19 at 12:01

answered Jul 24 '19 at 12:00

Vencovsky

28,550
17
109
176

Now my console.log output Promise {} – Paweł Baca Jul 24 '19 at 12:01
@PawełBaca just check the edit, you need to await for the result to `console.log` it – Vencovsky Jul 24 '19 at 12:02

score 0 · Answer 2 · answered Jul 24 '19 at 12:02

Three issues:

You need to either return the result of calling Promise.all's then handler, or use a concise function body so it's implicitly returned.
If you're going to make renderRedirect async, it would be more idiomatic to use await.
You're outputting the promise from renderRedirect. You need to consume that promise, not output it.

To deal with #1 and #2, either:

// Concise arrow function, not `async`
renderRedirect = () => Promise.all([
     this.props.getChildrens(),
     this.props.getTeachers(),
     this.props.getTeachers()
    ]).then(() => {
      return 'test';
    });

or

// `async` function
renderRedirect = async () => {
    await Promise.all([
     this.props.getChildrens(),
     this.props.getTeachers(),
     this.props.getTeachers()
    ]);
    return 'test';
};

To deal with #3:

this.renderRedirect().then(result => {
    console.log(result);
});

or if that code is in an async function:

console.log(await this.renderRedirect());

Return value after Promise.all

2 Answers2