{"componentChunkName":"component---src-templates-blog-post-js","path":"/JavaScript/javascript-concept-11---callback-promise-async&await/","webpackCompilationHash":"f92dbf25810602c1889e","result":{"data":{"site":{"siteMetadata":{"title":"Web Devlog","author":"RossenaHuh","siteUrl":"https://github.com/rossenahuh","comment":{"disqusShortName":"RossenaHuh","utterances":"rossenahuh/my-dev-blog.git"},"sponsor":{"buyMeACoffeeId":"rossena"}}},"markdownRemark":{"id":"2fae831a-d71d-55cd-8529-6eeb1258e73e","excerpt":"CallbackWhat is callback?A function that is to be exceuted after another functionA function that is passed as an argument to other functionWhen is it needed?JavaScript is a single-threaded language, which means that instead of waiting for an event to be finished, JavaScript will…","html":"

Callback

\n

What is callback?

\n\n
\n

When is it needed?

\n

JavaScript is a single-threaded language, which means that instead of waiting for an event to be finished, JavaScript will keep executing the rest of the events. But sometimes we want to make an event to wait before executing the next one. For example, it takes some amount of time before an API request getting back with the response.

\n

Let’s simulate this by using setTimeout.

\n
const APICall = (response, callback) =>\n  setTimeout(() => {\n    console.log(response)\n    callback()\n  }, 500)\n\nconst makeAPICalls = () => {\n  APICall('First', () => {\n    APICall('Second', () => {\n      APICall('Third', () => {})\n    })\n  })\n}\n\nmakeAPICalls()
\n

I can print First, Second and Third in order with callback. But imagine that there are hundreds of nested callback functions within a function, which often called Callback Hell. It’s going to be super ugly and hard to read.

\n

Promise

\n

Basically, Promise was introduced in an effort to fix the nesting problem in callback hell.

\n

Promise takes two funtions as parameters, resolve and reject. Make a Promise wrap the whole function and call resolve for the success case and reject if there is an error and return the Promise.

\n
const APICall = response => {\n  return new Promise((resolve, reject) => {\n    setTimeout(() => {\n      console.log(response)\n      resolve()\n    }, 500)\n  })\n}\n\nconst makeAPICalls = () => {\n  APICall('First')\n    .then(() => APICall('Second'))\n    .then(() => APICall('Third'))\n}\n\nmakeAPICalls()
\n

This is a Promise Chain where the code returns the result of the function and it gets to the next function in the chain. You can check out the resolved value by logging the argument passed to the functions after then and error with catch.

\n

Async/Await

\n\n
const APICall = response => {\n  return new Promise((resolve, reject) => {\n    setTimeout(() => {\n      console.log(response)\n      resolve(response)    }, 500)\n  })\n}\n\nconst makeAPICalls = async () => {\n  let first = await APICall('First')  let second = await APICall('Second')  let third = await APICall('Third')\n  console.log(first, second, third) // 'First Second Third'\n}\n\nmakeAPICalls()
\n
\n
\n

Sources

\n

https://codeburst.io/javascript-what-the-heck-is-a-callback-aba4da2deced\nhttps://medium.com/front-end-weekly/callbacks-promises-and-async-await-ad4756e01d90

\n
\n
","frontmatter":{"title":"JavaScript Concept 11 - Callback, Promise and Async/Await","date":"July 15, 2019"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/JavaScript/javascript-concept-11---callback-promise-async&await/","previous":{"fields":{"slug":"/JavaScript/javascript-concept-10---differences-between-es5-and-es6/"},"frontmatter":{"title":"JavaScript Concept 10 - ES5 vs ES6","category":"JavaScript"}},"next":{"fields":{"slug":"/JavaScript/javascript-concept-12---commonjs/"},"frontmatter":{"title":"JavaScript Concept 12 - Modules in JavaScript (CommonJS, Babel & Webpack)","category":"JavaScript"}}}}}