{"id":19150446,"url":"https://github.com/vicompany/workshop-async-await","last_synced_at":"2026-06-11T23:31:33.042Z","repository":{"id":26455202,"uuid":"103669173","full_name":"vicompany/workshop-async-await","owner":"vicompany","description":"An ES2017 async/await workshop using the github API","archived":false,"fork":false,"pushed_at":"2022-12-05T04:56:52.000Z","size":489,"stargazers_count":0,"open_issues_count":8,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-09T17:02:46.340Z","etag":null,"topics":["async-functions","ecmascript2017"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vicompany.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-15T14:54:45.000Z","updated_at":"2020-03-18T10:52:36.000Z","dependencies_parsed_at":"2023-01-14T04:41:43.614Z","dependency_job_id":null,"html_url":"https://github.com/vicompany/workshop-async-await","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vicompany/workshop-async-await","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vicompany%2Fworkshop-async-await","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vicompany%2Fworkshop-async-await/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vicompany%2Fworkshop-async-await/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vicompany%2Fworkshop-async-await/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vicompany","download_url":"https://codeload.github.com/vicompany/workshop-async-await/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vicompany%2Fworkshop-async-await/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34222709,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-11T02:00:06.485Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["async-functions","ecmascript2017"],"created_at":"2024-11-09T08:12:03.809Z","updated_at":"2026-06-11T23:31:33.003Z","avatar_url":"https://github.com/vicompany.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Workshop Async/await\n\nThis repository contains a mock server, dummy code and documentation to acquire knowledge of async functions.\n\n## The basics aka the golden rules of async/await\n\nES7 Async/await allows us to write asynchronous JavaScript code that looks synchronous.\n\n### 1. The foundation of async functions are [Promises](http://exploringjs.com/es6/ch_promises.html).\n\nSo readup on Promises when you don't fully understand them yet.\n- [MDN - Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)\n- [Exploring JS - Promises for async programming](http://exploringjs.com/es6/ch_promises.html)\n\n### 2. Async functions always return a Promise _when called_\n\n```javascript\nasync function greet(name) {\n  if (name.toLocaleLowerCase() === 'bob'){\n    throw new Error('Not allowed');\n  }\n\n  return `Hello ${name}`;\n}\n\ngreet('Joe')\n  .then(console.log) // Hello Joe\n\ngreet('Bob')\n  .then(console.log)\n  .catch(console.error); // Error: Not allowed\n```\n\n### 3. An async function can contain an `await` expression\n\n- The `await` operator is used to wait for the result of a `Promise`.\n- The `await` operator can only be used __inside an async function!__\n\n```javascript\nconst getJson = url =\u003e fetch(url).then(res =\u003e res.json());\n\nconst getUsers = async () =\u003e {\n  const users = await getJson('/users');\n\n  console.log(users);\n}\n\ngetUsers();\n```\n\nWhen the return value of the `await` expression is not a `Promise`, it's converted to a resolved Promise.\n\n```javascript\nasync function w00t() {\n  const value = await 1337;\n\n  console.log(value); // 1337\n}\n\nw00t();\n```\n\nAnd when the return value is a Promise, you can just return it without using `await` (and without wrapping the result).\n\n```javascript\nasync function getStuff(id) {\n  const url = await getUrl(id);\n\n  return fetch(url).then(res =\u003e res.json());\n}\n\n// Don't do this!\nasync function getStuff(id) {\n  const url = await getUrl(id);\n\n  return await fetch(url).then(res =\u003e res.json());\n}\n```\n\n- [MDN - await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await)\n- [ESLint - Disallow unnecessary return await (no-return-await)](https://eslint.org/docs/rules/no-return-await)\n\n### 4. Handling errors and results with `await`.\n\nThe operator `await` waits for its operand, a Promise, to be settled:\n\n- If the Promise is fulfilled, the result of `await` is the fulfillment value.\n- If the Promise is rejected, `await` throws the rejection value.\n\n```javascript\nasync function getUsers() {\n  let users = [];\n\n  try {\n    users = await getJson('/users');\n  } catch (err) {\n    console.error(`Could not retrieve users: ${err.message}`);\n  }\n\n  return users;\n}\n```\n\n### 5. `await` is sequential, use `Promise.all()` for parallel execution\n\nThe following functions are executed sequentially.\n\n```javascript\nasync function foo() {\n  const result1 = await asyncFunc1();\n  const result2 = await asyncFunc2();\n}\n```\n\nBut executing them in parallel can speed things up. And you can use ES6 destructuring assignment.\n\n```javascript\nasync function foo() {\n  const [result1, result2] = await Promise.all([\n    asyncFunc1(),\n    asyncFunc2(),\n  ]);\n}\n```\n\n- [Exploring JS - Await is sequential, Promise.all() is parallel](http://exploringjs.com/es2016-es2017/ch_async-functions.html#_await-is-sequential-promiseall-is-parallel)\n- [MDN - Destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)\n\n## More information\n\n- http://2ality.com/2016/10/async-function-tips.html\n- http://exploringjs.com/es2016-es2017/ch_async-functions.html\n- https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial-c7ec10518dd9\n\n## Getting started\n\n- Clone this repo.\n- `npm install`.\n- `npm start` to start the dev server on http://localhost:3000/.\n\n## Assignment\n\nThe demo project contains some nice [callback-based JavaScript code](./public/js/main.js) which uses the [Github REST API](https://developer.github.com/v3/) to display information about our repositories.\n\nIt's up to you to:\n\n- Rewrite [this code](./public/js/main.js) to async/await (remove the callbacks and add some functions).\n- Add the sum of the contributions.\n- Add the user details.\n- Go crazy if you like. :metal:\n\n## Notes\n\n- You need the latest Chrome or Firefox browser for this to run.\n- A cache (localStorage) is used to circumvent the APIs [rate limiting](https://developer.github.com/v3/#rate-limiting). So keep that in place.\n- For Firefox you need to enable the following settings (in `about:config`):\n  - ~ES Modules: `dom.moduleScripts.enabled`.~\n  - The [`\u003cdialog\u003e`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) element: `dom.dialog_element.enabled`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvicompany%2Fworkshop-async-await","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvicompany%2Fworkshop-async-await","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvicompany%2Fworkshop-async-await/lists"}