1

I have a Vue SPA that has a array of promises that are being awaited on page load.

const promiseArray = [
ServiceA.method(),
ServiceB.method(),
ServiceC.method(),
...,
ServiceZ.method()
]

Promise.allSettled(promiseArray);

As the application grows more and more complex, some of these promises/services need to complete prior to starting other calls.

For example,

ServiceA Requires ServiceD to finish
or 
ServiceE requires ServiceB to finish

Is there a way to “nest” these async/await calls to keep the simplicity of a singular array and awaiting them all concurrently without introducing a large amount of complexity?

ServiceC THEN ServiceA,
ServiceF THEN ServiceD,

Is there a way to refactor to make the code behave something like this and that could possibly be extended upon to include even more dependcies in the future?

ServiceA THEN ServiceC THEN ServiceQ
ServiceB,
ServiceD
...

Currently I have the dependencies inside of the service code as there is only the one so far, but I have a couple of tickets coming in pipeline that will require more.

I will most likely end up batching these promises and run them one after another, but I was curious if there was a more elegant way.

ckeller22
  • 31
  • 1
  • 1
    Is it a problem to do `Promise.all([ a().then(c).then(q), b(), f().then(d) ])`? – VLAZ Dec 06 '22 at 00:48
  • If you want to do Promise changing then use the arrow after each return value and do not forget to add the return otherwise it will give you an error and you will not able to find where is the error coming from. – Shilpe Saxena Dec 06 '22 at 03:27

0 Answers0