{"componentChunkName":"component---src-pages-markdown-remark-fields-slug-js","path":"/engineering/how-to-promise/","result":{"data":{"markdownRemark":{"id":"0e34cbee-001c-52e4-a7f8-4525e8b3459e","excerpt":"As a front-end developer, if you haven't heard about Promise in Javascript, well ... At least you have heard about it now! And it is truly amazing. Promise is a…","html":"

As a front-end developer, if you haven't heard about Promise in Javascript, well ...
\nAt least you have heard about it now! And it is truly amazing.

\n

Promise is a the standard way of handling asynchronous operations, such as calling APIs. It is comprehensive but elegant, espeically with a series of Async operations and handling the errors from them.
\nIt has been widely supported by mordern browsers. But of course IE is not one of the modern ones, so do not forget to find a promise-polyfill for your IE users.

\n

Can I use Promise
\nPolyfill for IE

\n

In this blog I will cover the basic usages for Promise, let's get started.
\nA promise function would look like this

\n
new Promise(function (resolve, reject) {\n    var data = asyncCall(); // could be API calls\n    if( data ) {\n        resolve(data); // success\n    } else {\n        reject(data); // fail\n    }\n});
\n

First we need to declare it is a `new` Promise, inside you can put your async calls and let promise know how to deal with the response with `resolve` and `reject`. You can treat `resolve` and `reject` as two callback functions, `resolve` when you are confirmed that you have got what you expect, and reject if anything bad happened.

\n

Here is a brief example, Fiddle it here

\n
var aync1 = function() {\n    return new Promise(function(resolve, reject){\n        // Wait 1s and alert\n        setTimeout(function(){\n            resolve("Hello Promise");\n        }, 1000);\n    });\n}\n\naync1().then(function (resp) {\n    alert(resp);\n});
\n

If something is going wrong, you want to catch and handle it, Fiddle it here.

\n
var aync2 = function() {\n    return new Promise(function(resolve, reject){\n        // Wait 2s and alert\n        setTimeout(function(){\n            // pretend we got something wrong.\n            reject("error");\n        }, 1000);\n    });\n}\n \naync2().then(function (resp) {\n    alert("This will not be called");\n}).catch(function(err){\n    alert(err);\n});
\n

Here I have quickly demonstrated the basic usage of Promise, you may think \"Oh callbacks can do the same thing as well\". You are not wrong, but in next blog I will show the real power of Promise, thanks for reading.

\n","headings":[],"fields":{"slug":"/engineering/how-to-promise/"},"frontmatter":{"metatitle":null,"metadescription":null,"description":null,"title":"How to Promise","canonical":null,"date":"January 05, 2016","updated_date":null,"tags":["JavaScript","Promise"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/0391ea10a372dcec2e9e04aa7ed59ec0/4fec1/promise-300x300.webp","srcSet":"/static/0391ea10a372dcec2e9e04aa7ed59ec0/1c9b5/promise-300x300.webp 200w,\n/static/0391ea10a372dcec2e9e04aa7ed59ec0/4fec1/promise-300x300.webp 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Solomon Yu","github":null,"bio":"Very curious about this world and blogging whenever learning something new","avatar":null}}}},"pageContext":{"id":"0e34cbee-001c-52e4-a7f8-4525e8b3459e","fields__slug":"/engineering/how-to-promise/","__params":{"fields__slug":"engineering"}}},"staticQueryHashes":["1171199041","1384082988","1711371485","1753898100","2100481360","229320306","23180105","528864852"]}