Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 8572caf

Browse files
src: Add codes for Section 8: Asynchronous JavaScript
1 parent 16933fb commit 8572caf

File tree

3 files changed

+166
-0
lines changed

3 files changed

+166
-0
lines changed
Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Asynchronous JavaScript</title>
8+
</head>
9+
<body>
10+
<h1>Asynchronous JavaScript</h1>
11+
<script>
12+
const getIDs = () => {
13+
return new Promise((resolve, reject) => {
14+
setTimeout(() => {
15+
const IDs = [1215, 285, 494, 1566];
16+
resolve(IDs);
17+
}, 2000);
18+
});
19+
};
20+
const getRecipe = (ID) => {
21+
return new Promise((resolve, reject) => {
22+
setTimeout((id) => {
23+
const recipe = { id: id, title: "lemon scampi" };
24+
resolve(recipe);
25+
}, 2000, ID);
26+
});
27+
};
28+
const getIngredients = (recipe) => {
29+
return new Promise((resolve, reject) => {
30+
setTimeout((r) => {
31+
const ingredients = [
32+
r.title,
33+
["pasta", "shrimp", "lemon", "tomatoes"]
34+
];
35+
resolve(ingredients);
36+
}, 2000, recipe);
37+
});
38+
};
39+
40+
getIDs()
41+
.then((IDs) => {
42+
console.log(`Got the IDs: ${IDs}`);
43+
return getRecipe(IDs[1]);
44+
})
45+
.then((recipe) => {
46+
console.log(`Got the recipe: ${JSON.stringify(recipe)}`);
47+
return getIngredients(recipe);
48+
})
49+
.then((ingredients) => {
50+
console.log(`Got the ingredients: ${JSON.stringify(ingredients)}`);
51+
})
52+
.catch((err) => {
53+
console.error(err);
54+
})
55+
</script>
56+
</body>
57+
</html>
Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Asynchronous JavaScript</title>
8+
</head>
9+
<body>
10+
<h1>Asynchronous JavaScript</h1>
11+
<script>
12+
const getIDs = () => {
13+
return new Promise((resolve, reject) => {
14+
setTimeout(() => {
15+
const IDs = [1215, 285, 494, 1566];
16+
resolve(IDs);
17+
}, 2000);
18+
});
19+
};
20+
const getRecipe = (ID) => {
21+
return new Promise((resolve, reject) => {
22+
setTimeout((id) => {
23+
const recipe = { id: id, title: "lemon scampi" };
24+
resolve(recipe);
25+
}, 2000, ID);
26+
});
27+
};
28+
const getIngredients = (recipe) => {
29+
return new Promise((resolve, reject) => {
30+
setTimeout((r) => {
31+
const ingredients = [
32+
r.title,
33+
["pasta", "shrimp", "lemon", "tomatoes"]
34+
];
35+
resolve(ingredients);
36+
}, 2000, recipe);
37+
});
38+
};
39+
40+
async function getData() {
41+
const IDs = await getIDs();
42+
const recipe = await getRecipe(IDs[1]);
43+
const ingredients = await getIngredients(recipe);
44+
45+
return ingredients;
46+
}
47+
48+
getData()
49+
.then((ingredients) => {
50+
const [title, list] = ingredients;
51+
console.log(`We need ${list} to make '${title}'`);
52+
})
53+
.catch((err) => {
54+
console.error("Failed to get the data.");
55+
});
56+
</script>
57+
</body>
58+
</html>
Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Asynchronous JavaScript</title>
8+
</head>
9+
<body>
10+
<h1>Asynchronous JavaScript</h1>
11+
<script>
12+
// Sample API provided by:
13+
// https://www.metaweather.com/api/
14+
// CORS workaround provided by:
15+
// https://cors-anywhere.herokuapp.com/
16+
17+
const corsUrl = "https://cors-anywhere.herokuapp.com";
18+
const targetUrl = "https://www.metaweather.com/api/location/2487956";
19+
const url = `${corsUrl}/${targetUrl}`;
20+
21+
// Style 1: Chaining Promises with `then`
22+
fetch(url)
23+
.then((res) => {
24+
return res.json();
25+
})
26+
.then((data) => {
27+
console.info("Style 1: Chaining the Promises with `then`");
28+
console.dir(data);
29+
})
30+
.catch((err) => {
31+
console.err(res);
32+
});
33+
34+
// Style 2: Using await/async
35+
async function getWeather() {
36+
const res = await fetch(url);
37+
const data = await res.json();
38+
39+
return data;
40+
}
41+
getWeather()
42+
.then((data) => {
43+
console.info("Style 2: Using await/async");
44+
console.dir(data);
45+
})
46+
.catch((err) => {
47+
console.error(err);
48+
})
49+
</script>
50+
</body>
51+
</html>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /