{"id":29623,"date":"2019-04-08T23:29:09","date_gmt":"2019-04-08T15:29:09","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=29623"},"modified":"2022-10-09T21:34:26","modified_gmt":"2022-10-09T13:34:26","slug":"javascript-promise-object","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/javascript-promise-object\/","title":{"rendered":"Getting Started with JavaScript Promises"},"content":{"rendered":"

Asynchronous code<\/strong> is useful for performing tasks that are time-consuming<\/strong> but, of course, it\u2019s not devoid of cons<\/strong>. Async code uses callback functions<\/strong> to process its results, however callback functions cannot return values<\/strong> that typical JavaScript functions can.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tMastering Synchronous & Asynchronous JavaScript \u2013 Part 1<\/a>\n\t\t\t\t<\/p>\n

Thus, they not only take away our ability to control the execution of the function<\/strong> but also make error handling<\/strong> a bit of a hassle. This is where the Promise<\/code><\/a> object<\/strong> comes in, as it aims to fill in some of the potholes in asynchronous coding<\/strong>.<\/p>\n

Promise<\/code> is technically a standard internal object<\/strong> in JavaScript, meaning it comes built-in to JavaScript<\/strong>. It is used to represent the eventual result of an asynchronous code block<\/strong> (or the reason why the code failed) and has methods to control the execution of the asynchronous code<\/strong>.<\/p>\n

Syntax<\/h2>\n

We can create an instance of the Promise<\/code> object<\/strong> using the new<\/code> keyword:<\/p>\n

\r\nnew Promise(function(resolve, reject) {} );\r\n<\/pre>\n
The function passed as a parameter<\/strong> to the Promise()<\/code> constructor is known as the executor<\/strong>. It holds the asynchronous code and has two parameters of the Function<\/code><\/a> type<\/strong>, referred to as resolve<\/code><\/strong> and reject<\/code><\/strong> functions (more on these shortly).<\/p>\n
States of the Promise<\/code> object<\/h2>\n
The initial state<\/strong> of a Promise<\/code> object is called pending<\/em><\/strong>. In this state, the result of the asynchronous computation does not exist<\/strong>.<\/p>\n
The initial pending state changes to fulfilled<\/em><\/strong> state when the computation is successful<\/strong>. The result of the computation<\/strong> is available in this state.<\/p>\n
In case the asynchronous computation fails<\/strong>, the Promise<\/code> object moves to the rejected<\/em><\/strong> state from its initial pending<\/em> state. In this state, the reason of the computation failure<\/strong> (i.e. error message)  is made available.<\/p>\n
To go from pending<\/em> to fulfilled<\/em> state, resolve()<\/code> is called<\/strong>. To go from pending<\/em> to rejected<\/em> state, reject()<\/code> is called<\/strong>.<\/p>\n
\"Three<\/figure>\n
The then<\/code> and catch<\/code> methods<\/h2>\n
When the state changes from pending<\/em> to fulfilled<\/em><\/strong>, the event handler of the Promise<\/code> object\u2019s then<\/code><\/a> method<\/strong> is executed. And, when the state changes from pending<\/em> to rejected<\/em><\/strong>, the event handler of the Promise<\/code> object\u2019s catch<\/code><\/a> method<\/strong> is executed.<\/p>\n
Example 1<\/h2>\n
\u201cNon-Promisified\u201d code<\/h3>\n
Assume there\u2019s a hello.txt<\/code> file containing the \u201cHello\u201d word. Here\u2019s how we can write an AJAX request to fetch that file<\/strong> and show its content<\/strong>, without using the Promise<\/code> object:<\/p>\n
\r\nfunction getTxt() {\r\n    let xhr = new XMLHttpRequest();\r\n    xhr.open('GET', 'hello.txt');\r\n    xhr.overrideMimeType('text\/plain');\r\n    xhr.send();\r\n    xhr.onload = function() {\r\n        try {\r\n            switch (this.status) {\r\n                case 200:\r\n                    document.write(this.response);\r\n                    break;\r\n                case 404:\r\n                    throw 'File Not Found';\r\n                default:\r\n                    throw 'Failed to fetch the file';\r\n            }\r\n        } catch (err) {\r\n            console.log(err)\r\n        }\r\n    };\r\n}\r\n\r\ngetTxt();\r\n<\/pre>\n
If the content of the file has been successfully fetched<\/strong>, i.e. the response status code is 200<\/strong>, the response text is written into the document<\/strong>. If the file is not found (status 404)<\/strong>, a \u201cFile Not Found\u201d error message<\/a> is thrown. Otherwise, a general error message<\/strong> indicating the failure of fetching the file is thrown.<\/p>\n
\u201cPromisified\u201d code<\/h3>\n
Now, let\u2019s Promisify the above code<\/strong>:<\/p>\n
\r\nfunction getTxt() {\r\n    return new Promise(function(resolve, reject) {\r\n        let xhr = new XMLHttpRequest();\r\n        xhr.open('GET', 'hello.txt');\r\n        xhr.overrideMimeType('text\/plain');\r\n        xhr.send();\r\n        xhr.onload = function() {\r\n            switch (this.status) {\r\n                case 200:\r\n                    resolve(this.response);\r\n                case 404:\r\n                    reject('File Not Found');\r\n                default:\r\n                    reject('Failed to fetch the file');\r\n            }\r\n        };\r\n    });\r\n}\r\n\r\ngetTxt().then(\r\n    function(txt) {\r\n        document.write(txt);\r\n    }).catch(\r\n    function(err) {\r\n        console.log(err);\r\n    });\r\n<\/pre>\n
The getTxt()<\/code> function is now coded to return a new instance of the Promise<\/code> object<\/strong>, and its executor function holds the asynchronous code from before.<\/p>\n
When the response status code is 200<\/strong>, the Promise<\/code> is fulfilled<\/em><\/strong> by calling resolve()<\/code><\/strong> (the response is passed as the parameter of resolve()<\/code>). When the status code is 404 or some other, the Promise<\/code> is rejected<\/em><\/strong> using reject()<\/code><\/strong> (with the appropriate error message as the parameter of reject()<\/code>).<\/p>\n
The event handlers for the then()<\/code> and catch()<\/code> methods<\/strong> of the Promise<\/code> object are added at the end<\/strong>.<\/p>\n
When the Promise<\/code> is fulfilled<\/em><\/strong>, the handler of the then()<\/code> method is run. Its argument is the parameter passed from resolve()<\/code><\/strong>. Inside the event handler, the response text (received as the argument) is written into the document<\/strong>.<\/p>\n
When the Promise<\/code> is rejected<\/em><\/strong>, the event handler of the catch()<\/code> method is run, logging the error<\/strong>.<\/p>\n
The main advantage<\/strong> of the above Promisified version of the code is the error handling<\/strong>. Instead of throwing Uncaught Exceptions around\n  \u2014 like in the Non-Promisified version \u2014 the appropriate failure messages<\/strong> are returned and logged.<\/p>\n
But, it\u2019s not just the returning<\/strong> of the failure messages<\/strong> but also of the result of the asynchronous computation<\/strong> that can be truly advantageous for us. To see that, we\u2019ll need to expand our example.<\/p>\n
Example 2<\/h2>\n
\u201cNon-Promisified\u201d code<\/h3>\n
Instead of just displaying the text from hello.txt<\/code>, I want to combine it with the \u201cWorld\u201d word<\/strong> and display it on the screen after a time-out of 2 seconds<\/strong>. Here\u2019s the code I use:<\/p>\n
\r\nfunction getTxt() {\r\n    let xhr = new XMLHttpRequest();\r\n    xhr.open('GET', 'hello.txt');\r\n    xhr.overrideMimeType('text\/plain');\r\n    xhr.send();\r\n    xhr.onload = function() {\r\n        try {\r\n            switch (this.status) {\r\n                case 200:\r\n                    document.write(concatTxt(this.response));\r\n                    break;\r\n                case 404:\r\n                    throw 'File Not Found';\r\n                default:\r\n                    throw 'Failed to fetch the file';\r\n            }\r\n        } catch (err) {\r\n            console.log(err)\r\n        }\r\n    };\r\n}\r\n\r\nfunction concatTxt(res) {\r\n    setTimeout(function() {\r\n        return (res + 'World')\r\n    }, 2000);\r\n}\r\n\r\ngetTxt();\r\n<\/pre>\n
On the status code 200,  the concatTxt()<\/code> function is called to concatenate the response text with the \u201cWorld\u201d word<\/strong> before writing it into document.<\/p>\n
But, this code won\u2019t work as desired<\/strong>. The setTimeout()<\/code> callback function cannot return the concatenated string<\/strong>. What will be printed out to the document is undefined<\/code><\/strong> because that\u2019s what concatTxt()<\/code> returns<\/strong>.<\/p>\n
\u201cPromisified\u201d code<\/h3>\n
So, to make the code work, let\u2019s Promisify the above code<\/strong>, including concatTxt()<\/code>:<\/p>\n
\r\nfunction getTxt() {\r\n    return new Promise(function(resolve, reject) {\r\n        let xhr = new XMLHttpRequest();\r\n        xhr.open('GET', 'hello.txt');\r\n        xhr.overrideMimeType('text\/plain');\r\n        xhr.send();\r\n        xhr.onload = function() {\r\n            switch (this.status) {\r\n                case 200:\r\n                    resolve(this.response);\r\n                case 404:\r\n                    reject('File Not Found');\r\n                default:\r\n                    reject('Failed to fetch the file');\r\n            }\r\n        };\r\n    });\r\n}\r\n\r\nfunction concatTxt(txt) {\r\n    return new Promise(function(resolve, reject) {\r\n        setTimeout(function() {\r\n            resolve(txt + ' World');\r\n        }, 2000);\r\n    });\r\n}\r\n\r\ngetTxt().then(\r\n    (txt) = > {\r\n        return concatTxt(txt);\r\n    }).then(\r\n    (txt) = > {\r\n        document.write(txt);\r\n    }).catch(\r\n    (err) = > {\r\n        console.log(err);\r\n    });\r\n<\/pre>\n
Just like getTxt()<\/code>, the concatTxt()<\/code> function also returns a new Promise<\/code> object<\/strong> instead of the concatenated text. The Promise<\/code> returned by concatTxt()<\/code> is resolved inside callback function of setTimeout()<\/code><\/strong>.<\/p>\n
Near the end of the above code, the event handler of the first then()<\/code> method runs when the Promise<\/code> of getTxt()<\/code> is fulfilled<\/em><\/strong>, i.e. when the file is fetched successfully<\/strong>. Inside that handler, concatTxt()<\/code> is called<\/strong> and the Promise<\/code> returned by concatTxt()<\/code> is returned<\/strong>.<\/p>\n
The event handler of the second then()<\/code> method runs when the Promise<\/code> returned by concatTxt()<\/code> is fulfilled<\/em><\/strong>, i.e. the two seconds time-out is over<\/strong> and resolve()<\/code> is called<\/strong> with the concatenated string as its parameter.<\/p>\n
Finally, catch()<\/code> catches all the exceptions and failure messages<\/strong> from both Promises.<\/p>\n
In this Promisified version, the \u201cHello World\u201d string will be successfully printed out<\/strong> to the document.<\/p>\n
\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tMaster DOM Manipulation with 15 Essential JavaScript Methods<\/a>\n\t\t\t\t<\/p>","protected":false},"excerpt":{"rendered":"
Asynchronous code is useful for performing tasks that are time-consuming but, of course, it\u2019s not devoid of cons. Async code uses callback functions to process its results, however callback functions cannot return values that typical JavaScript functions can. Thus, they not only take away our ability to control the execution of the function but also…<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[4117,511],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nGetting Started with JavaScript Promises - Hongkiat<\/title>\n<meta name=\"description\" content=\"Asynchronous code is useful for performing tasks that are time-consuming but, of course, it's not devoid of cons. Async code uses callback functions to\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/javascript-promise-object\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Getting Started with JavaScript Promises\" \/>\n<meta property=\"og:description\" content=\"Asynchronous code is useful for performing tasks that are time-consuming but, of course, it's not devoid of cons. Async code uses callback functions to\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/javascript-promise-object\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-08T15:29:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-09T13:34:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/javascript-promise-object\/promise-states.jpg\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preethi Ranjit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-promise-object\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-promise-object\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"Getting Started with JavaScript Promises\",\"datePublished\":\"2019-04-08T15:29:09+00:00\",\"dateModified\":\"2022-10-09T13:34:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-promise-object\\\/\"},\"wordCount\":847,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-promise-object\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/javascript-promise-object\\\/promise-states.jpg\",\"keywords\":[\"Javascripts\",\"Web Developers\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-promise-object\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-promise-object\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-promise-object\\\/\",\"name\":\"Getting Started with JavaScript Promises - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-promise-object\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-promise-object\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/javascript-promise-object\\\/promise-states.jpg\",\"datePublished\":\"2019-04-08T15:29:09+00:00\",\"dateModified\":\"2022-10-09T13:34:26+00:00\",\"description\":\"Asynchronous code is useful for performing tasks that are time-consuming but, of course, it's not devoid of cons. Async code uses callback functions to\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-promise-object\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-promise-object\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-promise-object\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/javascript-promise-object\\\/promise-states.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/javascript-promise-object\\\/promise-states.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-promise-object\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Getting Started with JavaScript Promises\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Getting Started with JavaScript Promises - Hongkiat","description":"Asynchronous code is useful for performing tasks that are time-consuming but, of course, it's not devoid of cons. Async code uses callback functions to","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/javascript-promise-object\/","og_locale":"en_US","og_type":"article","og_title":"Getting Started with JavaScript Promises","og_description":"Asynchronous code is useful for performing tasks that are time-consuming but, of course, it's not devoid of cons. Async code uses callback functions to","og_url":"https:\/\/www.hongkiat.com\/blog\/javascript-promise-object\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-04-08T15:29:09+00:00","article_modified_time":"2022-10-09T13:34:26+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/javascript-promise-object\/promise-states.jpg","type":"","width":"","height":""}],"author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/javascript-promise-object\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/javascript-promise-object\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"Getting Started with JavaScript Promises","datePublished":"2019-04-08T15:29:09+00:00","dateModified":"2022-10-09T13:34:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/javascript-promise-object\/"},"wordCount":847,"commentCount":2,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/javascript-promise-object\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/javascript-promise-object\/promise-states.jpg","keywords":["Javascripts","Web Developers"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/javascript-promise-object\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/javascript-promise-object\/","url":"https:\/\/www.hongkiat.com\/blog\/javascript-promise-object\/","name":"Getting Started with JavaScript Promises - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/javascript-promise-object\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/javascript-promise-object\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/javascript-promise-object\/promise-states.jpg","datePublished":"2019-04-08T15:29:09+00:00","dateModified":"2022-10-09T13:34:26+00:00","description":"Asynchronous code is useful for performing tasks that are time-consuming but, of course, it's not devoid of cons. Async code uses callback functions to","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/javascript-promise-object\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/javascript-promise-object\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/javascript-promise-object\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/javascript-promise-object\/promise-states.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/javascript-promise-object\/promise-states.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/javascript-promise-object\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Getting Started with JavaScript Promises"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7HN","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29623","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=29623"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29623\/revisions"}],"predecessor-version":[{"id":62594,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29623\/revisions\/62594"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=29623"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=29623"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=29623"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=29623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}