Popups: Async Block

Method asyncBlock() shows new popup which blocks user screen untill asynchronous action will be completed.

Syntax

AWN.asyncBlock(promise[,onResolve,onReject,message,options])

Parameters

promise

Any JavaScript Promise

onResolve - optional

Can be Function or String. Processing of this parameter start after Promise resolve.
If omitted, uses default behavior - AWN.success(resp) method will be called.
If String, AWN.success(onResolve) method will be called;
If Function, it will be called, can take resp as optional parameter.
If null, disables default behavior.

resp - optional

A value returned from passed Promise resolve function.

onReject - optional

Can be Function or String. Processing of this parameter start after Promise reject.
If omitted, uses default behavior - AWN.alert(err) method will be called.
If String, AWN.alert(onReject) method will be called;
If Function, it will be called, can take err as optional parameter.
If null, disables default behavior.

err - optional

A value returned from passed Promise reject function.

message - optional

A message of the popup. Can be any valid HTML or text string. Will be set from defaults if omitted.

options - optional

Instance of Options, which will override globals for this call

Return value

A JavaScript Promise

Behavior

No mouse or keyboard events trigger during the showing of async-block.

Examples

Axios GET - success, using defaults


  let promise = axios.get('https://jsonplaceholder.typicode.com/posts');
  new AWN().asyncBlock(promise)

Axios GET - success, onResolve as String


  new AWN().asyncBlock(
    axios.get('https://jsonplaceholder.typicode.com/posts'),
    'Posts has been loaded',
  )

Axios GET - success, onResolve as Function, callback style


  let notifier = new AWN();
  notifier.asyncBlock(
    axios.get('https://jsonplaceholder.typicode.com/posts'),
    resp => notifier.success(`${resp.data.length} posts has been loaded`),
  );

Axios GET - success, custom asyncBlock message


  new AWN().asyncBlock(
    axios.get('https://jsonplaceholder.typicode.com/posts'),
    '',  /* omitted onResolve by use of empty string(recomended), defaults will be used */
    undefined, /* omitted onReject by use of undefined(not recomended), defaults will be used */
    'Retrieving posts'
  );

Axios GET - error, using defaults


  let promise = axios.get('https://jsonplaceholder.typicode.com/wrong-url');
  new AWN().asyncBlock(promise)

Axios GET - error, onReject as String


  new AWN().asyncBlock(
     axios.get('https://jsonplaceholder.typicode.com/wrong-url'),
     '', /* omitted onResolve */
     'Something got wrong, contact tech support'
  )

Axios GET - error, onReject as Function


  let notifier = new AWN();
  notifier.asyncBlock(
     axios.get('https://jsonplaceholder.typicode.com/wrong-url'),
     '', /* omitted onResolve */
     err => notifier.alert(`API responded with code: ${err.response.status}`)
  )

Bad practises

BAD PRACTISE: Axios GET - success, onResolve|onReject as Function, promise style


  /* When you have to override the default behavior, better use callback style. It will keep your code clean and clear. 
     Besides this, minDuration and animationDuration are not considered if you use promise style. */
  let notifier = new AWN();
  notifier.asyncBlock(
    axios.get('https://jsonplaceholder.typicode.com/posts'),
    null /* disables default bahaviour */
  ).then(
    resp => notifier.success(`${resp.data.length} posts has been loaded`)
  );

Promise style can be useful when you need to do some extra computions based on asyncBlock response without overriding default behaviour.