Skip to content

Commit 891ae72

Browse files
I think the concept documents are _sort of_ complete now.
1 parent f1ebf9e commit 891ae72

3 files changed

Lines changed: 168 additions & 12 deletions

File tree

concepts/async-await/about.md

Lines changed: 56 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ So the following async function `foo`:
1111

1212
```javascript
1313
async function foo(bar) {
14-
console.log(`bar is ${bar}`);
15-
return bar ** 2;
14+
console.log(`bar = ${bar}`);
15+
return bar;
1616
}
1717
```
1818

@@ -21,17 +21,69 @@ is equivalent to a regular function using a promise:
2121
```javascript
2222
function foo(bar) {
2323
return new Promise((resolve) => {
24-
console.log(`bar is ${bar}`);
25-
resolve(bar ** 2);
24+
console.log(`bar = ${bar}`);
25+
resolve(bar);
2626
});
2727
}
2828
```
2929

3030
## Await expressions
3131

32+
The await keyword is syntactic sugar for a `.then` call.
33+
For example, this simple API call with a promise
34+
35+
```javascript
36+
function getDog() {
37+
return fetch('https://www.example.com/api').then((response) =>
38+
response.json(),
39+
);
40+
}
41+
```
42+
43+
can be rewritten to use await as follows:
44+
45+
```javascript
46+
async function getDog() {
47+
const data = await fetch('https://www.example.com/api');
48+
return data.json();
49+
}
50+
```
51+
52+
Await can only be used in async functions and the global scope of modules.
53+
3254
### Error handling with await
3355

56+
Unlike promises, await does not have any built in error handling functionality.
57+
Instead, a try / catch block should be used.
58+
59+
```javascript
60+
async function getDog() {
61+
try {
62+
const data = await fetch('https://www.example.com/api');
63+
} catch {
64+
throw new Error('Data not available');
65+
}
66+
return data.json();
67+
}
68+
```
69+
3470
### Top-level await
3571

72+
In JavaScript modules, you can use an await statement at the [top level][top-await].
73+
74+
```javascript
75+
const data = fetch("https://www.example.com/api").then((response) => response.json());
76+
77+
export default await data;
78+
```
79+
<!-- prettier-ignore-start -->
80+
~~~~exercism/note
81+
82+
While most browsers now support a top-level await statement, Safari has only partial support.
83+
84+
~~~~
85+
<!-- prettier-ignore-end -->
86+
3687
[async-await]: https://javascript.info/async-await
3788
[wiki-syntax-sugar]: https://en.wikipedia.org/wiki/Syntactic_sugar
89+
[top-await]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await#top_level_await

concepts/async-await/introduction.md

Lines changed: 56 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ So the following async function `foo`:
1111

1212
```javascript
1313
async function foo(bar) {
14-
console.log(`bar is ${bar}`);
15-
return bar ** 2;
14+
console.log(`bar = ${bar}`);
15+
return bar;
1616
}
1717
```
1818

@@ -21,17 +21,69 @@ is equivalent to a regular function using a promise:
2121
```javascript
2222
function foo(bar) {
2323
return new Promise((resolve) => {
24-
console.log(`bar is ${bar}`);
25-
resolve(bar ** 2);
24+
console.log(`bar = ${bar}`);
25+
resolve(bar);
2626
});
2727
}
2828
```
2929

3030
## Await expressions
3131

32+
The await keyword is syntactic sugar for a `.then` call.
33+
For example, this simple API call with a promise
34+
35+
```javascript
36+
function getDog() {
37+
return fetch('https://www.example.com/api').then((response) =>
38+
response.json(),
39+
);
40+
}
41+
```
42+
43+
can be rewritten to use await as follows:
44+
45+
```javascript
46+
async function getDog() {
47+
const data = await fetch('https://www.example.com/api');
48+
return data.json();
49+
}
50+
```
51+
52+
Await can only be used in async functions and the global scope of modules.
53+
3254
### Error handling with await
3355

56+
Unlike promises, await does not have any built in error handling functionality.
57+
Instead, a try / catch block should be used.
58+
59+
```javascript
60+
async function getDog() {
61+
try {
62+
const data = await fetch('https://www.example.com/api');
63+
} catch {
64+
throw new Error('Data not available');
65+
}
66+
return data.json();
67+
}
68+
```
69+
3470
### Top-level await
3571

72+
In JavaScript modules, you can use an await statement at the [top level][top-await].
73+
74+
```javascript
75+
const data = fetch("https://www.example.com/api").then((response) => response.json());
76+
77+
export default await data;
78+
```
79+
<!-- prettier-ignore-start -->
80+
~~~~exercism/note
81+
82+
While most browsers now support a top-level await statement, Safari has only partial support.
83+
84+
~~~~
85+
<!-- prettier-ignore-end -->
86+
3687
[async-await]: https://javascript.info/async-await
3788
[wiki-syntax-sugar]: https://en.wikipedia.org/wiki/Syntactic_sugar
89+
[top-await]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await#top_level_await

exercises/concept/async-await/.docs/introduction.md

Lines changed: 56 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ So the following async function `foo`:
1111

1212
```javascript
1313
async function foo(bar) {
14-
console.log(`bar is ${bar}`);
15-
return bar ** 2;
14+
console.log(`bar = ${bar}`);
15+
return bar;
1616
}
1717
```
1818

@@ -21,17 +21,69 @@ is equivalent to a regular function using a promise:
2121
```javascript
2222
function foo(bar) {
2323
return new Promise((resolve) => {
24-
console.log(`bar is ${bar}`);
25-
resolve(bar ** 2);
24+
console.log(`bar = ${bar}`);
25+
resolve(bar);
2626
});
2727
}
2828
```
2929

3030
## Await expressions
3131

32+
The await keyword is syntactic sugar for a `.then` call.
33+
For example, this simple API call with a promise
34+
35+
```javascript
36+
function getDog() {
37+
return fetch('https://www.example.com/api').then((response) =>
38+
response.json(),
39+
);
40+
}
41+
```
42+
43+
can be rewritten to use await as follows:
44+
45+
```javascript
46+
async function getDog() {
47+
const data = await fetch('https://www.example.com/api');
48+
return data.json();
49+
}
50+
```
51+
52+
Await can only be used in async functions and the global scope of modules.
53+
3254
### Error handling with await
3355

56+
Unlike promises, await does not have any built in error handling functionality.
57+
Instead, a try / catch block should be used.
58+
59+
```javascript
60+
async function getDog() {
61+
try {
62+
const data = await fetch('https://www.example.com/api');
63+
} catch {
64+
throw new Error('Data not available');
65+
}
66+
return data.json();
67+
}
68+
```
69+
3470
### Top-level await
3571

72+
In JavaScript modules, you can use an await statement at the [top level][top-await].
73+
74+
```javascript
75+
const data = fetch("https://www.example.com/api").then((response) => response.json());
76+
77+
export default await data;
78+
```
79+
<!-- prettier-ignore-start -->
80+
~~~~exercism/note
81+
82+
While most browsers now support a top-level await statement, Safari has only partial support.
83+
84+
~~~~
85+
<!-- prettier-ignore-end -->
86+
3687
[async-await]: https://javascript.info/async-await
3788
[wiki-syntax-sugar]: https://en.wikipedia.org/wiki/Syntactic_sugar
89+
[top-await]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await#top_level_await

0 commit comments

Comments
 (0)