JSFiddle - React, Tailwind, and code Playground

by Steve Ayers

HTML

<div ng-app="MyApp">
    
    <div ng-controller="MyCtrl as myCtrl">
        <button ng-click="myCtrl.run()">Click Me to run the deferreds!</button>
    </div>
    
</div>

JavaScript

angular.module("MyApp", []).controller("MyCtrl", function ($timeout, $q) {

    var one = function (msg) {
        var deferred = $q.defer();
        $timeout(function () {
            deferred.resolve("Pass this to two");
        }, 2000);

        return deferred.promise;
    };

    var two = function (msg) {
        var deferred = $q.defer();
        one(msg).then(function (data) {
            console.log("One - data is: " + data);
            deferred.resolve("pass this to three");
        });
        
        return deferred.promise;
    };

    var three = function (msg) {
        var deferred = $q.defer();
        two(msg).then(function (data) {
            console.log("Two - data is: " + data);
            deferred.resolve("done");
        });
        return deferred.promise;
    };



    this.run = function () {
        three("msg").then(function (data) {
            console.log("Three is done: " + data);
        });
    };
});