Skip to content

Commit 3b03ed0

Browse files
elfgoddelfgodd
committed
Section 18: Error Handling in Async Functions
1 parent ff3f584 commit 3b03ed0

4 files changed

Lines changed: 83 additions & 5 deletions

File tree

‎18-Async-Await-JS-Magic/04/app.css‎

Whitespace-only changes.

‎18-Async-Await-JS-Magic/04/app.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// ******************************
2+
// Error Handling in Async Functions ******************************
3+
// Example 1
4+
5+
console.log('Error Handling in Async Functions')
6+
7+
// async function getPlanets() {
8+
// const res = await axios.get('https://swapi.dev/api/planetklsajdalksts/')
9+
// console.log(res.data)
10+
// }
11+
12+
// .catch is more of a backup to catch multiple potential errors
13+
// getPlanets().catch((err) => {
14+
// console.log('IN CATCH!!!');
15+
// console.log(err);
16+
// })
17+
18+
// ********************
19+
// Example 2
20+
// We have another option, with the same behavior
21+
// if you don't want to have to use a .catch and pass a callback
22+
23+
async function getPlanets() {
24+
// Try Catch, it's more specific to what we're trying to do
25+
// and we can be more detailed in how we handle it
26+
try {
27+
const res = await axios.get('https://swapi.dev/api/planetklsajdalksts/')
28+
console.log(res.data)
29+
} catch (e) {
30+
console.log('IN CATCH!!!')
31+
console.log(e)
32+
}
33+
}
34+
35+
getPlanets()

‎18-Async-Await-JS-Magic/04/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="app.css" />
8+
<title>JavaScript</title>
9+
</head>
10+
<body>
11+
<script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
12+
<script src="app.js"></script>
13+
</body>
14+
</html>

‎18-Async-Await-JS-Magic/README.md‎

Lines changed: 34 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ Async functions depend extremely heavily on promises. Async functions are just a
1414
## 2. The Async Keyword
1515

1616
#### The async keyword
17+
1718
- Async functions always return a promise
1819
- If the function returns a value, the promise will be resolved with that value
1920
- If the function throws an exception, the promise will be rejected
@@ -30,17 +31,18 @@ async function uhOh() {
3031
uhOh()
3132
// Promise {<rejected>: Error: oh no!}
3233
```
34+
3335
So we use async in front of a function declaration or function expression, we use it to designate a certain function as an async function.
3436

35-
The key thing to understand about this keyword is when you put it in front of a function, this function behaves differently. **It's now going to return a promise**
37+
The key thing to understand about this keyword is when you put it in front of a function, this function behaves differently. **It's now going to return a promise**.
3638

3739
So even though i never write a new promise, i don't explicitly say, hey, return a promise. I'm simply saying return a string because i put async there the function now returns a promise.
3840

3941
#### How do we return a promise that is not resolved?
4042

41-
- If we want to return a rejected promise, all that we do is
42-
raise an exeption. So if we throw an exception, we throw an error,
43-
that promise will be rejected
43+
- If we want to return a rejected promise, all that we do is
44+
raise an exeption. So if we throw an exception, we throw an error,
45+
that promise will be rejected
4446

4547
## 3. The Await Keyword
4648

@@ -58,4 +60,31 @@ async function getPlanets() {
5860
}
5961

6062
getPlanets()
61-
```
63+
```
64+
65+
## 4. Error Handling in Async Functions
66+
67+
What if the asynchronous operation, if that promise is not resolved?, What if it's rejected?
68+
69+
```javascript
70+
const res = await axios.get('https://swapi.dev/api/planetklsajdalksts/')
71+
```
72+
73+
- This endpoint should give me a 404
74+
- **Axios** is going to reject the promise
75+
- I don't have a catch
76+
- I don't have any sort of error handling
77+
78+
```javascript
79+
async function getPlanets() {
80+
try {
81+
const res = await axios.get('https://swapi.dev/api/planetklsajdalksts/')
82+
console.log(res.data)
83+
} catch (e) {
84+
console.log('IN CATCH!!!')
85+
console.log(e)
86+
}
87+
}
88+
89+
getPlanets()
90+
```

0 commit comments

Comments
 (0)