{"id":39463,"date":"2020-05-15T06:00:30","date_gmt":"2020-05-15T13:00:30","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/premier-developer\/?p=39463"},"modified":"2020-05-11T10:05:17","modified_gmt":"2020-05-11T17:05:17","slug":"resolved-javascript-promises-can-be-used-multiple-times","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/premier-developer\/resolved-javascript-promises-can-be-used-multiple-times\/","title":{"rendered":"Resolved JavaScript Promises Can Be Used Multiple Times!"},"content":{"rendered":"

In this post, App Dev Manager Ashley Grant<\/a> shows how to cache data in JavaScript Promises.<\/p>\n

\n

JavaScript Promises are powerful, and they become more powerful once we understand that a “resolved” Promise can be used more than once! How can we use this in a “real” application? Maybe you have a button in your application that will display user information when clicked. You could wait to make the fetch call until the button is clicked, and then save this Promise in a variable. In future calls, the code will see that this Promise already exists, and thus skip calling fetch again.<\/p>\n

Something like this:<\/p>\n

let fetchUsers;   \r\n\r\ndocument.getElementById('displayUser').onclick = () => {\r\n  if(!fetchUsers) {\r\n    fetchUsers = fetch('https:\/\/api.github.com\/users')\r\n      .then( response => response.json());\r\n  } \r\n  \r\n  const index = document.getElementById('index').value;\r\n  \r\n  fetchUsers.then(users => {\r\n    document.getElementById('userName').innerHTML = users[index].login;\r\n  });\r\n};<\/pre>\n
Read the full article here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
JavaScript Promises are powerful, and they become more powerful once we understand that a “resolved” Promise can be used more than once!<\/p>\n","protected":false},"author":582,"featured_media":37840,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3912,5940,129,1],"tags":[3914,109,308],"class_list":["post-39463","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-async","category-development","category-premier","category-permierdev","tag-async","tag-javascript","tag-premier"],"acf":[],"blog_post_summary":"
JavaScript Promises are powerful, and they become more powerful once we understand that a “resolved” Promise can be used more than once!<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/39463","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/users\/582"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/comments?post=39463"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/39463\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media\/37840"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media?parent=39463"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/categories?post=39463"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/tags?post=39463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}