how to wait untill chain of asyc calls is succeeded

Question

I have a function which is making an async call and upon sucess, its making another async call

ex:-

    function1 = () => {
      /*Some required Logic*/
  return fetch("myurl")
      .then((json) => {
        function2(json)

      })
      .catch((error) => {
        console.log(error)
      })
}

function2 = () => {
  /*Some required Logic*/
  return fetch("myurl2")
      .then((json) => {
        callthirdfunction(json)

      })
      .catch((error) => {
        console.log(error)
      })
}

now here is the function 3 in which i am dependent on the success of function1

function3 = () => {
  /*Some required Logic*/
  function1().then(() => {
})
}

Issue is it is only waiting untill the function1's asyc call is succeeded its not waiting for function2's async call to succeed

I know i can write like chain of asyn call but its not possible because of unavoidable circumstances

Any suggesstion or leads in this regard would be of great help

You want function3 to fire once function1 and function2 are done? — Gustaf Gunér, Jul 04 '17 at 14:13
my code flow is like this from function3, i am making function1 call and function 1 call is dependent on function2. So, once both function1 and function2 succeeded i want to have my logic. makes sense? — user3677291, Jul 04 '17 at 14:20
Your problem is that you don't `return` the promises you use from the `then` callbacks, so the promise chain cannot know what to wait for. — Bergi, Jul 04 '17 at 16:00
@Bergi, i am making use of return. updated my question. please have a look — user3677291, Jul 04 '17 at 16:17
@user3677291 The callbacks themselves still don't `return` the promises that `function2` (now) returns — Bergi, Jul 04 '17 at 16:21

Alon · Answer 1 · 2017-07-04T14:42:46.100

0

If you used async await as you mentioned in your tags, you could just use it like that:

await function1();
await function2();
await function3();

while adding the async keyword to the function declarations:

function1 = async () => {

}

Another option is to promisify your functions, and then call them like that:

function1()
.then(function2)
.then(function3)
.catch() {}

edited Jul 04 '17 at 14:42

answered Jul 04 '17 at 14:36

Alon

10,381
23
88
152

score 0 · Answer 2 · answered Jul 04 '17 at 16:20

If you want one promise to depend on another promise, you need to return the dependent promise from then.

Your code doesn't do anything with the result of function2:

return fetch("myurl")
  .then((json) => {
    function2(json)

  })

That should read

.then((json) => {
  return function2(json)
})

The whole point of then is that it allows chaining of subsequent promises by returning them from the callback.

score 0 · Answer 3 · answered Mar 08 '18 at 20:59

Promises get chained only if you return them. In the below example

function resolveAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}


async function add1(x) {
  const a = await resolveAfter2Seconds(20);
  const b = await resolveAfter2Seconds(30);
  return x + a + b;
}

Notice the return keyword inside resolveAfter2Seconds. Make sure that when you call a method that fires a promise, you add the 'return' keyword

how to wait untill chain of asyc calls is succeeded

3 Answers3