{"id":1328,"date":"2019-04-03T13:00:00","date_gmt":"2019-04-03T13:00:00","guid":{"rendered":"https:\/\/demo.17thavenuedesigns.net\/audrey\/?p=1328"},"modified":"2024-05-22T15:22:36","modified_gmt":"2024-05-22T15:22:36","slug":"how-to-organically-boost-traffic-to-website","status":"publish","type":"post","link":"https:\/\/wspelt.com\/?p=1328","title":{"rendered":"Promises"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><em>Promise promise<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Introduction<br><\/strong>In a lot of front-end SharePoint code that we write, we use asynchronous calls (ajax). For example, with JSOM (JavaScript Object Model), a Microsoft-generated collection of libraries that serve as a proxy to the server-side object model. But also when we call SharePoint&#8217;s REST API.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">During a job I encountered a complex set of nested JavaScript calls with callbacks in which calls with callbacks were called. Since JSOM calls are asynchronous, we sometimes encounter situations like this.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">What can help make it clearer is to work with JavaScript promises.<br>Below I will explain this and work out a solution for SharePoint.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is a promise?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">By a &#8220;promise&#8221; we mean here &#8220;an object that may in the future return a single value: a resolved value or a reason that it has not been resolved (for example, a network error has occurred). A promise can be in one of the three possible states are: fulfilled, rejected, or pending.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What do you need?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">There are various options for using promises in your SharePoint solution:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bluebird (<a href=\"https:\/\/github.com\/petkaantonov\/bluebird\">https:\/\/github.com\/petkaantonov\/bluebird<\/a>)<\/li>\n\n\n\n<li>jQuery&#8217;s<\/li>\n\n\n\n<li>Angular promises: <a href=\"https:\/\/azamkhaan.blogspot.com\/2016\/06\/sharepoint-2013-crud-operations-using.html\">https:\/\/azamkhaan.blogspot.com\/2016\/06\/sharepoint-2013-crud-operations-using.html<\/a><\/li>\n\n\n\n<li>ReactJS also contains a promise object<\/li>\n\n\n\n<li>Native promises (unless you also want to support IE):<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The JavaScript Promise object is available by default in EcmaScript.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Since Internet Explorer does not have \u201cnative promise support\u201d for promises and we still often want to support this browser, preference will soon be given to, for example, the jQuery or Angular variant and not the standard EcmaScript Promise object.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Below is an example of a native Promise (note: this does not work in IE):<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"702\" height=\"261\" src=\"https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_native-promise.png\" alt=\"\" class=\"wp-image-3620\" style=\"width:948px;height:auto\" srcset=\"https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_native-promise.png 702w, https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_native-promise-300x112.png 300w\" sizes=\"auto, (max-width: 702px) 100vw, 702px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Example: native EcmaScript Promise (does not work in IE)<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The same example looks like this with jQuery&#8217;s &#8220;Deferred&#8221; function:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"788\" height=\"341\" src=\"https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_jquery-promise.png\" alt=\"\" class=\"wp-image-3621\" style=\"width:943px;height:auto\" srcset=\"https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_jquery-promise.png 788w, https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_jquery-promise-300x130.png 300w, https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_jquery-promise-768x332.png 768w\" sizes=\"auto, (max-width: 788px) 100vw, 788px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Example: jQuery&#8217;s &#8220;Deferred&#8221; function<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Nested promises and the Christmas tree<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The following code example in AngularJS proves that the use of promises cannot automatically prevent a Christmas tree structure from occurring:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"911\" height=\"1024\" src=\"https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_kerstboom-911x1024.png\" alt=\"\" class=\"wp-image-3622\" style=\"width:946px;height:auto\" srcset=\"https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_kerstboom-911x1024.png 911w, https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_kerstboom-267x300.png 267w, https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_kerstboom-768x863.png 768w, https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_kerstboom-800x899.png 800w, https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_kerstboom.png 1069w\" sizes=\"auto, (max-width: 911px) 100vw, 911px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Example: Nested promises and the Christmas tree<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Taking down the Christmas tree<br><\/strong>In AngularJS I converted the above Christmas tree structure into the following setup, using the q.all function:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"770\" height=\"1671\" src=\"https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_afgetuigde-kerstboom-3.png\" alt=\"\" class=\"wp-image-3627\" style=\"width:942px;height:auto\" srcset=\"https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_afgetuigde-kerstboom-3.png 770w, https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_afgetuigde-kerstboom-3-138x300.png 138w, https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_afgetuigde-kerstboom-3-472x1024.png 472w, https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_afgetuigde-kerstboom-3-768x1667.png 768w, https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_afgetuigde-kerstboom-3-708x1536.png 708w\" sizes=\"auto, (max-width: 770px) 100vw, 770px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Example: broken-down Christmas tree with AngularJS &#8220;q.all&#8221; function<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The result is a lot clearer.<br>In addition, it saves 2 seconds in loading time, because all asynchronous calls are kicked off in parallel instead of sequentially.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">$when.apply<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">What is done in AngularJS by the q.all function is done in jQuery by $when.apply.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Using jQuery&#8217;s &#8220;Deferred&#8221; function together with the $when.apply function provides a handy combination to create multiple promises and, once they&#8217;ve all been addressed, continue working with the result. The following code shows this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"853\" src=\"https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_4-1024x853.png\" alt=\"\" class=\"wp-image-3628\" style=\"width:935px;height:auto\" srcset=\"https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_4-1024x853.png 1024w, https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_4-300x250.png 300w, https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_4-768x640.png 768w, https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_4-800x666.png 800w, https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_4.png 1053w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Example: jQuery&#8217;s &#8220;when.apply&#8221; function to process multiple promises<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The following can be concluded:<br>Line 3 retrieves the followed sites with a promise.<br>Once this is fulfilled or rejected, the result is continued in the &#8220;then&#8221; callback function. This happens respectively in the success argument on line 5 or in the error argument on line 41.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the success callback, an object is created on line 7 to hold the data.<br>The news is then retrieved for each followed site in the form of a promise object and we store it in an array.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">On line 16 we see the $when.apply construct come into play.<br>We put the array with promises in here and once these have all been fulfilled we can continue with the result in the success argument of the &#8220;then&#8221; callback function.<br>We first create an array on line 18 to store the news objects.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The arguments variable contains the result of all fulfilled promises. We go through this per promise and discuss this in the callback of the jQuery each function. On line 24 we collect the news data by storing it in the previously created array.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If an error occurred while processing all promises, we can accommodate this in the error argument of the then callback function. Finally, there is the always callback function in which we can do something at any time, if all promises have been completed regardless of an error. This can be compared to &#8220;finally&#8221; in the C# try\/catch\/finally construct.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By the way, the call to the function to retrieve the news promise object goes as follows:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"729\" src=\"https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_3-1024x729.png\" alt=\"\" class=\"wp-image-3629\" style=\"width:947px;height:auto\" srcset=\"https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_3-1024x729.png 1024w, https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_3-300x214.png 300w, https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_3-768x547.png 768w, https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_3-800x570.png 800w, https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_3.png 1203w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Example: returning a promise object with jQuery&#8217;s &#8220;Deferred&#8221; object.<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The creation of a &#8220;deferred&#8221; object starts on line 2.<br>In the success callback of the ajax function we fulfill the promise with the resolve function on line 35.<br>In the error callback of the ajax function we reject the promise of the reject function on line 38.<br>Before this happens, the function has already returned the promise object as a &#8220;handle&#8221; to the calling function, so it can be waited for.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>End result<br><\/strong>In the image below you can see that the news from the followed sites is shown.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A promise call was therefore made for each site followed. Only after all calls had been processed was the retrieved data shown.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"664\" height=\"668\" src=\"https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_1_middelgroot.png\" alt=\"\" class=\"wp-image-3630\" srcset=\"https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_1_middelgroot.png 664w, https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_1_middelgroot-298x300.png 298w, https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_1_middelgroot-150x150.png 150w, https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_1_middelgroot-75x75.png 75w\" sizes=\"auto, (max-width: 664px) 100vw, 664px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><span lang=\"EN-US\" style=\"font-size:11.0pt;font-family:&quot;Calibri&quot;,sans-serif;mso-ascii-theme-font:\nminor-latin;mso-fareast-font-family:Calibri;mso-fareast-theme-font:minor-latin;\nmso-hansi-theme-font:minor-latin;mso-bidi-font-family:&quot;Times New Roman&quot;;\nmso-bidi-theme-font:minor-bidi;mso-ansi-language:EN-US;mso-fareast-language:\nEN-US;mso-bidi-language:AR-SA\"><em>Example: end result of multiple asynchronous calls in the browser<\/em><\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Delegate functions and context<br><\/strong>In the code examples above, each time code blocks were passed as success and error callbacks to the asynchronous functions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The example below shows that this is also possible with delegate functions:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"749\" height=\"547\" src=\"https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_delegates.png\" alt=\"\" class=\"wp-image-3631\" style=\"width:966px;height:auto\" srcset=\"https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_delegates.png 749w, https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_delegates-300x219.png 300w\" sizes=\"auto, (max-width: 749px) 100vw, 749px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Example: delegate functions and passing a promise<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">What is especially important to realize here is that an object (objectContainer) is passed to the delegate function on line 12. This changes the &#8220;this&#8221; context in the delegate in the passed object (see lines 21 and 26).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this way we provide the deferred object to fulfill or reject the promise, but also the object that we want to load asynchronously and do something with.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Finally<br><\/strong>This way it becomes easier to make multiple calls to SharePoint with JSOM, while the code remains clear and readable.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In addition, loading time is quickly saved, because all asynchronous calls are kicked off in parallel instead of sequentially.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Performance always remains an interesting challenge in these types of asynchronous scenarios with multiple calls. This can be conveniently measured by adding the following lines of code at the start and end moments with JavaScript:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"599\" height=\"89\" src=\"https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_2.png\" alt=\"\" class=\"wp-image-3632\" style=\"width:720px;height:auto\" srcset=\"https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_2.png 599w, https:\/\/wspelt.com\/wp-content\/uploads\/2024\/05\/promises_2-300x45.png 300w\" sizes=\"auto, (max-width: 599px) 100vw, 599px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Example: measuring performance with JavaScript<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>References<br><\/strong>If you would like to know more about promises, here are some references:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Clear blog post about promises: <a href=\"https:\/\/blackninjasoft.com\/blog\/using-jquery-promises-deferreds-with-sharepoint-2013-jsom\">https:\/\/blackninjasoft.com\/blog\/using-jquery-promises-deferreds-with-sharepoint-2013-jsom<\/a><\/li>\n\n\n\n<li>Fundamentals: <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/primers\/promises\">https:\/\/developers.google.com\/web\/fundamentals\/primers\/promises<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/alistapart.com\/article\/getoutbindingsituations\">http:\/\/alistapart.com\/article\/getoutbindingsituations<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/scotch.io\/tutorials\/javascript-promises-for-dummies\">https:\/\/scotch.io\/tutorials\/javascript-promises-for-dummies<\/a><\/li>\n\n\n\n<li>Nice explanation of promises using a strip and AngularJS: <a href=\"http:\/\/andyshora.com\/promises-angularjs-explained-as-cartoon.html\">http:\/\/andyshora.com\/promises-angularjs-explained-as-cartoon.html<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>During a job I encountered a complex set of nested JavaScript calls with callbacks in which calls with callbacks were called. Since JSOM calls are asynchronous, we sometimes encounter situations like this.<br \/>\nWhat can help make it clearer is to work with JavaScript promises.<\/p>\n","protected":false},"author":1,"featured_media":2285,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[37,25],"tags":[],"class_list":["post-1328","post","type-post","status-publish","format-standard","has-post-thumbnail","category-javascript","category-sharepoint","entry"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/wspelt.com\/index.php?rest_route=\/wp\/v2\/posts\/1328","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wspelt.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wspelt.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wspelt.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wspelt.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1328"}],"version-history":[{"count":5,"href":"https:\/\/wspelt.com\/index.php?rest_route=\/wp\/v2\/posts\/1328\/revisions"}],"predecessor-version":[{"id":3636,"href":"https:\/\/wspelt.com\/index.php?rest_route=\/wp\/v2\/posts\/1328\/revisions\/3636"}],"wp:attachment":[{"href":"https:\/\/wspelt.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1328"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wspelt.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1328"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wspelt.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1328"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}