Asynchronous Programming
Asynchronous Programming
PROGRAMMING
Basis of handling request in
background
UNDERSTANDING FUNCTION AS ARGUMENT
In JS it is possible to pass a function as an
argument to another function and this
technique allows a function to call another
function. A function passed as argument is
known as callback function
JS function are executed in the sequence they are called. Not in the
sequence the are defined.
CALLBACK FUNCTIONS
JS can handle multiple task simultaneously and
callbacks are fundamental aspects of JS as
they allow you to run code after an
asynchronous operation has been completed.
document.getElementById(“rdiv").innerHTML
= result;
}
function calculate(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
calculate(5, 5, showResult);
document.getElementById("demo").innerHTML = posNumbers;
Callback functions are very useful with asynchronous functions
Where One function has to wait for another function.
ASYNCHRONOUS JAVA SCRIPT
In real life computing problems callbacks are
mostly used with asynchronous functions.
Identical example is JS setTimeout() function.
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTM
L = “Asynchronous JS Programming";
}
ASYNCHRONOUS JAVA SCRIPT
Instead of passing the name of a function as
an argument to another function, you can
always pass a whole function instead
setTimeout(function() {
myFunction(“Async
Programming"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTM
L = value;
}
WAITING FOR INTERVALS
When using the JavaScript function setInterval(),
you can specify a callback function to be
executed for each interval
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML
=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}
PROMISES IN JS
A promise is a special JavaScript object that links the
“producing code” and the “consuming code”
together
Producing code
that does something and takes time. For instance,
some code that loads the data over a network
Consuming Code
that wants the result of the “producing code” once
it’s ready. Many functions may need that result
PROMISES IN JS
let promise = new Promise(function(resolve, reject) { //
executor (the producing code)
});
When the producing code obtains the result, it should call one
of the two callbacks
OnSuccess myResolvle
OnError myReject
PROMISES OBJECT PROPERTIES
A JS promise object supports two properties
State Result
Pending undefined
Fulfilled a result value
Rejected a error object
if (x == 0) {
myResolve("OK");
} else {
myReject("Error");
}
});
myPromise.then(
function(value) {display(value);},
function(error) {display(error);}
);
ASYNC & AWAIT
Async & Await makes promise easier to write
async makes a function result a promise.
await makes a function wait for a promise.
document.getElementById(‘demo’).innerHTML=res
ult
}
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {display(value);},
function(error) {display(error);}
);
ASYNC & AWAIT
Await keyword can only be used inside a async
function. The await keyword makes the function
pause the execution and wait for a resolved
promise before it continues.
myDisplay();