javascript - Async Await without using async Await

itemprop="text">

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 href="https://codepen.io/theller5567/pen/MqYyzr" rel="nofollow
noreferrer">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;
},

Answer

Take the working version (from your
comment Here is my working code using Async/Await:)
and change addCountries to
this.

Answer used:

return
            bcp.getCountries().then((countries) => {

 console.log('test',
            countries);
 bcp.toggleCountrySection();
 bcp.countriesLoaded =
            true;
 return
            countries;
});