{"id":17398194,"url":"https://github.com/jaydson/es7-async","last_synced_at":"2025-04-14T21:51:50.979Z","repository":{"id":30085639,"uuid":"33635265","full_name":"jaydson/es7-async","owner":"jaydson","description":"Playing around with ES7 async functions","archived":false,"fork":false,"pushed_at":"2017-06-23T14:18:20.000Z","size":14,"stargazers_count":155,"open_issues_count":0,"forks_count":15,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-28T10:01:35.324Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jaydson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-08T22:19:43.000Z","updated_at":"2024-09-12T21:15:41.000Z","dependencies_parsed_at":"2022-08-28T18:24:33.957Z","dependency_job_id":null,"html_url":"https://github.com/jaydson/es7-async","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaydson%2Fes7-async","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaydson%2Fes7-async/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaydson%2Fes7-async/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaydson%2Fes7-async/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaydson","download_url":"https://codeload.github.com/jaydson/es7-async/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248968741,"owners_count":21191158,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-10-16T14:42:24.489Z","updated_at":"2025-04-14T21:51:50.947Z","avatar_url":"https://github.com/jaydson.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# es7-async\nPlaying around with [ES7 async functions](https://github.com/lukehoban/ecmascript-asyncawait)\n\n## Case study\nIn this case study our program must load 3 resources (json files).\nThe requests must to be chained, one after another, logging the output for each request success.\n\n### Old friend Ajax\nFirst, let's look how we can accomplish the mission with our old friend Ajax.\nThe `ajax` function is responsible for creating an `xhr` object and execute the callback returning the data.\nNo big deal here, we have done this a lot in the past, right?\n\n```javascript\n// Getting data\najax('data.json', (data) =\u003e {\n\tconsole.log('AJAX/data \u003e\u003e\u003e', JSON.parse(data));\n\n\t// Getting users\n\tajax('users.json', (users) =\u003e {\n\t\tconsole.log('AJAX/users \u003e\u003e\u003e', JSON.parse(users));\n\n\t\t// Getting products\n\t\tajax('products.json', (products) =\u003e {\n\t\t\tconsole.log('AJAX/products \u003e\u003e\u003e', JSON.parse(products));\n\t\t});\n\t});\n});\n```\n\n### Not so new friend, Promises\n[Promises](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise) are around for a while, and now it is part of the ECMAScript 6º edition.\nWith `promises` we eliminate the pyramid of doom (callback hell), having a much more cleaner code.\nCheck it out:\n```javascript\n// Promises\n// Wrap the ajax function to return promises\nfunction requestP(url) {\n\treturn new Promise(function(resolve, reject) {\n\t\tajax(url, (response) =\u003e {\n\t\t\tresolve(JSON.parse(response));\n\t\t});\n\t});\n}\n\n// Getting data\nrequestP('data.json')\n.then(function(data){\n\tconsole.log('Promises/data \u003e\u003e\u003e', data);\n});\n\n// Getting users\nrequestP('users.json')\n.then(function(users){\n\tconsole.log('Promises/users \u003e\u003e\u003e', users);\n});\n\n// Getting products\nrequestP('products.json')\n.then(function(products){\n\tconsole.log('Promises/products \u003e\u003e\u003e', products);\n});\n```\nWith promises, we can easily have parallel execution:\n```javascript\n// Parallel operations with promises\n// Getting data, users and products\nPromise.all([\n\trequestP('data.json'),\n\trequestP('users.json'),\n\trequestP('products.json')\n])\n.then(function(data) {\n\tconsole.log('Parallel promises \u003e\u003e\u003e', data);\n});\n```\nThe [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) is the new Ajax substitute. We have a lot of new features and a very nice promise-based API:\n```javascript\n// Promises with the fetch API\n// Getting data\nfetch('data.json')\n.then(function(data) {\n\treturn data.json();\n})\n.then(function(data) {\n\tconsole.log('Promises+fetch/data \u003e\u003e\u003e', data);\n});\n\n// Getting users\nfetch('users.json')\n.then(function(data) {\n\treturn data.json();\n})\n.then(function(users) {\n\tconsole.log('Promises+fetch/users \u003e\u003e\u003e', users);\n});\n\n// Getting products\nfetch('products.json')\n.then(function(data){\n\treturn data.json();\n})\n.then(function(products) {\n\tconsole.log('Promises+fetch/products \u003e\u003e\u003e', products);\n});\n```\n\n### New powerful friend, generators\n[Generators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*) basically are functions that can have their execution paused.\nTake a look on what we can do with generators:\n```javascript\n// Generators\nfunction request(url) {\n\tajax(url, (response) =\u003e {\n\t\titerator.next(JSON.parse(response));\n\t});\n}\n\nfunction *main() {\n\t// Getting data\n\tlet data = yield request('data.json');\n\n\t// Getting users\n\tlet users = yield request('users.json');\n\n\t// Getting products\n\tlet products = yield request('products.json');\n\n\tconsole.log('Generator/data \u003e\u003e\u003e', data);\n\tconsole.log('Generator/users \u003e\u003e\u003e', users);\n\tconsole.log('Generator/products \u003e\u003e\u003e', products);\n}\n\nvar iterator = main();\niterator.next();\n```\n\n### The new awesome beast, async functions\nWith [async functions](https://github.com/lukehoban/ecmascript-asyncawait), we can `await` on Promises.\nTake a look (awesomeness alert):\n```javascript\n(async () =\u003e {\n\t// Getting data\n\tlet data = await requestP('data.json');\n\n\t// Getting users\n\tlet users = await requestP('users.json');\n\n\t// Getting products\n\tlet products = await requestP('products.json');\n\n\tconsole.log('ES7 Async/data \u003e\u003e\u003e', data);\n\tconsole.log('ES7 Async/users \u003e\u003e\u003e', users);\n\tconsole.log('ES7 Async/products \u003e\u003e\u003e', products);\n})();\n```\nWith the fetch API:\n```javascript\n(async () =\u003e {\n// Async/await using the fetch API\n\ttry {\n\n\t\t// Getting data\n\t\tlet data = await fetch('data.json');\n\n\t\t// Parsing data\n\t\tlet parsedData = await data.json();\n\n\t\t// Getting users\n\t\tlet users = await fetch('users.json');\n\n\t\t// Parsing users\n\t\tlet parsedUsers = await users.json();\n\n\t\t// Getting products\n\t\tlet products = await fetch('products.json');\n\n\t\t// Parsing products\n\t\tlet parsedProducts = await products.json();\n\n\n\t\tconsole.log('ES7 Async+fetch/data \u003e\u003e\u003e', parsedData);\n\t\tconsole.log('ES7 Async+fetch/users \u003e\u003e\u003e', parsedUsers);\n\t\tconsole.log('ES7 Async+fetch/products \u003e\u003e\u003e', parsedProducts);\n\n\n\t} catch (error) {\n\t\tconsole.log(error);\n\t}\n})();\n```\nParallel operations with async:\n```javascript\n(async () =\u003e {\n\tlet parallelData = await Promise.all([\n\t\trequestP('data.json'),\n\t\trequestP('users.json'),\n\t\trequestP('products.json')\n\t]);\n\tconsole.log('Async parallel \u003e\u003e\u003e', parallelData);\n})();\n```\n\nParallel operations with async + fetch (Oh my god this is great!):\n```javascript\n(async () =\u003e {\n\tlet parallelDataFetch = await Promise.all([\n\t\t(await fetch('data.json')).json(),\n\t\t(await fetch('users.json')).json(),\n\t\t(await fetch('products.json')).json()\n\t]);\n\tconsole.log('Async parallel+fetch \u003e\u003e\u003e', parallelDataFetch);\n})();\n```\n\n## How to run this experiment\n```bash\nnpm install\ngrunt\n```\nServe the dist folder, open the `/sample/index.html` and check it out you dev-tools console.\n\n## References\nhttp://jakearchibald.com/2014/es7-async-functions/\nhttp://pouchdb.com/2015/03/05/taming-the-async-beast-with-es7.html\nhttp://www.sitepoint.com/simplifying-asynchronous-coding-es7-async-functions/","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaydson%2Fes7-async","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaydson%2Fes7-async","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaydson%2Fes7-async/lists"}