Avoiding nested promises inside a then function JS

Question

I have an asynchronous function 'doApiRequest' that is called inside of a 'then' function...

doSomething()
  .then(() => {
    return doApiRequest();
  })
  .then((apiResult) => {
    doSomethingElse(apiResult);
  });

The issue being that doApiRequest returns a Promise with the eventual result of that API request. However, do to the nature of the API I'm working with there is a request rate limit involved. I plan on handling that by having each API request add itself to a queue, and then when the queue releases the request after waiting for the rate limit, the API request will finish resolving. While I could do something like...

doSomething()
  .then(() => {
    return waitForRateRefresh();
  })
  .then(() => {
    return doApiRequest();
  })
  .then((apiResult) => {
    doSomethingElse(apiResult);
  });

I may end up having many 'doApiRequest' calls, so having to chain a 'waitForRateRefresh' on each seems like a bad method and I'd also have to make it work so it can pass along the data from previous then statements. What I'd like to do is handle this inside of 'doApiRequest' itself.

'doApiRequest' would look something like this

doApiRequest(){
  return new Promise((resolve, reject) => {
    waitForRateRefresh().then(() => {
      //http call
      resolve(someValue);
    };
  });
}

However I'm trying to find a way to do this that doesn't involve nesting Promises. What other ways would there be to go about this. Another way I've though of doing it is by using Async/Await instead, is there any other way of doing it with just promises? What happens (or is it even possible) to return a Promise with an attached then function from 'doApiRequest' like...

return waitForRateRefresh().then(() => new Promise(..../http call));

In the original then function where 'doApiRequest' is called - will it receive the value returned by 'waitForRateRefresh', or the result of traversing down the then chain attached to it.

Thanks for any insights

note : 'doApiRequest' would look something like this avoid the promise constructor antipattern ... the content of that function is simply return waitForRateRefresh().then(() => { //http call return someValue; }; — Jaromanda X
– Jaromanda X, Commented Apr 10, 2018 at 2:18
seeing as you .then(() => { return waitForRateRefresh(); }) and the same for doApiRequest ... there is no incoming "value" anyway — Jaromanda X
– Jaromanda X, Commented Apr 10, 2018 at 2:36
@JaromandaX absolutely, in this case though will 'someValue' make it to the original then statement or will only what waitForRateRefresh resolves as be returned — Kyle R
– Kyle R, Commented Apr 10, 2018 at 2:38
This is great help, especially being able to wrap it. I created a JSBin here to test some of the different methods and return values jsbin.com/dawesen/edit?js,console — Kyle R
– Kyle R, Commented Apr 10, 2018 at 3:54

Jaromanda X · Accepted Answer · 2018-04-10 03:09:59Z

6

While async/await is great, if you're using an older version of nodejs that doesn't support it, then you'll either need to transpile async/await code, or use plain ol' Promises

Don't know if you've ever seen transpiled async/await - it's quite "verbose"

What you can do, assuming you actually want to pass the result of doSomething to doApiRequest is this

doSomething()
.then(result => waitForRateRefresh().then(() => result))
.then((doSomethingResult) => doApiRequest(doSomethingResult))
.then((apiResult) => doSomethingElse(apiResult));

of course, the above can be simplified to

doSomething()
.then(result => waitForRateRefresh().then(() => result))
.then(doApiRequest)
.then(doSomethingElse);

To clarify a point about promise constructor anti-pattern

doApiRequest(){
    return new Promise((resolve, reject) => {
        waitForRateRefresh().then(() => {
            //http call
            resolve(someValue);
        };
   });
}

this is simplified to

doApiRequest(){
    return waitForRateRefresh().then(() => {
        //http call
        return someValue;
    };
}

Of course, if // http call is asyncrhonous, then return someValue can't be used like that. But that would be the case for your version of the code as well

To accept a value from doSomething in this version of doApiRequest, change the code to

doApiRequest(someResult){
    return waitForRateRefresh().then(() => {
        //http call - use someResult here
        return someValue;
    };
}

The main code is now

doSomething()
.then(doApiRequest)
.then(doSomethingElse);

Again, though ... the //http call and return someValue will not work as desired if someValue is gathered asynchronously in whatever http call is

and one more idea so you don't need to rewrite existing functions

create a "wrapper" around doApiRequest

const qApiRequest = result => waitForRateRefresh().then(() => doApiRequest(result));

now, the code is

doSomething()
.then(qApiRequest)
.then(doSomethingElse);

Of course, with async/await it's just

const doSomethingResult = await doSomething();
await waitForRateRefresh();
const apiResult = doApiRequest(doSomethingResult);
const finalResult = doSomethingElse(apiResult);

Of course, these would need to be inside a function tagged async

edited Apr 10, 2018 at 3:09

answered Apr 10, 2018 at 2:47

Jaromanda X

57.1k6 gold badges82 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kyle R Over a year ago

Thank you for the answer, to clarify the second part of your answer makes it so that the .then(result => waitForRateRefresh().then(() => result)) part isn't necessary correct? and someValue is what will be seen outside of doApiRequest()?

Jaromanda X Over a year ago

Sorry, the second part is different, let me add how that would be used

Jaromanda X Over a year ago

@KyleR - I've added a third possibility, which I think is probably the best, as it doesn't require rewriting doApiRequest

Kyle R Over a year ago

This is great help, especially being able to wrap it. I created a JSBin here to test some of the different methods and return values jsbin.com/dawesen/edit?js,console

JohanP · Accepted Answer · 2018-04-10 02:15:14Z

2

I would use async/await, it keeps the code very readable and makes it easy to reason what is happening next.

await doSomething();
await waitForRateRefresh();
const apiResult  = await doApiRequest();
await doSomethingElse(apiResult);

answered Apr 10, 2018 at 2:15

JohanP

5,5423 gold badges27 silver badges37 bronze badges

Collectives™ on Stack Overflow

Avoiding nested promises inside a then function JS

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related