Working with promises inside an if/else

Question

I have a conditional statement in which I need to perform one of two operations, then continue after whichever operation has resolved. So my code currently looks as follows:

if (shoud_do_thing_a) { //should_do_thing_a is just a variable that determines which function to call. it is not a promise
  do_thing_a()
} else {
  do_thing_b()
}

// more code

The issue is that both do_thing_a and do_thing_b return promises, and I can't move on until whichever gets executed has resolved. The best way I've come up with to solve this is like this:

var more_code = function () { 
  // more code
}

if (shoud_do_thing_a) {
  do_thing_a().then(more_code)
} else {
  do_thing_b().then(more_code)
}

I don't like this structure. It's difficult to follow because you need to jump around to find where more_code is defined (imagine I have this type of control flow in several locations), rather than simply being able to continue reading.

Is there a better way to deal with this type of thing in javascript?

Answer 1

If you can use async/await

async function someFunc() {
    var more_code = function () { 
        // more code
    }

    if (shoud_do_thing_a) {
        await do_thing_a()
    } else {
        await do_thing_b()
    }

    more_code()
}

Or if you can't, use then():

var more_code = function () { 
    // more code
}

var do_thing;
if (shoud_do_thing_a) {
  do_thing = do_thing_a()
} else {
  do_thing = do_thing_b()
}

do_thing.then(more_code)

Answer 2

If you're stuck with raw Promises and can't use async/await (You usually should have no trouble, what with babel/typescript etc), the following is a bit more elegant than storing the promise in a variable:

function something() {
  return Promise.resolve()
    .then(() => {
      if (should_do_thing_a) {
        return do_thing_a();
      }
      else if (should_do_thing_b) {
        return do_thing_b();
      }
    })
    .then(some_more_code);
}

Note that when you start working with Promises, your functions should always return a Promise that other functions can work with. Leaving an asynchronous action without any way to handle it means bad things, especially when it comes to error handling.

In a more general sense, it means that when you use Promises, more of your code is "uplifted" into being executed and returned as Promises.

Answer 3

How I want to improve on other answers:

• keep it clean and simple
• no unneeded variables
• return promise asap
• in js we use camelCase
• put it in a function and name that function to keep it readable
• let then execute moreCode so it's called after the thing is done.

---

function doTheThing () {
  if (shouldDoA) return doThingA()
  else return doThingB()
}

doTheThing().then(moreCode)

Answer 4

Simple working example:

The scope it's defined in must be async.

const createUser = async (data) => {
   if (await isUsernameTaken(username)) { return 'username-taken' }
}

The isUsernameTaken func:

const isUsernameTaken = async (username) => {
    const request = await API.SomeRequest
    return !request.isEmpty
}

Answer 5

Save the promise and add the then after the if statement:

var promise;

if (shoud_do_thing_a) {
  promise = do_thing_a();
} else {
  promise = do_thing_b();
}

promise.then(more_code);

Answer 6

var promise = shoud_do_thing_a? do_thing_a: do_thing_b

promise().then(function () {
// more code    
})

Answer 7

Similar to other answers here, but you can self execute the async and clean up the condition a bit.

(async () => {
  const should_do_thing_a = true

  const do_thing_a = function() {
    return new Promise(function(resolve, reject) {
      resolve('a')
    })
  }

  const do_thing_b = function() {
    return new Promise(function(resolve, reject) {
      resolve('b')
    })
  }

  const result = (should_do_thing_a) ? await do_thing_a() : await do_thing_b()

  console.log(result)

})()

Answer 8

The way I would do it would be to put the if check into another function that returns a promise. The promise gets resolved with the resolve of the other function calls in the if-else statement.

Example:

function performCheck(condition) {
    var defer = $q.defer();
    if (condition) {
        doThingA().then(function(response) {
            defer.resolve(response);
        });
    } else {
        doThingB().then(function(response) {
            defer.resolve(response)
        });
    }
    return defer.promise;
}
performCheck(condition).then(function(response) {
    //Do more code.
});

In my opinion, I would prefer this method because this function can now be used in multiple places where you have a check on the condition, reducing code duplication, and it is easier to follow.

You could reduce this down further with

function performCheck(condition) {
    var defer = $q.defer();
    var doThisThing = condition ? doThingA : doThingB;
    doThisThing().then(function (response) {
        defer.resolve(response);
    });
    return defer.promise;
}
performCheck(condition).then(function(response) {
    //Do more code.
});

Answer 9

You can use async/await

async function fn() {
  let p, result;
  if (shoud_do_thing_a) {
    p = await do_thing_a()
  } else {
    p = await do_thing_b()
  }
  if (p) {
    result = more_code();
  }
  return result
}

Answer 10

more_code = miFunc() => return new Promise((resolve, reject) => ... });

Solution 1

const waitFor = should_do_thing_a ? do_thing_a() : do_thing_b();
waitFor.then(...).catch(...)

Solution 2

let waitFor = Promise.resolve();

if (do_thing_a) {
    waitFor = do_thing_a();
} else {
    waitFor = do_thing_b();
}

waitFor.then(...).catch(...);