forked from javascript-tutorial/en.javascript.info
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
253 additions
and
45 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
|
||
There are no tricks here. Just replace `.catch` with `try...catch` inside `demoGithubUser` and add `async/await` where needed: | ||
|
||
```js run | ||
class HttpError extends Error { | ||
constructor(response) { | ||
super(`${response.status} for ${response.url}`); | ||
this.name = 'HttpError'; | ||
this.response = response; | ||
} | ||
} | ||
|
||
async function loadJson(url) { | ||
let response = await fetch(url); | ||
if (response.status == 200) { | ||
return response.json(); | ||
} else { | ||
throw new HttpError(response); | ||
} | ||
} | ||
|
||
// Ask for a user name until github returns a valid user | ||
async function demoGithubUser() { | ||
|
||
let user; | ||
while(true) { | ||
let name = prompt("Enter a name?", "iliakan"); | ||
|
||
try { | ||
user = await loadJson(`https://api.github.com/users/${name}`); | ||
break; // no error, exit loop | ||
} catch(err) { | ||
if (err instanceof HttpError && err.response.status == 404) { | ||
// loop continues after the alert | ||
alert("No such user, please reenter."); | ||
} else { | ||
// unknown error, rethrow | ||
throw err; | ||
} | ||
} | ||
} | ||
|
||
|
||
alert(`Full name: ${user.name}.`); | ||
return user; | ||
} | ||
|
||
demoGithubUser(); | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
|
||
# Rewrite "rethrow" async/await | ||
|
||
Rewrite the "rethrow" example from the chapter <info:promise-chaining> using `async/await` instead of `.then/catch`. | ||
|
||
And get rid of recursion in favour of a loop in `demoGithubUser`: with `async/await` that becomes possible and is easier to develop later on. | ||
|
||
```js run | ||
class HttpError extends Error { | ||
constructor(response) { | ||
super(`${response.status} for ${response.url}`); | ||
this.name = 'HttpError'; | ||
this.response = response; | ||
} | ||
} | ||
|
||
function loadJson(url) { | ||
return fetch(url) | ||
.then(response => { | ||
if (response.status == 200) { | ||
return response.json(); | ||
} else { | ||
throw new HttpError(response); | ||
} | ||
}) | ||
} | ||
|
||
// Ask for a user name until github returns a valid user | ||
function demoGithubUser() { | ||
let name = prompt("Enter a name?", "iliakan"); | ||
|
||
return loadJson(`https://api.github.com/users/${name}`) | ||
.then(user => { | ||
alert(`Full name: ${user.name}.`); | ||
return user; | ||
}) | ||
.catch(err => { | ||
if (err instanceof HttpError && err.response.status == 404) { | ||
alert("No such user, please reenter."); | ||
return demoGithubUser(); | ||
} else { | ||
throw err; | ||
} | ||
}); | ||
} | ||
|
||
demoGithubUser(); | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
|
||
The notes are below the code: | ||
|
||
```js run | ||
async function loadJson(url) { // (1) | ||
let response = await fetch(url); // (2) | ||
|
||
if (response.status == 200) { | ||
let json = await response.json(); // (3) | ||
return json; | ||
} | ||
|
||
throw new Error(response.status); | ||
} | ||
|
||
loadJson('no-such-user.json') | ||
.catch(alert); // Error: 404 (4) | ||
``` | ||
|
||
Notes: | ||
|
||
1. The function `loadUrl` becomes `async`. | ||
2. All `.then` inside are replaced with `await`. | ||
3. We can `return response.json()` instead of awaiting for it, like this: | ||
|
||
```js | ||
if (response.status == 200) { | ||
return response.json(); // (3) | ||
} | ||
``` | ||
|
||
Then the outer code would have to `await` for that promise to resolve. In our case it doesn't matter. | ||
4. The error thrown from `loadJson` is handled by `.catch`. We can't use `await loadJson(…)` there, because we're not in an `async` function. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
|
||
# Rewrite using async/await | ||
|
||
Rewrite the one of examples from the chapter <info:promise-chaining> using `async/await` instead of `.then/catch`: | ||
|
||
```js run | ||
function loadJson(url) { | ||
return fetch(url) | ||
.then(response => { | ||
if (response.status == 200) { | ||
return response.json(); | ||
} else { | ||
throw new Error(response.status); | ||
} | ||
}) | ||
} | ||
|
||
loadJson('no-such-user.json') // (3) | ||
.catch(alert); // Error: 404 | ||
``` |
Oops, something went wrong.