{"id":31051816,"url":"https://github.com/ajay-develops/javascript-async","last_synced_at":"2026-02-27T19:05:46.458Z","repository":{"id":117636708,"uuid":"526961101","full_name":"ajay-develops/javascript-async","owner":"ajay-develops","description":null,"archived":false,"fork":false,"pushed_at":"2022-08-22T11:25:50.000Z","size":5552,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-09T03:08:41.897Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/ajay-develops.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":"support.htm","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-20T15:11:50.000Z","updated_at":"2022-08-20T15:13:19.000Z","dependencies_parsed_at":null,"dependency_job_id":"4ca32e0f-5d49-4590-9c00-e1e578ece2b6","html_url":"https://github.com/ajay-develops/javascript-async","commit_stats":null,"previous_names":["templar-ajay/javascript-async","ajay-develops/javascript-async"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ajay-develops/javascript-async","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajay-develops%2Fjavascript-async","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajay-develops%2Fjavascript-async/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajay-develops%2Fjavascript-async/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajay-develops%2Fjavascript-async/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ajay-develops","download_url":"https://codeload.github.com/ajay-develops/javascript-async/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajay-develops%2Fjavascript-async/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29472883,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-15T06:58:05.414Z","status":"ssl_error","status_checked_at":"2026-02-15T06:58:05.085Z","response_time":118,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":[],"created_at":"2025-09-15T00:55:12.653Z","updated_at":"2026-02-15T07:37:00.062Z","avatar_url":"https://github.com/ajay-develops.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# javascript-async\n\n## callbacks\n\n```js\nfunction successHandler(data) {\n  console.log(data);\n}\nfunction failureHandler(errorCode) {\n  console.error(errorData);\n}\n\nlet httpRequest = new XMLHttpRequest();\n\nfunction get(url, success, failure) {\n  httpRequest.open(\"GET\", url);\n  httpRequest.onload = () =\u003e {\n    httpRequest.status === 200\n      ? success(httpRequest.responseText)\n      : failure(httpRequest.status);\n  };\n  httpRequest.send();\n}\n\nget(url, successHandler, failureHandler);\n// this will call successHandler and failureHandler after we get results from the XMLHttpRequest\n```\n\n## promises\n\n```js\nfunction successHandler(data) {\n  console.log(data);\n}\nfunction failureHandler(errorCode) {\n  console.error(errorData);\n}\nlet httpRequest = new XMLHttpRequest();\nfunction get(url) {\n  return new Promise((resolve, reject) =\u003e {\n    httpRequest.open(\"GET\", url);\n    httpRequest.onload = () =\u003e {\n      httpRequest.status === 200\n        ? resolve(httpRequest.responseText)\n        : reject(httpRequest.status);\n    };\n    httpRequest.send();\n  });\n}\n// console.log(get()); // will log the returned promise\nget()\n  .then((response) =\u003e {\n    successHandler(response);\n  })\n  .catch((errCode) =\u003e {\n    failureHandler(errCode);\n  });\n// calls the successHandler and failureHandler events asynchronously after getting the response from the httpRequest\n```\n\n## `Promise.all([])` method\n\n```js\n// make sure you provide an array of requests inside Promise.all() -\u003e Promise.all([a,b,c,d])\nPromise.all([fetch(urls[0]), fetch(urls[1]), fetch(urls[2])]).then(\n  (responses) =\u003e {\n    return responses.map((response) =\u003e {\n      return response.json();\n    })\n  }.then(jsonResponses=\u003e{\n    return jsonResponses.join(\",\")\n  }).then(data=\u003e{\n    console.log(data)\n  }).catch(err=\u003e{\n    console.error(err)\n  }).finally(()=\u003e{\n    console.log('all fetch requests have returned json data`)\n  })\n);\n```\n\n## Promises Polyfill - making code backwards compatible\n\npromises are not supported in older browsers like IE and opera browsers , and promises can not be transpiled using Babel\n\n- so we use Polyfills to transpile the Promises into older syntax of js for old browsers support\n- to use a polyfill in your code insert the following cdn in html before the script that uses promises\n  one of the promise polyfill is `https://github.com/taylorhakes/promise-polyfill`\n\ncdn -\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js\"\u003e\u003c/script\u003e\n```\n\n# async/await\n\n- syntactic sugar for promises\n\n```js\n(async () =\u003e {\n  const responses = [];\n  responses.push(await fetch(urls[0]));\n  responses.push(await fetch(urls[1]));\n  responses.push(await fetch(urls[2]));\n  responses.push(await fetch(urls[3]));\n\n  const jsonData = responses.map((response) =\u003e {\n    return response.json();\n  });\n\n  console.log(jsonData.join(\",\"));\n})();\n```\n\n## Error handling in async/await\n\n```js\n(async () =\u003e {\n  try {\n    const responses = [];\n    responses.push(await fetch(urls[0]));\n    responses.push(await fetch(urls[1]));\n    responses.push(await fetch(urls[2]));\n    responses.push(await fetch(urls[3]));\n\n    const jsonData = responses.map((response) =\u003e {\n      return response.json();\n    });\n\n    console.log(jsonData.join(\",\"));\n  } catch (status) {\n    // will catch errors\n    console.error(`error status code ${status}`);\n  } finally {\n    // will execute the commands irrespective of success or errors\n    console.log(\"all fetch request have returned results\");\n  }\n})();\n```\n\n## Making async/await backwards compatible\n\nto make async/await code backwards compatible use babel.io to first transpile the code in form of promises and then insert that transpiled code in in our project and use polyfill to make it more backwards compatible , by inserting polyfill cdn in html before the script that uses promises\n\n# Web Workers\n\n- use their own thread to process.\n- make code asynchronous , make app do multiple things at once by leveraging the multiple processor threads\n\n![web worker working](images/web%20worker%20working.png)\n\n```js\nconst worker = new Worker(script_path);\n```\n\npassing data to the worker\n\n```js\n// code on script.js\n\nconst worker = new Worker(./web_worker.js);\n\nworker.postMessage(\"hello worker\");\nworker.postMessage({\n  name: \"ajay\",\n  feeling: \"low\",\n  drivingLicense: false,\n});\nconsole.log('message sent to worker')\n\n\n// code on web_worker.js to receive message\n\nthis.addEventListener(\"message\",(event)=\u003e{\n  console.log(\"message received from main script\")\n  console.log(event.data)\n})\n\n```\n\noutput\n\n```txt\nmessage sent to worker\nmessage recieved from main script\nhello worker\nmessage received from main script\n{name:\"ajay\",feeling:\"low\",drivingLicense:false}\n```\n\nReceiving output message from web worker\n\n```js\n// code in webWorker.js\n\nthis.postMessage(result);\n\n// code in script.js\nconst worker = new Worker(webWorker.js);\nworker.addEventListener(\"message\", (event) =\u003e {\n  const receivedData = event.data;\n  console.log(receivedData, \"received from the worker\");\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajay-develops%2Fjavascript-async","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fajay-develops%2Fjavascript-async","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajay-develops%2Fjavascript-async/lists"}