Skip to content

Commit 887ebce

Browse files
elfgoddelfgodd
committed
The Async Keyword
1 parent 5280843 commit 887ebce

4 files changed

Lines changed: 130 additions & 0 deletions

File tree

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

Whitespace-only changes.

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

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
// ******************************
2+
// The Async Keyword ******************************
3+
// Example 1
4+
5+
console.log('The Async Keyword')
6+
7+
// const data = axios.get('https://swapi.dev/api/planets/')
8+
9+
// Run the functions in the Browser console
10+
// function greet() {
11+
// return 'HELLO!!!'
12+
// }
13+
// greet()
14+
15+
// Whatever the value that i'm returning is, the promise that will
16+
// be returned from greetAsync() will be resolved with that value
17+
// async function greetAsync() {
18+
// return 'HELLO async!!!'
19+
// }
20+
21+
// greetAsync().then((val) => {
22+
// console.log('PROMISE RESOLVED WITH: ', val);
23+
// })
24+
25+
// Example 2
26+
// Run the functions in the Browser console
27+
// async function add(x, y) {
28+
// return x + y
29+
// }
30+
// add()
31+
32+
/*
33+
How do we return a promise that is not resolved?
34+
35+
- If we want to return a rejected promise, all that we do is
36+
raise an exeption. So if we throw an exception, we throw an error,
37+
that promise will be rejected
38+
*/
39+
async function add(x, y) {
40+
if(typeof x !== 'number' || typeof y !== 'number') {
41+
throw ' X and Y must be numbers!'
42+
}
43+
return x + y
44+
}
45+
add(3, 2)
46+
add(3, 'a')
47+
add('e', 'r').then((val) => {
48+
console.log('PROMISE RESOLVED WITH: ', val);
49+
}).catch((err) => {
50+
console.log('PROMISE REJECTED WITH: ', err)
51+
})
52+
53+
console.log('\n');
54+
add(2, 3)
55+
.then((val) => {
56+
console.log('PROMISE RESOLVED WITH: ', val)
57+
})
58+
.catch((err) => {
59+
console.log('PROMISE REJECTED WITH: ', err)
60+
})
61+
62+
// Example 3
63+
// Manual Promise creation
64+
// function add(x, y) {
65+
// return new Promise((resolve, rejected) => {
66+
// if (typeof x !== 'number' || typeof y !== 'number') {
67+
// rejected(' X and Y must be numbers!')
68+
// }
69+
// resolve(x + y)
70+
// })
71+
// }
72+
73+
// add(6, 7).then((val) => {
74+
// console.log('PROMISE RESOLVED WITH: ', val)
75+
// }).catch((err) => {
76+
// console.log('PROMISE REJECTED WITH: ', err)
77+
// })
78+
// add('r', 7)
79+
// .then((val) => {
80+
// console.log('PROMISE RESOLVED WITH: ', val)
81+
// })
82+
// .catch((err) => {
83+
// console.log('PROMISE REJECTED WITH: ', err)
84+
// })

‎18-Async-Await-JS-Magic/02/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: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,35 @@ Async functions depend extremely heavily on promises. Async functions are just a
1010

1111
- ASYNC
1212
- AWAIT
13+
14+
## 2. The Async Keyword
15+
16+
#### The async keyword
17+
- Async functions always return a promise
18+
- If the function returns a value, the promise will be resolved with that value
19+
- If the function throws an exception, the promise will be rejected
20+
21+
```javascript
22+
async function hello() {
23+
return 'Hey guy!'
24+
}
25+
hello()
26+
// Promise {<resolved>: "Hey guy!"}
27+
async function uhOh() {
28+
throw new Error('oh no!')
29+
}
30+
uhOh()
31+
// Promise {<rejected>: Error: oh no!}
32+
```
33+
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.
34+
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**
36+
37+
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.
38+
39+
#### How do we return a promise that is not resolved?
40+
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
44+

0 commit comments

Comments
 (0)