├── 01-then
├── .editorconfig
├── .prettierrc
├── favicon.ico
├── index.html
├── index.js
└── package.json
├── 02-catch
├── .editorconfig
├── .prettierrc
├── favicon.ico
├── index.html
├── index.js
└── package.json
├── 03-finally
├── .editorconfig
├── .prettierrc
├── favicon.ico
├── index.html
├── index.js
├── jsconfig.json
├── package.json
└── spinner.gif
├── 04-reject
├── .editorconfig
├── .prettierrc
├── favicon.ico
├── index.html
├── index.js
├── jsconfig.json
├── package.json
└── spinner.gif
├── 05-resolve
├── .editorconfig
├── .prettierrc
├── favicon.ico
├── index.html
├── index.js
├── jquery-3.3.1.js
├── jsconfig.json
├── package.json
└── spinner.gif
├── 06-constructor
├── .editorconfig
├── .prettierrc
├── index.js
└── package.json
├── 07-promisify
├── .editorconfig
├── .prettierrc
├── index.js
└── package.json
├── 08-race
├── .editorconfig
├── .prettierrc
├── index.js
├── jsconfig.json
└── package.json
├── 09-all
├── .editorconfig
├── .prettierrc
├── favicon.ico
├── index.html
├── index.js
├── jsconfig.json
├── package.json
└── spinner.gif
├── 10-allsettled
├── .editorconfig
├── .prettierrc
├── favicon.ico
├── index.html
├── index.js
├── jsconfig.json
├── package.json
└── spinner.gif
├── 11-any
├── .editorconfig
├── .prettierrc
├── favicon.ico
├── index.html
├── index.js
├── jsconfig.json
├── package.json
└── spinner.gif
├── 12-await
├── .editorconfig
├── .prettierrc
├── favicon.ico
├── index.html
├── index.js
├── jsconfig.json
├── package.json
└── spinner.gif
└── README.md
/01-then/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | end_of_line = lf
6 | indent_size = 2
7 | indent_style = space
8 | insert_final_newline = true
9 | tab_width = 2
10 | trim_trailing_whitespace = true
11 |
--------------------------------------------------------------------------------
/01-then/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 60,
3 | "tabWidth": 2
4 | }
5 |
--------------------------------------------------------------------------------
/01-then/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mariusschulz/egghead-javascript-promises/8789960c821945af7e91b4ff98323251e4a7e8a5/01-then/favicon.ico
--------------------------------------------------------------------------------
/01-then/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Promises in JavaScript
7 |
17 |
18 |
19 | Star Wars Films
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/01-then/index.js:
--------------------------------------------------------------------------------
1 | const API_URL = "https://starwars.egghead.training/";
2 | const output = document.getElementById("output");
3 |
4 | function getFilmTitles(films) {
5 | return films
6 | .slice()
7 | .sort((a, b) => a.episode_id - b.episode_id)
8 | .map(film => `${film.episode_id}. ${film.title}`)
9 | .join("\n");
10 | }
11 |
12 | output.innerText = "Loading ...";
13 |
14 | fetch(API_URL + "films")
15 | .then(response => response.json())
16 | .then(films => {
17 | output.innerText = getFilmTitles(films);
18 | });
19 |
--------------------------------------------------------------------------------
/01-then/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Create a Promise Chain in JavaScript with Promise.prototype.then()",
3 | "description": "",
4 | "devDependencies": {
5 | "parcel-bundler": "^1.10.0"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/02-catch/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | end_of_line = lf
6 | indent_size = 2
7 | indent_style = space
8 | insert_final_newline = true
9 | tab_width = 2
10 | trim_trailing_whitespace = true
11 |
--------------------------------------------------------------------------------
/02-catch/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 60,
3 | "tabWidth": 2
4 | }
5 |
--------------------------------------------------------------------------------
/02-catch/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mariusschulz/egghead-javascript-promises/8789960c821945af7e91b4ff98323251e4a7e8a5/02-catch/favicon.ico
--------------------------------------------------------------------------------
/02-catch/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Promises in JavaScript
7 |
17 |
18 |
19 | Star Wars Films
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/02-catch/index.js:
--------------------------------------------------------------------------------
1 | const API_URL = "https://starwars.egghead.training/";
2 | const output = document.getElementById("output");
3 |
4 | function getFilmTitles(films) {
5 | return films
6 | .slice()
7 | .sort((a, b) => a.episode_id - b.episode_id)
8 | .map(film => `${film.episode_id}. ${film.title}`)
9 | .join("\n");
10 | }
11 |
12 | output.innerText = "Loading ...";
13 |
14 | // fetch(API_URL + "films")
15 | fetch(API_URL + "movies")
16 | .then(response => {
17 | if (!response.ok) {
18 | throw Error("Unsuccessful response");
19 | }
20 | return response.json().then(films => {
21 | output.innerText = getFilmTitles(films);
22 | });
23 | })
24 | .catch(error => {
25 | console.warn(error);
26 | output.innerText = ":(";
27 | });
28 |
--------------------------------------------------------------------------------
/02-catch/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Catch Errors in a JavaScript Promise Chain with Promise.prototype.catch()",
3 | "description": "",
4 | "devDependencies": {
5 | "parcel-bundler": "^1.10.0"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/03-finally/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | end_of_line = lf
6 | indent_size = 2
7 | indent_style = space
8 | insert_final_newline = true
9 | tab_width = 2
10 | trim_trailing_whitespace = true
11 |
--------------------------------------------------------------------------------
/03-finally/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 60,
3 | "tabWidth": 2
4 | }
5 |
--------------------------------------------------------------------------------
/03-finally/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mariusschulz/egghead-javascript-promises/8789960c821945af7e91b4ff98323251e4a7e8a5/03-finally/favicon.ico
--------------------------------------------------------------------------------
/03-finally/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Promises in JavaScript
7 |
17 |
18 |
19 | Star Wars Films
20 |
21 |
22 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/03-finally/index.js:
--------------------------------------------------------------------------------
1 | const API_URL = "https://starwars.egghead.training/";
2 |
3 | const output = document.getElementById("output");
4 | const spinner = document.getElementById("spinner");
5 |
6 | function getFilmTitles(films) {
7 | return films
8 | .slice()
9 | .sort((a, b) => a.episode_id - b.episode_id)
10 | .map(film => `${film.episode_id}. ${film.title}`)
11 | .join("\n");
12 | }
13 |
14 | fetch(API_URL + "films")
15 | .then(response => {
16 | if (!response.ok) {
17 | throw new Error("Unsuccessful response");
18 | }
19 | return response.json().then(films => {
20 | output.innerText = getFilmTitles(films);
21 | });
22 | })
23 | .catch(error => {
24 | console.warn(error);
25 | output.innerText = ":(";
26 | })
27 | .finally(() => {
28 | spinner.remove();
29 | });
30 |
--------------------------------------------------------------------------------
/03-finally/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": [
4 | "dom",
5 | "es5",
6 | "es2018.promise"
7 | ]
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/03-finally/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Execute Cleanup Logic in a JavaScript Promise Chain with Promise.prototype.finally()",
3 | "description": "",
4 | "devDependencies": {
5 | "parcel-bundler": "^1.10.0"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/03-finally/spinner.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mariusschulz/egghead-javascript-promises/8789960c821945af7e91b4ff98323251e4a7e8a5/03-finally/spinner.gif
--------------------------------------------------------------------------------
/04-reject/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | end_of_line = lf
6 | indent_size = 2
7 | indent_style = space
8 | insert_final_newline = true
9 | tab_width = 2
10 | trim_trailing_whitespace = true
11 |
--------------------------------------------------------------------------------
/04-reject/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 60,
3 | "tabWidth": 2
4 | }
5 |
--------------------------------------------------------------------------------
/04-reject/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mariusschulz/egghead-javascript-promises/8789960c821945af7e91b4ff98323251e4a7e8a5/04-reject/favicon.ico
--------------------------------------------------------------------------------
/04-reject/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Promises in JavaScript
7 |
17 |
18 |
19 | Star Wars Films
20 |
21 |
22 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/04-reject/index.js:
--------------------------------------------------------------------------------
1 | const API_URL = "https://starwars.egghead.training/";
2 |
3 | const output = document.getElementById("output");
4 | const spinner = document.getElementById("spinner");
5 |
6 | function getFilmTitles(films) {
7 | return films
8 | .slice()
9 | .sort((a, b) => a.episode_id - b.episode_id)
10 | .map(film => `${film.episode_id}. ${film.title}`)
11 | .join("\n");
12 | }
13 |
14 | // fetch(API_URL + "films")
15 | fetch(API_URL + "movies")
16 | .then(response => {
17 | if (!response.ok) {
18 | return Promise.reject(
19 | new Error("Unsuccessful response")
20 | );
21 | }
22 | return response.json().then(films => {
23 | output.innerText = getFilmTitles(films);
24 | });
25 | })
26 | .catch(error => {
27 | console.warn(error);
28 | output.innerText = ":(";
29 | })
30 | .finally(() => {
31 | spinner.remove();
32 | });
33 |
--------------------------------------------------------------------------------
/04-reject/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": [
4 | "dom",
5 | "es5",
6 | "es2018.promise"
7 | ]
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/04-reject/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Create a Rejected Promise in JavaScript with Promise.reject()",
3 | "description": "",
4 | "devDependencies": {
5 | "parcel-bundler": "^1.10.0"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/04-reject/spinner.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mariusschulz/egghead-javascript-promises/8789960c821945af7e91b4ff98323251e4a7e8a5/04-reject/spinner.gif
--------------------------------------------------------------------------------
/05-resolve/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | end_of_line = lf
6 | indent_size = 2
7 | indent_style = space
8 | insert_final_newline = true
9 | tab_width = 2
10 | trim_trailing_whitespace = true
11 |
--------------------------------------------------------------------------------
/05-resolve/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 60,
3 | "tabWidth": 2
4 | }
5 |
--------------------------------------------------------------------------------
/05-resolve/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mariusschulz/egghead-javascript-promises/8789960c821945af7e91b4ff98323251e4a7e8a5/05-resolve/favicon.ico
--------------------------------------------------------------------------------
/05-resolve/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Promises in JavaScript
7 |
17 |
18 |
19 | Star Wars Films
20 |
21 |
22 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/05-resolve/index.js:
--------------------------------------------------------------------------------
1 | // Required to make jQuery work within CodeSandbox
2 | const $ = window.jQuery || require("jquery");
3 |
4 | const API_URL = "https://starwars.egghead.training/";
5 |
6 | const output = document.getElementById("output");
7 | const spinner = document.getElementById("spinner");
8 |
9 | function getFilmTitles(films) {
10 | return films
11 | .slice()
12 | .sort((a, b) => a.episode_id - b.episode_id)
13 | .map(film => `${film.episode_id}. ${film.title}`)
14 | .join("\n");
15 | }
16 |
17 | Promise.resolve($.ajax(API_URL + "films"))
18 | .then(films => {
19 | output.innerText = getFilmTitles(films);
20 | })
21 | .catch(error => {
22 | console.warn(error);
23 | output.innerText = ":(";
24 | })
25 | .finally(() => {
26 | spinner.remove();
27 | });
28 |
--------------------------------------------------------------------------------
/05-resolve/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": [
4 | "dom",
5 | "es5",
6 | "es2018.promise"
7 | ]
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/05-resolve/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Create a Resolved Promise in JavaScript with Promise.resolve()",
3 | "description": "",
4 | "dependencies": {
5 | "jquery": "^3.3.1"
6 | },
7 | "devDependencies": {
8 | "parcel-bundler": "^1.10.0"
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/05-resolve/spinner.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mariusschulz/egghead-javascript-promises/8789960c821945af7e91b4ff98323251e4a7e8a5/05-resolve/spinner.gif
--------------------------------------------------------------------------------
/06-constructor/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | end_of_line = lf
6 | indent_size = 2
7 | indent_style = space
8 | insert_final_newline = true
9 | tab_width = 2
10 | trim_trailing_whitespace = true
11 |
--------------------------------------------------------------------------------
/06-constructor/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 60,
3 | "tabWidth": 2
4 | }
5 |
--------------------------------------------------------------------------------
/06-constructor/index.js:
--------------------------------------------------------------------------------
1 | function sleep(ms) {
2 | return new Promise(resolve => {
3 | setTimeout(resolve, ms);
4 | });
5 | }
6 |
7 | console.log("Right away");
8 |
9 | sleep(1000)
10 | .then(() => {
11 | console.log("After 1s");
12 | })
13 | .then(() => sleep(1000))
14 | .then(() => {
15 | console.log("After 2s");
16 | })
17 | .catch(() => {
18 | console.log("Rejected");
19 | });
20 |
--------------------------------------------------------------------------------
/06-constructor/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Create a New Promise in JavaScript with the Promise Constructor",
3 | "description": "",
4 | "devDependencies": {
5 | "parcel-bundler": "^1.10.0"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/07-promisify/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | end_of_line = lf
6 | indent_size = 2
7 | indent_style = space
8 | insert_final_newline = true
9 | tab_width = 2
10 | trim_trailing_whitespace = true
11 |
--------------------------------------------------------------------------------
/07-promisify/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 60,
3 | "tabWidth": 2
4 | }
5 |
--------------------------------------------------------------------------------
/07-promisify/index.js:
--------------------------------------------------------------------------------
1 | const fs = require("fs");
2 | const util = require("util");
3 |
4 | const readFile = util.promisify(fs.readFile);
5 |
6 | readFile(__filename, "utf8").then(
7 | contents => {
8 | console.log(contents);
9 | },
10 | error => {
11 | console.error(error);
12 | }
13 | );
14 |
15 | /*
16 | function readFile(path, encoding) {
17 | return new Promise((resolve, reject) => {
18 | fs.readFile(path, encoding, (error, contents) => {
19 | if (error) {
20 | reject(error);
21 | } else {
22 | resolve(contents);
23 | }
24 | });
25 | });
26 | }
27 | */
28 |
--------------------------------------------------------------------------------
/07-promisify/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Convert a Callback-Based JavaScript Function to a Promise-Based One",
3 | "description": "",
4 | "devDependencies": {
5 | "parcel-bundler": "^1.10.0"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/08-race/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | end_of_line = lf
6 | indent_size = 2
7 | indent_style = space
8 | insert_final_newline = true
9 | tab_width = 2
10 | trim_trailing_whitespace = true
11 |
--------------------------------------------------------------------------------
/08-race/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 60,
3 | "tabWidth": 2
4 | }
5 |
--------------------------------------------------------------------------------
/08-race/index.js:
--------------------------------------------------------------------------------
1 | function resolveAfter(ms, value) {
2 | return new Promise(resolve => {
3 | setTimeout(() => {
4 | resolve(value);
5 | }, ms);
6 | });
7 | }
8 |
9 | function timeout(ms, promise) {
10 | let timeoutID;
11 | const timeoutPromise = new Promise((_, reject) => {
12 | timeoutID = setTimeout(() => {
13 | reject(
14 | new Error(`Operation timed out after ${ms}ms`)
15 | );
16 | }, ms);
17 | });
18 | return Promise.race([promise, timeoutPromise]).finally(
19 | () => {
20 | clearTimeout(timeoutID);
21 | }
22 | );
23 | }
24 |
25 | const promise = resolveAfter(1000, "A");
26 |
27 | timeout(500, promise).then(
28 | value => {
29 | console.log(`Fulfilled: ${value}`);
30 | },
31 | error => {
32 | console.log(`Rejected: ${error}`);
33 | }
34 | );
35 |
--------------------------------------------------------------------------------
/08-race/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": [
4 | "dom",
5 | "es5",
6 | "es2018.promise"
7 | ]
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/08-race/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Wait for the Fastest JavaScript Promise to Settle with Promise.race()",
3 | "description": "",
4 | "devDependencies": {
5 | "parcel-bundler": "^1.10.0"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/09-all/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | end_of_line = lf
6 | indent_size = 2
7 | indent_style = space
8 | insert_final_newline = true
9 | tab_width = 2
10 | trim_trailing_whitespace = true
11 |
--------------------------------------------------------------------------------
/09-all/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 60,
3 | "tabWidth": 2
4 | }
5 |
--------------------------------------------------------------------------------
/09-all/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mariusschulz/egghead-javascript-promises/8789960c821945af7e91b4ff98323251e4a7e8a5/09-all/favicon.ico
--------------------------------------------------------------------------------
/09-all/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Promises in JavaScript
7 |
17 |
18 |
19 | Star Wars Films
20 |
21 |
22 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/09-all/index.js:
--------------------------------------------------------------------------------
1 | const API_URL = "https://starwars.egghead.training/";
2 |
3 | const output = document.getElementById("output");
4 | const spinner = document.getElementById("spinner");
5 |
6 | function queryAPI(endpoint) {
7 | return fetch(API_URL + endpoint).then(response => {
8 | return response.ok
9 | ? response.json()
10 | : Promise.reject(Error("Unsuccessful response"));
11 | });
12 | }
13 |
14 | Promise.all([
15 | queryAPI("films"),
16 | queryAPI("planets"),
17 | queryAPI("species")
18 | ])
19 | .then(([films, planets, species]) => {
20 | output.innerText =
21 | `${films.length} films, ` +
22 | `${planets.length} planets, ` +
23 | `${species.length} species`;
24 | })
25 | .catch(error => {
26 | console.warn(error);
27 | output.innerText = ":(";
28 | })
29 | .finally(() => {
30 | spinner.remove();
31 | });
32 |
--------------------------------------------------------------------------------
/09-all/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": [
4 | "dom",
5 | "es5",
6 | "es2018.promise"
7 | ]
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/09-all/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Wait for Multiple JavaScript Promises to Settle with Promise.all()",
3 | "description": "",
4 | "devDependencies": {
5 | "parcel-bundler": "^1.10.0"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/09-all/spinner.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mariusschulz/egghead-javascript-promises/8789960c821945af7e91b4ff98323251e4a7e8a5/09-all/spinner.gif
--------------------------------------------------------------------------------
/10-allsettled/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | end_of_line = lf
6 | indent_size = 2
7 | indent_style = space
8 | insert_final_newline = true
9 | tab_width = 2
10 | trim_trailing_whitespace = true
--------------------------------------------------------------------------------
/10-allsettled/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 60,
3 | "tabWidth": 2
4 | }
5 |
--------------------------------------------------------------------------------
/10-allsettled/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mariusschulz/egghead-javascript-promises/8789960c821945af7e91b4ff98323251e4a7e8a5/10-allsettled/favicon.ico
--------------------------------------------------------------------------------
/10-allsettled/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Promises in JavaScript
7 |
17 |
18 |
19 | Star Wars Films
20 |
21 |
22 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/10-allsettled/index.js:
--------------------------------------------------------------------------------
1 | const API_URL = "https://starwars.egghead.training/";
2 |
3 | const output = document.getElementById("output");
4 | const spinner = document.getElementById("spinner");
5 |
6 | function queryAPI(endpoint) {
7 | return fetch(API_URL + endpoint).then(response => {
8 | return response.ok
9 | ? response.json()
10 | : Promise.reject(Error("Unsuccessful response"));
11 | });
12 | }
13 |
14 | Promise.allSettled([
15 | queryAPI("films").then(f => `${f.length} films`),
16 | queryAPI("planets").then(p => `${p.length} planets`),
17 | queryAPI("species").then(s => `${s.length} species`),
18 | queryAPI("vehicles").then(v => `${v.length} vehicles`)
19 | ])
20 | .then(results => {
21 | const statistics = results
22 | .filter(result => result.status === "fulfilled")
23 | .map(result => result.value);
24 | output.innerText =
25 | statistics.length === 0
26 | ? "Failed to load statistics :("
27 | : statistics.join("\n");
28 | })
29 | .catch(error => {
30 | console.warn(error);
31 | output.innerText = ":(";
32 | })
33 | .finally(() => {
34 | spinner.remove();
35 | });
36 |
--------------------------------------------------------------------------------
/10-allsettled/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": [
4 | "dom",
5 | "es5",
6 | "es2018.promise"
7 | ]
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/10-allsettled/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "wait-for-multiple-javascript-promises-to-settle-with-promiseallsettled",
3 | "description": "",
4 | "devDependencies": {
5 | "parcel-bundler": "^1.10.0"
6 | },
7 | "keywords": []
8 | }
--------------------------------------------------------------------------------
/10-allsettled/spinner.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mariusschulz/egghead-javascript-promises/8789960c821945af7e91b4ff98323251e4a7e8a5/10-allsettled/spinner.gif
--------------------------------------------------------------------------------
/11-any/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | end_of_line = lf
6 | indent_size = 2
7 | indent_style = space
8 | insert_final_newline = true
9 | tab_width = 2
10 | trim_trailing_whitespace = true
--------------------------------------------------------------------------------
/11-any/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 60,
3 | "tabWidth": 2
4 | }
5 |
--------------------------------------------------------------------------------
/11-any/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mariusschulz/egghead-javascript-promises/8789960c821945af7e91b4ff98323251e4a7e8a5/11-any/favicon.ico
--------------------------------------------------------------------------------
/11-any/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Promises in JavaScript
7 |
17 |
18 |
19 | Star Wars Films
20 |
21 |
22 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/11-any/index.js:
--------------------------------------------------------------------------------
1 | const API_URL_1 = "https://starwars.egghead.training/";
2 | const API_URL_2 = "https://swapi.mariusschulz.com/";
3 |
4 | const output = document.getElementById("output");
5 | const spinner = document.getElementById("spinner");
6 |
7 | function query(rootURL, endpoint) {
8 | return fetch(rootURL + endpoint).then(response => {
9 | return response.ok
10 | ? response.json()
11 | : Promise.reject(Error("Unsuccessful response"));
12 | });
13 | }
14 |
15 | function queryAPI(endpoint) {
16 | return Promise.any([
17 | query(API_URL_1, endpoint),
18 | query(API_URL_2, endpoint)
19 | ]).catch(() => {
20 | return Promise.reject(
21 | Error(`Failed to fetch endpoint "${endpoint}"`)
22 | );
23 | });
24 | }
25 |
26 | function getFilmTitles(films) {
27 | return films
28 | .slice()
29 | .sort((a, b) => a.episode_id - b.episode_id)
30 | .map(film => `${film.episode_id}. ${film.title}`)
31 | .join("\n");
32 | }
33 |
34 | queryAPI("films")
35 | .then(films => {
36 | output.innerText = getFilmTitles(films);
37 | })
38 | .catch(error => {
39 | console.warn(error);
40 | output.innerText = ":(";
41 | })
42 | .finally(() => {
43 | spinner.remove();
44 | });
45 |
--------------------------------------------------------------------------------
/11-any/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": [
4 | "dom",
5 | "es5",
6 | "es2018.promise"
7 | ]
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/11-any/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "wait-for-the-fastest-javascript-promise-to-be-fulfilled-with-promiseany",
3 | "description": "",
4 | "devDependencies": {
5 | "parcel-bundler": "^1.10.0"
6 | },
7 | "keywords": []
8 | }
--------------------------------------------------------------------------------
/11-any/spinner.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mariusschulz/egghead-javascript-promises/8789960c821945af7e91b4ff98323251e4a7e8a5/11-any/spinner.gif
--------------------------------------------------------------------------------
/12-await/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | end_of_line = lf
6 | indent_size = 2
7 | indent_style = space
8 | insert_final_newline = true
9 | tab_width = 2
10 | trim_trailing_whitespace = true
11 |
--------------------------------------------------------------------------------
/12-await/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 60,
3 | "tabWidth": 2
4 | }
5 |
--------------------------------------------------------------------------------
/12-await/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mariusschulz/egghead-javascript-promises/8789960c821945af7e91b4ff98323251e4a7e8a5/12-await/favicon.ico
--------------------------------------------------------------------------------
/12-await/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Promises in JavaScript
7 |
17 |
18 |
19 | Star Wars Films
20 |
21 |
22 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/12-await/index.js:
--------------------------------------------------------------------------------
1 | const API_URL = "https://starwars.egghead.training/";
2 |
3 | const output = document.getElementById("output");
4 | const spinner = document.getElementById("spinner");
5 |
6 | async function queryAPI(endpoint) {
7 | const response = await fetch(API_URL + endpoint);
8 | if (response.ok) {
9 | return response.json();
10 | }
11 | throw Error("Unsuccessful response");
12 | }
13 |
14 | async function main() {
15 | try {
16 | const [films, planets, species] = await Promise.all([
17 | queryAPI("films"),
18 | queryAPI("planets"),
19 | queryAPI("species")
20 | ]);
21 | output.innerText =
22 | `${films.length} films, ` +
23 | `${planets.length} planets, ` +
24 | `${species.length} species`;
25 | } catch (error) {
26 | console.warn(error);
27 | output.innerText = ":(";
28 | } finally {
29 | spinner.remove();
30 | }
31 | }
32 |
33 | main();
34 |
--------------------------------------------------------------------------------
/12-await/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": [
4 | "dom",
5 | "es5",
6 | "es2018.promise"
7 | ]
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/12-await/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Await a JavaScript Promise in an async Function with the await Operator",
3 | "description": "",
4 | "devDependencies": {
5 | "parcel-bundler": "^1.10.0"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/12-await/spinner.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mariusschulz/egghead-javascript-promises/8789960c821945af7e91b4ff98323251e4a7e8a5/12-await/spinner.gif
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # JavaScript Promises in Depth
2 |
3 |
4 |
5 | This repo contains the code for all lessons of my [JavaScript Promises in Depth](https://egghead.io/courses/javascript-promises-in-depth) course on [egghead.io](https://egghead.io/).
6 |
7 | 1. [Create a Promise Chain in JavaScript with `Promise.prototype.then()`](https://egghead.io/lessons/javascript-create-a-promise-chain-in-javascript-with-promise-prototype-then)
8 | 2. [Catch Errors in a JavaScript Promise Chain with `Promise.prototype.catch()`](https://egghead.io/lessons/javascript-catch-errors-in-a-javascript-promise-chain-with-promise-prototype-catch)
9 | 3. [Execute Cleanup Logic in a JavaScript Promise Chain with `Promise.prototype.finally()`](https://egghead.io/lessons/javascript-execute-cleanup-logic-in-a-javascript-promise-chain-with-promise-prototype-finally)
10 | 4. [Create a Rejected Promise in JavaScript with `Promise.reject()`](https://egghead.io/lessons/javascript-create-a-rejected-promise-in-javascript-with-promise-reject)
11 | 5. [Create a Resolved Promise in JavaScript with `Promise.resolve()`](https://egghead.io/lessons/javascript-create-a-resolved-promise-in-javascript-with-promise-resolve)
12 | 6. [Create a New Promise in JavaScript with the Promise Constructor](https://egghead.io/lessons/javascript-create-a-new-promise-in-javascript-with-the-promise-constructor)
13 | 7. [Convert a Callback-Based JavaScript Function to a Promise-Based One](https://egghead.io/lessons/javascript-convert-a-callback-based-javascript-function-to-a-promise-based-one)
14 | 8. [Wait for the Fastest JavaScript Promise to Settle with `Promise.race()`](https://egghead.io/lessons/javascript-wait-for-the-fastest-javascript-promise-to-settle-with-promise-race)
15 | 9. [Wait for Multiple JavaScript Promises to Settle with `Promise.all()`](https://egghead.io/lessons/javascript-wait-for-multiple-javascript-promises-to-settle-with-promise-all)
16 | 10. [Wait for Multiple JavaScript Promises to Settle with `Promise.allSettled()`](https://egghead.io/lessons/javascript-wait-for-multiple-javascript-promises-to-settle-with-promise-allsettled)
17 | 11. [Wait for the Fastest JavaScript Promise to Be Fulfilled with `Promise.any()`](https://egghead.io/lessons/javascript-wait-for-the-fastest-javascript-promise-to-be-fulfilled-with-promise-any)
18 | 12. [Await a JavaScript Promise in an async Function with the `await` Operator](https://egghead.io/lessons/javascript-await-a-javascript-promise-in-an-async-function-with-the-await-operator)
19 |
--------------------------------------------------------------------------------
22 | 