chaining multiple promises

Question

I have tried to understand how promises work, but I don't get it why I need press my button more than few times this promise chain to work.

First function creates new user and returns a promise.
Second updates other system if user has a car.
Third should update user object when car id is received.

When I press the button only CreateUser is fired. If I press button again it will also fire UpdateModel.

CreateUser(newUser).then((userObject) => {
       if(userObject.car) {
           UpdateModel(userObject.objectId, userObject.car).then((carId) => {
               userObject.car = carId;
               UpdateUser(userObject).then((updatedUser) => {
                   this.moveNextPage(updatedUser);
               });
           }, (error) => {
               console.log(error);
           });
       } else {
           this.moveNextPage(userObject);
       }    
   }, (error) => {
       console.log(error);
   })

You’re not returning promises from the function passed to `.then()`, so the promise *it* returns won’t wait for anything. — Ry-, May 03 '17 at 19:12
While nesting promises is one problem in this code, the real problem might lie in the code that handles your button clicks, which is not present here. — Joseph, May 03 '17 at 19:22
Possible duplicate of [How do I access previous promise results in a .then() chain?](http://stackoverflow.com/questions/28250680/how-do-i-access-previous-promise-results-in-a-then-chain) — Andrea Carraro, May 03 '17 at 19:22
I decided to do restructuring of function from promises to async/await. It's more easier to understand how the flow goes. Another thing with my promise chain was same as said in this thread [link](http://stackoverflow.com/questions/36263913/react-native-fetch-second-promise-hanging) — CodAri, May 04 '17 at 18:08

score 1 · Answer 1 · answered May 03 '17 at 19:34

What you are trying to accomplish is pretty hard with promises. I will take the risk of not answering your question directly, but answering indirectly and helping you with all similar problems that you might have related with workflow. Say hi to the async library.

This library is aimed to solve what was called 'the callback hell', which you are facing right now. Coming from synchronous programming background, it's natural to think that we can use the output of a function as input to the next function, for example. Async,waterfall does exactly that for us, hiding the callback hell structure (thank god). So the solution for your problem would be simply putting your functions in this structure (copied from the async documentation):

async.waterfall([
    function(callback) {
        callback(null, 'one', 'two');
    },
    function(arg1, arg2, callback) {
        // arg1 now equals 'one' and arg2 now equals 'two'
        callback(null, 'three');
    },
    function(arg1, callback) {
        // arg1 now equals 'three'
        callback(null, 'done');
    }
], function (err, result) {
    // result now equals 'done'
});

So, this lets you feel almost as going back to a synchronous language! If you need to execute functions in parallel, or series (without using the ouptut from previous function), you can use async.parallel or async.each. There are lots of other functionalities.

As I said, this is an answer that solves your problem, but not exactly the way you asked. If you are curious on how are the inner workings of this chained callbacks, just ignore my answer.

Cheers and good luck!

chaining multiple promises

1 Answers1