I wanted to learn about promise chaining and I've try to call to the following function in order from 1 to 3 ,Currently its not working so what am I missing here ?

$(function () {
    function doSomething() {
        return new Promise(function (resolve) {
            var value = 1;
            resolve(value);
        });
    }


    function doSomething2(){
        return 2;
    };

    function doSomething3(){
        return 3;
    };


    doSomething().then(function (firstResult) {

        var result = "first result " + firstResult;
        alert(result);

    })doSomething2.then(function (secondResult) {
        var secReslut = "second result " + secondResult;
       return alert(secReslut);
    })()doSomething2.then(function (tr)
    {
      alert(tr)
    });


});

I wanted to learn about promise chaining and I've try to call to the following function in order from 1 to 3 ,Currently its not working so what am I missing here ?

$(function () {
    function doSomething() {
        return new Promise(function (resolve) {
            var value = 1;
            resolve(value);
        });
    }


    function doSomething2(){
        return 2;
    };

    function doSomething3(){
        return 3;
    };


    doSomething().then(function (firstResult) {

        var result = "first result " + firstResult;
        alert(result);

    })doSomething2.then(function (secondResult) {
        var secReslut = "second result " + secondResult;
       return alert(secReslut);
    })()doSomething2.then(function (tr)
    {
      alert(tr)
    });


});

• javascript
• jquery
• promise

1 Answer 1

When you call .then on a promise - it returns a new promise which resolves with the value you return from the .then.

Thus, the correct way to chain promises in your example is:

doSomething().then(function(firstResult){
     alert(firstResult);
     return doSomething2(); // this could also return a promise over an async value
}).then(function(secondResult){
     alert(secondResult); // alerts 2
     return doSomething3();  
}).then(function(thirdResult){
     alert(result(3);
});

The reason promise chaining works is because of how .then works, its signature as a function is kind of plex, but makes sense when you grasp it:

Promise<A> -> (A -> (Promise<B> | B)) -> Promise<B>

This looks plicated, but let's analyze it:

• It's a function that operates on a Promise (provided implicitly as the this). In our case that's the promise doSomething returns.
• It takes a callback that works on the unwrapped value: what the promise resolved to. It returns a promise over a new type of value (or just a value in our case). In our case, that value is 1. So we have a Promise and we resolve it with 1.
• It returns a promise itself over the value our then will resolve - this is why chaining happens. Calling .then on it - we provided a function that accepts that 1 as an argument and returned a 2. So we had a 1 -> 2. This returned a promise over the value 2.

A promise in JS is an abstraction over chaining itself. Like others of its kind - it abstracts sequencing, think of then like a semicolon.

This is in fact why promises are so useful - you hook on asynchronously, just like you returned 2 from the then you can return an $.ajax call and the chain will only happen when the ajax call pletes.