Before Promise

Javascript is single threaded

Blocked, block UI and lots things else

Event -> listener approach

• Suitable for
  • Continual, random events
  • Listener does not care events happened before listening
• Problem for request/success/fail scenario
  • Event happen before listener listens

Promise

Terminology

• settled - either
  • fulfilled - action succeeded and value returned
  • rejected -
    • explicitly rejected, or
    • error thrown
• pending

Promise is thenable

• object having a "then" method is a thenable
• Promise is thenable

Creating a Promise

• new Promise(function(resolve, reject){...});
  • the function will be called with two parameters:
    • resolve - function to call with the resolved value on success
      • that resolved value will be passed down in "then"
    • reject - function to call with, conventionally, an error object when fail
  • the function can do something asynchronous
    • in that case, call "resolve" or "reject" in call backs of those asynchronous actions
• Promise.resolve(something) - where something is:
  • something_thenable_suchas_jQuery - pack it in a Javascript Promise
  • value (such as a string) - a Promise that resolve to the value
  • a Promise - just that Promise
  • no value - undefined
• Promise.reject(something)
  • a Promise that rejects with the something, usually an error
• Promise.all(array_of_promises).then
  • when all promises settled
• Promise.race(array_of_promise).then
  • settle when any settle, or reject when any reject

Chaining a Promise

• then(function(response){...}, function(error){...})
  • only one of the two functions will be called
    • function(response)
      • can do something more (possibly asynchronous)
      • and return a value to further pass down
        • if is a value : just pass down
        • if return a Promise : wait and only pass down when that returned Promise settle
    • error - will be called to handle an error
  • then() itself returns a further Promise
• catch(function(error){...})
  • = then(undefined, function(error){...})
  • different with then(function(response){...}, function(error){...}):
    • with catch, both function(response) and function(error) may be called if function(response) throws an error
  • how it works
    • previous (not necessarily immediately) promise's error may pass along down until be handled by a catch
    • to further pass down, simple re-throw that error

Testing if something is a Promise:

• someone used this code: `if (Promise.resolve(obj) == obj)`

Promise working with other language features

• check array.reduce for chaining up Promise
• use javascript generaor (code can pause/resume) with Promise

async func & await

(rather new in 2017)

• build on top of promise
• make asynchronous code looks and behave a little more like synchronous code

• async function
  • fasync = async (x)=>{ return "something" };
  • fasync : is an AsyncFunction object
  • fasync(1) : call an async function returns a Promise, immediately, not resolved
  • resolve to value returned from the function ("something"), only AFTER the current stack runs complete, see Javascript event loop model
  • allows the function use "await" keyword
• await keyword
  • can only be used in an async function (so not in top level)
  • only proceed after await something settle
  • return if resolve, throw error if reject

Benefit

• concise & clean
• use same old try/catch to handle both synchronous & asynchronous errors
• also better than Promise.then in some other ways

Concerns

• make asynchronous code less obvious
• very new (so compatibility & environment support....)

"Gotya"

• An async function always return a Promise, although might be a resolved Promise, still a Promise not the resolved result.
• read https://dev.to/maxart2501/gotchas-about-asyncawait-and-promises-9di

Experiment

Basics

Here I want to understand javascript Promise, async function, await. First I define a normal function.

function plus(x) {

    return x+1;

}

plus(3);

Now I create an async function do the same thing.

async function aPlus(x) {

    return x+1;

}

plus;

aPlus;

Who's Who

So, a function is a Function object while an async function is an AsyncFunction. What's the result from calling an async function?

var aResult = aPlus(5);

aResult;

typeof aResult;

Ok, so aResult is an object. What's it? Bring on my inspector!

const util = require('@bingsjs/cli-utils');

util.check(aResult);

Who's Who - result returned from async function

So the result is a promise, resolved to 6.

Execution sequence

Examine execution, when exactly is the code in async function executed?

async function app(x) {

    console.log("app x="+x);

    return x+2;

}

resApp = app(4);

resApp;

const util=require('@bingsjs/cli-utils');

async function app(x) { // asynchronous plus plus

    console.log("app x="+x);

    return x+2;

}

async function delayedApp(x) {

    console.log("delayed app x="+x+", now about to make a Promise");

    var p = new Promise((resolve, reject)=>{

        console.log("This is code inside the Promise, now set timeout");

        setTimeout(()=>{

            console.log("Time out, now resolve x+2");

            resolve(x+2);

        }, 10000);

        console.log("This is code inside the Promise, after timeout, return something funny");

        return "Something Funny"

    });

    console.log("Promise instance is made, now check Promise and return");

    util.check(p);

    return p;

}

var resapp;

function checkapp() {

    console.log("before calling async function");

    resapp = app(7);

    util.check(resapp);

    console.log("after calling async function");

    console.log("before calling delayed async function");

    resapp = delayedApp(9);

    util.check(resapp);

    console.log("after calling delayed async function");

}

checkapp();

before calling async function

app x=7

============================== Start Reporting obj ==============================

obj: Promise { 9 }

typeof obj: object

obj's own properties: []

obj's prototype's own properties: [ 'constructor', 'then', 'catch' ]

obj's prototype's prototype's own properties: [ 'constructor',

  '__defineGetter__',

  '__defineSetter__',

  'hasOwnProperty',

  '__lookupGetter__',

  '__lookupSetter__',

  'isPrototypeOf',

  'propertyIsEnumerable',

  'toString',

  'valueOf',

  '__proto__',

  'toLocaleString' ]

=============================== End Reporting obj ===============================

after calling async function

before calling delayed async function

delayed app x=9, now about to make a Promise

This is code inside the Promise, now set timeout

This is code inside the Promise, after timeout, return something funny

Promise instance is made, now check Promise and return

============================== Start Reporting obj ==============================

obj: Promise { <pending> }

typeof obj: object

obj's own properties: []

obj's prototype's own properties: [ 'constructor', 'then', 'catch' ]

obj's prototype's prototype's own properties: [ 'constructor',

  '__defineGetter__',

  '__defineSetter__',

  'hasOwnProperty',

  '__lookupGetter__',

  '__lookupSetter__',

  'isPrototypeOf',

  'propertyIsEnumerable',

  'toString',

  'valueOf',

  '__proto__',

  'toLocaleString' ]

=============================== End Reporting obj ===============================

============================== Start Reporting obj ==============================

obj: Promise { <pending> }

typeof obj: object

obj's own properties: []

obj's prototype's own properties: [ 'constructor', 'then', 'catch' ]

obj's prototype's prototype's own properties: [ 'constructor',

  '__defineGetter__',

  '__defineSetter__',

  'hasOwnProperty',

  '__lookupGetter__',

  '__lookupSetter__',

  'isPrototypeOf',

  'propertyIsEnumerable',

  'toString',

  'valueOf',

  '__proto__',

  'toLocaleString' ]

=============================== End Reporting obj ===============================

after calling delayed async function

Time out, now resolve x+2

console.log(resapp);

util.check(resapp);

Conslusion

(1) async function defines an AsyncFunction object (2) if called, async function's body is immediately executed (3) if async function body returns a value (not a Promise), it's wrapped in a resolved Promise (4) if async function body returns a Promise, return a Promise (same? not sure, not important) (5) if a Promise is instantiated (new), the code block in the Promise's parameter function body is executed immediately (6) in the Promise's parameter function body, "resolve(something)" is called to resolve the value (7) what about the parameter functioin return something? I don't know. Seems no one care - I returned something but cannot find it anywhere. So, in the parameter function, resolve is important, return is not.