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
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
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.