I am trying to convert my code from using Async/Await methods to basic .then() promises. The reason is that Async/Await does not work on IE. I am new to promises and came in late with finally getting a hang of using Async/Await but now need to convert back in time a little to make my code work in IE.
Working code using Async/Await here on Codepen.io
Please, any help would be greatly appreciated.
Javascript trying not to use Async/Await:
const getPromise = () => { return new Promise((resolve, reject) => { setTimeout(() => { $.getJSON( countriesUrl, function( data ) { }).done(function(data){ resolve(data); }).fail(function(error){ var reason = new Error('mom is not happy today'); reject(reason); }); }, 500); }); }; var bcp = { init: function(){ bcp.topbar = parseInt($('.topbar').css('height'), 10); bcp.bottombar = parseInt($('.bottom-bar').css('height'), 10); if(!bcp.countriesLoaded){ console.log('testing'); bcp.addCountries().then((countries) => { console.log('hello'); bcp.popup = $($.fancybox.getInstance().current.src)[0]; bcp.distributorArrays(countries); }); }else { bcp.addEventListeners(); } }, toggleCountrySection: function(){ $('#locationModal').find('.loading').toggleClass('show'); $('.content').toggle(); }, getCountries: function() { console.log('get Countries'); bcp.toggleCountrySection(); }, addCountries: function() { (() => { getPromise() .then(result => { console.log('result', result); var data = result; return data; }).then(function(data){ var countries = data; bcp.toggleCountrySection(); bcp.countriesLoaded = true; console.log('test', countries); return countries; }) .catch(err => { console.log(err); }); })(); }; I never receive the console.log('hello'). So my function bcp.addCountries().then((countries) => {}) is not retruning anytihng or i feel like i am not using the .then() properly.
Here is my working code using Async/Await:
init: function(){ bcp.topbar = parseInt($('.topbar').css('height'), 10); bcp.bottombar = parseInt($('.bottom-bar').css('height'), 10); if(!bcp.countriesLoaded){ bcp.addCountries().then((countries) => { bcp.popup = $($.fancybox.getInstance().current.src)[0]; bcp.distributorArrays(countries); }); }else { bcp.addEventListeners(); } }, toggleCountrySection: function(){ $('#locationModal').find('.loading').toggleClass('show'); $('.content').toggle(); }, getCountries: function() { console.log('get Countries'); bcp.toggleCountrySection(); return new Promise(resolve => { setTimeout(() => { $.ajax({ url: countriesUrl, success: function(data) { var results = JSON.parse(data); resolve(results); } }); }, 1500); }); }, addCountries: async function() { var countries = await bcp.getCountries(); bcp.toggleCountrySection(); bcp.countriesLoaded = true; return countries; }, 
