Skip to content

Instantly share code, notes, and snippets.

@Hlight

Hlight/jsbin.zekaxur.js

Last active January 2, 2019 15:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Hlight/08d02e39a7eb707eb1cdca013f520d0a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Hlight/08d02e39a7eb707eb1cdca013f520d0a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Hlight revised this gist Jan 2, 2019. 1 changed file with 0 additions and 186 deletions.
    186 changes: 0 additions & 186 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,186 +0,0 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.js"></script>
    </head>
    <body>

    <script id="jsbin-javascript">
    /*
    https://app.pluralsight.com/player?course=javascript-best-practices&author=jonathan-mills&name=javascript-best-practices-m4&clip=2&mode=live
    Async Patters: Promises
    */

    //-------------------
    // # WITHOUT PROMISE:
    //-------------------

    // # Mock Async Call (callback)
    function asyncMethod(msg, cb){
    setTimeout(function(){
    console.log(msg);
    cb();
    }, 500);
    }

    // # Initial "christmas-tree code" ugly, not ideal!
    asyncMethod('Open DB Connection', function(){
    asyncMethod('Find User', function(){
    asyncMethod('Validate User', function(){
    asyncMethod('...do stuff', function(){});
    })
    })
    })

    //----------------
    // # WITH PROMISE:
    //----------------

    // # Mock Async Call (promise)
    function asyncMethod(msg){
    return new Promise(function(fulfill, reject) {
    setTimeout(function(){
    console.log(msg);
    fulfill();
    }, 500);
    });
    }
    // # 'then' still ugly :(
    asyncMethod('Open DB Connection')
    .then(function(){
    asyncMethod('Find User')
    .then(function(){
    asyncMethod('Validate User')
    .then(function(){
    asyncMethod('...do stuff')
    .then(function(){});
    })
    })
    })
    // --
    // # Use Functions (not returning promises)
    function findUser(){
    asyncMethod('Find User')
    .then(validateUser)
    }
    function validateUser() {
    asyncMethod('Validate User')
    .then(doStuff)
    }
    function doStuff() {
    asyncMethod('...do stuff')
    .then(function(){});
    }
    asyncMethod('Open DB Connection')
    .then(findUser)
    // --
    // # Use Functions (return promises)
    function findUser(){
    return asyncMethod('Find User')
    }
    function validateUser() {
    return asyncMethod('Validate User')
    }
    function doStuff() {
    return asyncMethod('...do stuff')
    }
    asyncMethod('Open DB Connection')
    .then(findUser)
    .then(validateUser)
    .then(doStuff);
    </script>



    <script id="jsbin-source-javascript" type="text/javascript">/*
    https://app.pluralsight.com/player?course=javascript-best-practices&author=jonathan-mills&name=javascript-best-practices-m4&clip=2&mode=live
    Async Patters: Promises
    */

    //-------------------
    // # WITHOUT PROMISE:
    //-------------------

    // # Mock Async Call (callback)
    function asyncMethod(msg, cb){
    setTimeout(function(){
    console.log(msg);
    cb();
    }, 500);
    }

    // # Initial "christmas-tree code" ugly, not ideal!
    asyncMethod('Open DB Connection', function(){
    asyncMethod('Find User', function(){
    asyncMethod('Validate User', function(){
    asyncMethod('...do stuff', function(){});
    })
    })
    })

    //----------------
    // # WITH PROMISE:
    //----------------

    // # Mock Async Call (promise)
    function asyncMethod(msg){
    return new Promise(function(fulfill, reject) {
    setTimeout(function(){
    console.log(msg);
    fulfill();
    }, 500);
    });
    }
    // # 'then' still ugly :(
    asyncMethod('Open DB Connection')
    .then(function(){
    asyncMethod('Find User')
    .then(function(){
    asyncMethod('Validate User')
    .then(function(){
    asyncMethod('...do stuff')
    .then(function(){});
    })
    })
    })
    // --
    // # Use Functions (not returning promises)
    function findUser(){
    asyncMethod('Find User')
    .then(validateUser)
    }
    function validateUser() {
    asyncMethod('Validate User')
    .then(doStuff)
    }
    function doStuff() {
    asyncMethod('...do stuff')
    .then(function(){});
    }
    asyncMethod('Open DB Connection')
    .then(findUser)
    // --
    // # Use Functions (return promises)
    function findUser(){
    return asyncMethod('Find User')
    }
    function validateUser() {
    return asyncMethod('Validate User')
    }
    function doStuff() {
    return asyncMethod('...do stuff')
    }
    asyncMethod('Open DB Connection')
    .then(findUser)
    .then(validateUser)
    .then(doStuff);



    </script></body>
    </html>
  2. Hlight revised this gist Jan 2, 2019. No changes.
  3. Hlight created this gist Jan 2, 2019.
    186 changes: 186 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,186 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.js"></script>
    </head>
    <body>

    <script id="jsbin-javascript">
    /*
    https://app.pluralsight.com/player?course=javascript-best-practices&author=jonathan-mills&name=javascript-best-practices-m4&clip=2&mode=live
    Async Patters: Promises
    */

    //-------------------
    // # WITHOUT PROMISE:
    //-------------------

    // # Mock Async Call (callback)
    function asyncMethod(msg, cb){
    setTimeout(function(){
    console.log(msg);
    cb();
    }, 500);
    }

    // # Initial "christmas-tree code" ugly, not ideal!
    asyncMethod('Open DB Connection', function(){
    asyncMethod('Find User', function(){
    asyncMethod('Validate User', function(){
    asyncMethod('...do stuff', function(){});
    })
    })
    })

    //----------------
    // # WITH PROMISE:
    //----------------

    // # Mock Async Call (promise)
    function asyncMethod(msg){
    return new Promise(function(fulfill, reject) {
    setTimeout(function(){
    console.log(msg);
    fulfill();
    }, 500);
    });
    }
    // # 'then' still ugly :(
    asyncMethod('Open DB Connection')
    .then(function(){
    asyncMethod('Find User')
    .then(function(){
    asyncMethod('Validate User')
    .then(function(){
    asyncMethod('...do stuff')
    .then(function(){});
    })
    })
    })
    // --
    // # Use Functions (not returning promises)
    function findUser(){
    asyncMethod('Find User')
    .then(validateUser)
    }
    function validateUser() {
    asyncMethod('Validate User')
    .then(doStuff)
    }
    function doStuff() {
    asyncMethod('...do stuff')
    .then(function(){});
    }
    asyncMethod('Open DB Connection')
    .then(findUser)
    // --
    // # Use Functions (return promises)
    function findUser(){
    return asyncMethod('Find User')
    }
    function validateUser() {
    return asyncMethod('Validate User')
    }
    function doStuff() {
    return asyncMethod('...do stuff')
    }
    asyncMethod('Open DB Connection')
    .then(findUser)
    .then(validateUser)
    .then(doStuff);
    </script>



    <script id="jsbin-source-javascript" type="text/javascript">/*
    https://app.pluralsight.com/player?course=javascript-best-practices&author=jonathan-mills&name=javascript-best-practices-m4&clip=2&mode=live
    Async Patters: Promises
    */

    //-------------------
    // # WITHOUT PROMISE:
    //-------------------

    // # Mock Async Call (callback)
    function asyncMethod(msg, cb){
    setTimeout(function(){
    console.log(msg);
    cb();
    }, 500);
    }

    // # Initial "christmas-tree code" ugly, not ideal!
    asyncMethod('Open DB Connection', function(){
    asyncMethod('Find User', function(){
    asyncMethod('Validate User', function(){
    asyncMethod('...do stuff', function(){});
    })
    })
    })

    //----------------
    // # WITH PROMISE:
    //----------------

    // # Mock Async Call (promise)
    function asyncMethod(msg){
    return new Promise(function(fulfill, reject) {
    setTimeout(function(){
    console.log(msg);
    fulfill();
    }, 500);
    });
    }
    // # 'then' still ugly :(
    asyncMethod('Open DB Connection')
    .then(function(){
    asyncMethod('Find User')
    .then(function(){
    asyncMethod('Validate User')
    .then(function(){
    asyncMethod('...do stuff')
    .then(function(){});
    })
    })
    })
    // --
    // # Use Functions (not returning promises)
    function findUser(){
    asyncMethod('Find User')
    .then(validateUser)
    }
    function validateUser() {
    asyncMethod('Validate User')
    .then(doStuff)
    }
    function doStuff() {
    asyncMethod('...do stuff')
    .then(function(){});
    }
    asyncMethod('Open DB Connection')
    .then(findUser)
    // --
    // # Use Functions (return promises)
    function findUser(){
    return asyncMethod('Find User')
    }
    function validateUser() {
    return asyncMethod('Validate User')
    }
    function doStuff() {
    return asyncMethod('...do stuff')
    }
    asyncMethod('Open DB Connection')
    .then(findUser)
    .then(validateUser)
    .then(doStuff);



    </script></body>
    </html>
    83 changes: 83 additions & 0 deletions jsbin.zekaxur.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,83 @@
    /*
    https://app.pluralsight.com/player?course=javascript-best-practices&author=jonathan-mills&name=javascript-best-practices-m4&clip=2&mode=live
    Async Patters: Promises
    */

    //-------------------
    // # WITHOUT PROMISE:
    //-------------------

    // # Mock Async Call (callback)
    function asyncMethod(msg, cb){
    setTimeout(function(){
    console.log(msg);
    cb();
    }, 500);
    }

    // # Initial "christmas-tree code" ugly, not ideal!
    asyncMethod('Open DB Connection', function(){
    asyncMethod('Find User', function(){
    asyncMethod('Validate User', function(){
    asyncMethod('...do stuff', function(){});
    })
    })
    })

    //----------------
    // # WITH PROMISE:
    //----------------

    // # Mock Async Call (promise)
    function asyncMethod(msg){
    return new Promise(function(fulfill, reject) {
    setTimeout(function(){
    console.log(msg);
    fulfill();
    }, 500);
    });
    }
    // # 'then' still ugly :(
    asyncMethod('Open DB Connection')
    .then(function(){
    asyncMethod('Find User')
    .then(function(){
    asyncMethod('Validate User')
    .then(function(){
    asyncMethod('...do stuff')
    .then(function(){});
    })
    })
    })
    // --
    // # Use Functions (not returning promises)
    function findUser(){
    asyncMethod('Find User')
    .then(validateUser)
    }
    function validateUser() {
    asyncMethod('Validate User')
    .then(doStuff)
    }
    function doStuff() {
    asyncMethod('...do stuff')
    .then(function(){});
    }
    asyncMethod('Open DB Connection')
    .then(findUser)
    // --
    // # Use Functions (return promises)
    function findUser(){
    return asyncMethod('Find User')
    }
    function validateUser() {
    return asyncMethod('Validate User')
    }
    function doStuff() {
    return asyncMethod('...do stuff')
    }
    asyncMethod('Open DB Connection')
    .then(findUser)
    .then(validateUser)
    .then(doStuff);