title: Async Await without using async Await
body: <p>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.</p>
  
  <p>Working code using Async/Await <a href="https://codepen.io/theller5567/pen/MqYyzr" rel="nofollow noreferrer">here</a> on Codepen.io</p>
  
  <p>Please, any help would be greatly appreciated.</p>
  
  <p><strong>Javascript trying not to use Async/Await:</strong></p>
  
  <pre><code>const getPromise = () =&gt; {  
  return new Promise((resolve, reject) =&gt; {
      setTimeout(() =&gt; {
        $.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) =&gt; {
          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() {
    (() =&gt; {
        getPromise()
        .then(result =&gt; {
          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 =&gt; {
            console.log(err);
        });
    })();
  };
  </code></pre>
  
  <p>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.</p>
  
  <p><strong>Here is my working code using Async/Await:</strong></p>
  
  <pre><code>init: function(){
    bcp.topbar = parseInt($('.topbar').css('height'), 10);
    bcp.bottombar = parseInt($('.bottom-bar').css('height'), 10);
    if(!bcp.countriesLoaded){
        bcp.addCountries().then((countries) =&gt; {
        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 =&gt; {
      setTimeout(() =&gt; {
        $.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;
  },
  </code></pre>