├── .gitignore ├── README.md ├── 09 - project ├── 01 - project template.html └── 02 - project complete.html ├── 07 - authentication ├── 06 - creating a middleman api.html ├── 06 - middleman api.js ├── 01 - credentials with a query string.html ├── 03 - credentials with a token.html ├── 02 - credentials with basic auth.html ├── 05 - apis without short term tokens.html └── 04 - keeping credentials secure.html ├── 04 - async and await ├── 02 - async and promises.html ├── 01 - making async code wait to finish.html ├── 03 - async functions and code structure.html └── 04 - async functions and error handling.html ├── 05 - sending data to an api ├── 01 - http methods.html ├── 03 - including cookies.html └── 02 - sending data.html ├── 01 - promises ├── 01 - promises.html ├── 03 - chaining.html ├── 05 - Promise.finally.html ├── 04 - attach at any time.html └── 02 - rejecting a promise.html ├── 08 - xss attacks ├── 01 - injecting a script.html ├── 03 - sanitizing urls.html ├── 02 - text instead of html.html ├── 04 - encoded string.html └── 05 - sanitized string.html ├── 03 - calling multiple endpoints └── 01 - Promise.all.html ├── 02 - the fetch method ├── 01 - window.fetch.html └── 02 - catching errors.html └── 06 - serializing form data ├── 01 - the formdata object.html ├── 02 - adding updating and removing items.html ├── 03 - sending formdata to an api.html ├── 04 - serializing formdata into a querystring.html └── 05 - serializing formdata into an object.html /.gitignore: -------------------------------------------------------------------------------- 1 | # Node 2 | node_modules 3 | test/results 4 | test/coverage 5 | 6 | ## OS X 7 | .DS_Store 8 | ._* 9 | .Spotlight-V100 10 | .Trashes -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # The APIs & Asynchronous JS Pocket Guide Source Code 2 | All of the source code for the [APIs & Asynchronous JS Pocket Guide](https://vanillajsguides.com). -------------------------------------------------------------------------------- /09 - project/01 - project template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Project Template 7 | 8 | 9 | 16 | 17 | 18 | 19 | 20 |
21 |

Loading the latest skwaks...

22 |
23 | 24 | 25 | 28 | 29 | -------------------------------------------------------------------------------- /07 - authentication/06 - creating a middleman api.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Creating a middleman API 7 | 8 | 9 | 10 | 11 | 12 | 13 | 25 | 26 | -------------------------------------------------------------------------------- /04 - async and await/02 - async and promises.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | async and Promises 7 | 8 | 9 | 10 | 11 | 12 | 13 | 28 | 29 | -------------------------------------------------------------------------------- /05 - sending data to an api/01 - http methods.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTTP Methods 7 | 8 | 9 | 10 | 11 | 12 | 13 | 28 | 29 | -------------------------------------------------------------------------------- /05 - sending data to an api/03 - including cookies.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Including Cookies 7 | 8 | 9 | 10 | 11 | 12 | 13 | 23 | 24 | -------------------------------------------------------------------------------- /01 - promises/01 - promises.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promises 7 | 8 | 9 | 10 | 11 | 12 | 13 | 30 | 31 | -------------------------------------------------------------------------------- /01 - promises/03 - chaining.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promises and Chaining 7 | 8 | 9 | 10 | 11 | 12 | 13 | 31 | 32 | -------------------------------------------------------------------------------- /01 - promises/05 - Promise.finally.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise.finally() 7 | 8 | 9 | 10 | 11 | 12 | 13 | 28 | 29 | -------------------------------------------------------------------------------- /01 - promises/04 - attach at any time.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Attach at any time 7 | 8 | 9 | 10 | 11 | 12 | 13 | 29 | 30 | -------------------------------------------------------------------------------- /07 - authentication/06 - middleman api.js: -------------------------------------------------------------------------------- 1 | // Listen for API requests 2 | addEventListener('fetch', function (event) { 3 | event.respondWith(handleRequest(event.request)); 4 | }); 5 | 6 | /** 7 | * Respond to the request 8 | * @param {Request} request 9 | */ 10 | async function handleRequest(request) { 11 | 12 | // Call the NYT API with our credentials 13 | let apiKey = '1234'; 14 | let response = await fetch(`https://api.nytimes.com/svc/topstories/v2/home.json?api-key=${apiKey}`); 15 | let data = await response.json(); 16 | 17 | // Return the data 18 | return new Response(JSON.stringify(data), { 19 | status: 200, 20 | headers: new Headers({ 21 | 'Access-Control-Allow-Origin': '*', 22 | 'Access-Control-Allow-Methods': 'GET, HEAD, POST, OPTIONS', 23 | 'Access-Control-Allow-Headers': '*' 24 | }) 25 | }); 26 | 27 | }; -------------------------------------------------------------------------------- /07 - authentication/01 - credentials with a query string.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Credentials with a auery string 7 | 8 | 9 | 10 | 11 | 12 | 13 | 30 | 31 | -------------------------------------------------------------------------------- /01 - promises/02 - rejecting a promise.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Rejecting a Promise 7 | 8 | 9 | 10 | 11 | 12 | 13 | 34 | 35 | -------------------------------------------------------------------------------- /07 - authentication/03 - credentials with a token.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Credentials with a token 7 | 8 | 9 | 10 | 11 | 12 | 13 | 34 | 35 | -------------------------------------------------------------------------------- /08 - xss attacks/01 - injecting a script.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Injecting a Script 7 | 8 | 9 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 37 | 38 | -------------------------------------------------------------------------------- /07 - authentication/02 - credentials with basic auth.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Credentials with basic auth 7 | 8 | 9 | 10 | 11 | 12 | 13 | 35 | 36 | -------------------------------------------------------------------------------- /07 - authentication/05 - apis without short term tokens.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | How to handle APIs without short term tokens 7 | 8 | 9 | 10 | 11 | 12 | 13 | 33 | 34 | -------------------------------------------------------------------------------- /08 - xss attacks/03 - sanitizing urls.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sanitizing URLs 7 | 8 | 9 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 42 | 43 | -------------------------------------------------------------------------------- /04 - async and await/01 - making async code wait to finish.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Making async code wait to finish 7 | 8 | 9 | 10 | 11 | 12 | 13 | 37 | 38 | -------------------------------------------------------------------------------- /08 - xss attacks/02 - text instead of html.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Text instead of HTML 7 | 8 | 9 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 51 | 52 | -------------------------------------------------------------------------------- /07 - authentication/04 - keeping credentials secure.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Keeping credentials secure 7 | 8 | 9 | 10 | 11 | 12 | 13 | 42 | 43 | -------------------------------------------------------------------------------- /03 - calling multiple endpoints/01 - Promise.all.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise.all() 7 | 8 | 9 | 10 | 11 | 12 | 13 | 40 | 41 | -------------------------------------------------------------------------------- /08 - xss attacks/04 - encoded string.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Encoded String 7 | 8 | 9 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 46 | 47 | -------------------------------------------------------------------------------- /02 - the fetch method/01 - window.fetch.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | window.fetch() 7 | 8 | 9 | 10 | 11 | 12 | 13 | 49 | 50 | -------------------------------------------------------------------------------- /06 - serializing form data/01 - the formdata object.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | The FormData Object 7 | 8 | 9 | 32 | 33 | 34 | 35 | 36 |

The FormData Object

37 | 38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 |
51 | 52 | 53 | 74 | 75 | -------------------------------------------------------------------------------- /04 - async and await/03 - async functions and code structure.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | async functions and code structure 7 | 8 | 9 | 10 | 11 | 12 | 13 | 67 | 68 | -------------------------------------------------------------------------------- /06 - serializing form data/02 - adding updating and removing items.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Adding, updating, and removing items from a FormData object 7 | 8 | 9 | 32 | 33 | 34 | 35 | 36 |

The FormData Object

37 | 38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 |
51 | 52 | 53 | 72 | 73 | -------------------------------------------------------------------------------- /06 - serializing form data/03 - sending formdata to an api.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sending FormData to an API 7 | 8 | 9 | 32 | 33 | 34 | 35 | 36 |

The FormData Object

37 | 38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 |
51 | 52 | 53 | 78 | 79 | -------------------------------------------------------------------------------- /05 - sending data to an api/02 - sending data.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sending Data 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 73 | 74 | -------------------------------------------------------------------------------- /04 - async and await/04 - async functions and error handling.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | async functions and error handling 7 | 8 | 9 | 10 | 11 | 12 | 13 | 75 | 76 | -------------------------------------------------------------------------------- /06 - serializing form data/04 - serializing formdata into a querystring.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Serializing FormData into a query string 7 | 8 | 9 | 32 | 33 | 34 | 35 | 36 |

The FormData Object

37 | 38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 |
51 | 52 | 53 | 78 | 79 | -------------------------------------------------------------------------------- /02 - the fetch method/02 - catching errors.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Catching Errors with Fetch 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 71 | 72 | -------------------------------------------------------------------------------- /06 - serializing form data/05 - serializing formdata into an object.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Serializing FormData into an object 7 | 8 | 9 | 32 | 33 | 34 | 35 | 36 |

The FormData Object

37 | 38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 |
51 | 52 | 53 | 126 | 127 | -------------------------------------------------------------------------------- /08 - xss attacks/05 - sanitized string.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sanitized String 7 | 8 | 9 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 125 | 126 | -------------------------------------------------------------------------------- /09 - project/02 - project complete.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Project Complete 7 | 8 | 9 | 32 | 33 | 34 | 35 | 36 |
37 |

Loading the latest skwaks...

38 |
39 | 40 | 41 | 191 | 192 | --------------------------------------------------------------------------------