Scribd
Upload
5 views

9_JavaScript_Callbacks_Promises_Async_and_Await

Uploaded by

offersvault.co
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

9_JavaScript_Callbacks_Promises_Async_and_Await

Uploaded by

offersvault.co
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

Single Threaded Programming

JavaScript

Blocking Synchronous Execution


Asynchronous WebAPIs
• To achieve asynchronous behavior through
✓Event Loop
✓Callbacks
✓Promises
✓Async and Await
Event Loop

function first() { //order of function calls


console.log(1) first()
} second()
third()
function second() {
console.log(2)
} Output:
1
function third() { 2
console.log(3) 3
}
Event Loop
//one of them contains asynchronous code
function first() {
console.log(1) //order of function calls
} first()
second()
function second() { third()
setTimeout(() => {
console.log(2)
}, 0) Output:
} 1
3
function third() { 2
console.log(3)
}
Callback Functions
// A function
function fn() {
console.log('Just a function')
}

// A function that takes another function as an argument


function higherOrderFunction(callback) {
callback()
}

higherOrderFunction(fn)
Nested Callbacks
function pyramidOfDoom() {
setTimeout(() => {
console.log(1)
setTimeout(() => {
console.log(2)
setTimeout(() => {
console.log(3) Output:
}, 500) 1
}, 2000) 2
}, 1000) 3
}
Promise
A promise represents the completion of an asynchronous function

// Initialize a promise
const promise = new Promise((resolve,
reject) => {})
Promise
A promise can have three possible states: pending,
fulfilled, and rejected.

• Pending - Initial state before being resolved or rejected


• Fulfilled - Successful operation, promise has resolved
• Rejected - Failed operation, promise has rejected
Promise

const promise = new Promise((resolve, reject) => {


setTimeout(() => resolve('Resolving an asynchronous
request!'), 2000)
})

// Log the result


promise.then((response) => {
console.log(response)
})
Error Handling
function getUsers(onSuccess) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (onSuccess) {
resolve([
{id: 1, name: 'Jerry'},
{id: 2, name: 'Elaine'},
{id: 3, name: 'George'},
])
} else { getUsers(false)
reject('Failed to fetch data!') .then((response) => {
} console.log(response)
}, 1000) })
}) .catch((error) => {
} console.error(error)
})
function delay(ms) {
return new Promise(resolve => setTimeout(resolve,ms));
}

function pyramidOfDoom() {
delay(1000)
.then(() => {
function pyramidOfDoom() { console.log(1);
setTimeout(() => { return delay(2000);
})
console.log(1) .then(() => {
setTimeout(() => { console.log(2);
return delay(500);
console.log(2) })
setTimeout(() => { .then(() => {
console.log(3) console.log(3);
})
}, 500) .catch(error => console.error(error));
}, 2000) }
}, 1000)
// Call the function
} pyramidOfDoom();
function delay(ms) {
return new Promise(resolve => setTimeout(resolve,ms));
}

function pyramidOfDoom() {
delay(1000)
.then(() => {
console.log(1);
return delay(2000);
})
.then(() => {
console.log(2);
return delay(500);
})
.then(() => {
console.log(3);
})
.catch(error => console.error(error));
}

// Call the function


pyramidOfDoom();
Async and Await
• The async and await keywords in JavaScript are used to
make asynchronous programming easy, by introducing
coroutines.

• The await keyword is a special command which tells


JavaScript to stop the execution of the current function
until a Promise resolves, and then return the promise's
value.

• Every time we need to run an async function, we need to


await on it.
Async and Await
function who() {
return new Promise(resolve => { async function msg() {
setTimeout(() => { const a = await who();
resolve('You\'re'); const b = await what();
}, 200); const c = await where();
});
} console.log(`${ a } ${ b } ${ c }`);
function what() { }
return new Promise(resolve => {
setTimeout(() => { msg();
resolve('learning');
}, 300); // You're learning in the classroom <-- after
}); 1 second
}
function where() {
return new Promise(resolve => {
setTimeout(() => {
resolve('in the classroom');
}, 500);
});
}
Async and Await
function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}

function sumAsync(x, y) {
return new Promise((resolve, reject) => {
sleep(500).then(() => {
resolve(x + y);
});
});
}

sumAsync(5, 7).then((result) => {


console.log("The result of the addition is:", result);
});
Async and Await
function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}

async function sumAsync(x, y) {


// this code waits here for 500 milliseconds
await sleep(500);
// done waiting. let's calculate and return the value
return x+y;
}

// sumAsync is an async function, which means it returns a Promise.


sumAsync(5, 7).then((result) => {
console.log("The result of the addition is:", result);
});
Error Handling in Async and Await

async function runProcess() {


try {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1’);
const json = await response.json();
console.log(json);
} catch (error) {
console.log(error);
}
}
runProcess()

You might also like