Async Await without using async Await

Question

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;
},

May be using a transpiler like Babel will be easier for you. — Zysce

Igor Igor · Accepted Answer · 2018-08-21T17:12:27

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;
});

Async Await without using async Await

1 Answers