JavaScript Async
The Call Stack
The mechanism the JS interpreter uses to keep track of its place in a script that calls multiple functions.
Can use loupe.com to better understand/visualize how call stack works
Web API and Single Threads
JS is Single Threaded : At any given point in time, that single JS thread is running at most one line of JS code.
- Browsers come with Web APIs that are able to handle certain tasks in the background (like making requests or setTimeout)
- The JS call stack recognizes these Web API functions and passes them off to the browser to take care of.
- Once the browser finishes those tasks they return and are puushed onto the stack as a callback.
console.log("I print first!");
setTimeout(() => {
console.log('I print after 3 seconds');
}, 3000);
console.log("I print second");
Promises
A Promise is an obbject representing the eventual completion or failure of an asynchronous operation.
The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.
A Promise is a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers with an asynchronous action’s eventual success value or failure reason.
Promise was created to rectify the problem of Callback hell.
A promise is a returned object to which you attach callbacks, instead of passing callbacks into a function.
// THE CALLBACK VERSION
const fakeRequestCallback = (url, success, failure) => {
const delay = Math.floor(Math.random() * 4500) + 500;
setTimeout(() => {
if (delay > 4000) {
failure('Connection Timeout :(')
} else {
success(`Here is your fake data from ${url}`)
}
}, delay)
}
// THE PROMISE VERSION
const fakeRequestPromise = (url) => {
return new Promise((resolve, reject) => {
const delay = Math.floor(Math.random() * (4500)) + 500;
setTimeout(() => {
if (delay > 4000) {
reject('Connection Timeout :(')
} else {
resolve(`Here is your fake data from ${url}`)
}
}, delay)
})
}
resolve and rejected basically are success and failure.
When the promise is rejected we can use .catch
fakeRequestPromise('yelp.com/api/coffee/page1')
.then((data) => {
console.log("IT WORKED!!!!!! (page1)")
console.log(data)
return fakeRequestPromise('yelp.com/api/coffee/page2')
})
.then((data) => {
console.log("IT WORKED!!!!!! (page2)")
console.log(data)
return fakeRequestPromise('yelp.com/api/coffee/page3')
})
.then((data) => {
console.log("IT WORKED!!!!!! (page3)")
console.log(data)
})
.catch((err) => {
console.log("OH NO, A REQUEST FAILED!!!")
console.log(err)
})
Creating Promise
You can create own promise by creating a function Promise with two parameters (resolve, reject).
const fakeRequest = (url) => {
return new Promise((resolve, reject) => {
const rand = Math.random();
setTimeout(() => {
if (rand < 0.7) {
resolve('YOUR FAKE DATA HERE');
}
reject('Request Error!');
}, 1000)
})
}
fakeRequest('/dogs/1')
.then((data) => {
console.log("DONE WITH REQUEST!")
console.log('data is:', data)
})
.catch((err) => {
console.log("OH NO!", err)
})
const delayedColorChange = (color, delay) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
document.body.style.backgroundColor = color;
resolve();
}, delay)
})
}
delayedColorChange('red', 1000)
.then(() => delayedColorChange('orange', 1000))
.then(() => delayedColorChange('yellow', 1000))
.then(() => delayedColorChange('green', 1000))
.then(() => delayedColorChange('blue', 1000))
.then(() => delayedColorChange('indigo', 1000))
.then(() => delayedColorChange('violet', 1000))
Async Functions
Helps us write clean code, built on top of promises.
There are two points in Async functions
- Async
- Async functions always return a promise.
- If the function returns a value, the promise will be resolved with that value.
- If the function throws an exception, the promise will be rejected.
const sing = async () => {
throw "OH NO, PROBLEM!"
return 'LA LA LA LA'
}
sing()
.then(data => {
console.log("PROMISE RESOLVED WITH:", data)
})
.catch(err => {
console.log("OH NO, PROMISE REJECTED!")
console.log(err)
})
const login = async (username, password) => {
if (!username || !password) throw 'Missing Credentials'
if (password === 'corgifeetarecute') return 'WELCOME!'
throw 'Invalid Password'
}
login('todd', 'corgifeetarecute')
.then(msg => {
console.log("LOGGED IN!")
console.log(msg)
})
.catch(err => {
console.log("ERROR!")
console.log(err)
})
- Await
- We can only use the await keyword inside of functions declared with async.
- await will pause the execution of the function, waiting for a promise to be resolved.
const delayedColorChange = (color, delay) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
document.body.style.backgroundColor = color;
resolve();
}, delay)
})
}
// delayedColorChange('red', 1000)
// .then(() => delayedColorChange('orange', 1000))
// .then(() => delayedColorChange('yellow', 1000))
// .then(() => delayedColorChange('green', 1000))
// .then(() => delayedColorChange('blue', 1000))
// .then(() => delayedColorChange('indigo', 1000))
// .then(() => delayedColorChange('violet', 1000))
async function rainbow() {
await delayedColorChange('red', 1000)
await delayedColorChange('orange', 1000)
await delayedColorChange('yellow', 1000)
await delayedColorChange('green', 1000)
await delayedColorChange('blue', 1000)
await delayedColorChange('indigo', 1000)
await delayedColorChange('violet', 1000)
return "ALL DONE!"
}
// rainbow().then(() => console.log("END OF RAINBOW!"))
async function printRainbow() {
await rainbow();
console.log("END OF RAINBOW!")
}
printRainbow();
Handling Errors in Async Function
we can do it using try and catch
async function makeTwoRequests() {
try {
let data1 = await fakeRequest('/page1');
console.log(data1);
let data2 = await fakeRequest('/page2');
console.log(data2);
} catch (e) {
console.log("CAUGHT AN ERROR!")
console.log("error is:", e)
}
}