Async Await
Objective
To understand why asynchronous code is difficult to work with and experience some remedies that exist in the JavaScript world.
Why Is Asynchronous Code Hard?
What about asynchronous code is different from how we interact with synchronous code? Why is asynchronous code difficult to work with?
Thinking About It With Code
Why can’t we do something like this? Given that we might expect to console.log() the data from the body of the response.
const response = fetch(someURL);
const data = response.json();
console.log(data);
What order will things log in here:
function doSomeAsyncStuff () {
console.log(1)
fetch('https://api.adviceslip.com/advice')
.then(() => {
console.log(2)
})
console.log(3)
}
doSomeAsyncStuff();
Sometimes we want our code to be more synchronous like this, but asynchronous JavaScript doesn’t really work like this. We cannot expect to know when the data from the fetch call will come back.
Wouldn’t it be nice if we could write our asynchronous code synchronously like above??
Async Await
Bring in async await. These are two keywords given to us in the JavaScript language. They are not special to React or special to fetch. They’re found in the base JavaScript language.
Do Some Research
Head to this doc page to learn more about async and await. Some key questions to think about for each keyword:
- Where is it used?
- Why is it used?
- Specifically for
async, what does anasyncfunction return?
After some time looking through the docs, talk with a partner about what you found for both async and await.
Now that we have some structure to what the async and await keywords are used for, let’s put it into practice.
Async Await in Practice
Your goal is to make a function, let’s call it getSomeAdvice, and it should behave like this:
getSomeAdvice().then(advice => console.log(advice));
Within getSomeAdvice, utilize async and await to retrieve advice from this API, and do not use any then() chaining.
Working With Async Await
const getSomeAdvice = async () => {
const response = await fetch('https://api.adviceslip.com/advice');
const data = await response.json();
return data.advice.slip;
};
getSomeAdvice().then(data => console.log(data)).catch(err => console.error(err));
Error Handling (Exception Handling)
What have we lost in this process? What happens if const response = await fetch('https://api.adviceslip.com/advice'); fails?Our code will just carry on thinking everything is ok.
Exception handling is all about what we do when things go wrong. With async and await, one option we have for exception handling is try and catch.
The try and catch blocks are built into JavaScript, and are not only used for asynchronous code like we’ve seen in this lesson. They can be used in conjunction for scenarios when our code doesn’t do what we expect.
What about error handling? Where did the catch go?? try catch
Integrate Try Catch
Using this doc page as guidance, how can you integrate try and catch into the code from the exercise above to catch an error like: fetching to the URL where we are missing a character (let response = await fetch('https://api.adviceslip.com/avice');)?
Error Handling a 404
const getSomeAdvice = async () => {
try {
// Path is missing 'd' in 'advice'
let response = await fetch('https://api.adviceslip.com/avice');
if(!response.ok) {
console.log(response.status);
throw new Error('Weird error');
}
let data = await response.json();
return data.advice.slip;
}
catch (e) {
console.log(e.message);
}
};
getSomeAdvice().then(data => console.log(data)).catch(err => console.error(err));
To review some key parts of the solution above, what is the response object? What does response.status and response.ok tell us about a network request response?
What does “throwing” and Error mean for try and catch?
Before We Go
What are the potential downsides of using async and await? How could it impact our code in a negative way?
