JS Async and await to work in internet explorer

Question

I have already gotten my project to work on with async/await in every other browser, but apparently its not compatible in IE.

(async function () {
  try {
    await getLayers();
  }
  catch (err) {
    console.error(err)
  }
}());

which calls my other function:

async function getLayers() {  
try {
  $.when(
    await $.getJSON('http://' + ipAddress + '/api/Barriers/barrierGeoJSON', function (data) {
        createLayer(data[0].row_to_json, 'Barrier');
      }),
     await $.getJSON('http://' + ipAddress + '/api/DistPoints/distPointGeoJSON', function (data) {
        createLayer(data[0].row_to_json, 'Disturbance Points');
      })
  )}
  catch (err) {
    console.error(err);
  }
};

I need help getting this code to run on IE. Is there some sort of polyfill or transpiler that I have to use? I would hate to have to rewrite everything when it already runs smoothly. This is currently running client-side and I could not figure out how to use async--await. Thank you guys in advance.

Answer 1

I ended up using babel to convert this portion of my code to work with IE11. Also I had to import a polyfill so the regeneratorRuntime function will work.

It became this which works across all browsers:

_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
  return regeneratorRuntime.wrap(function _callee$(_context) {
    while (1) {
      switch (_context.prev = _context.next) {
        case 0:
          _context.prev = 0;
          _context.next = 3;
          return getLayers();

        case 3:
          _context.next = 8;
          break;

        case 5:
          _context.prev = 5;
          _context.t0 = _context['catch'](0);

          console.error(_context.t0);

        case 8:
        case 'end':
          return _context.stop();
      }
    }
  }, _callee, this, [[0, 5]]);
}))();

'use strict';

var getLayers = function () {
  var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
    return regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            _context.prev = 0;
            _context.t0 = $;
            _context.next = 4;
            return $.getJSON('http://' + ipAddress + '/api/Barriers/barrierGeoJSON', function (data) {
              createLayer(data[0].row_to_json, 'Barrier');
            });

          case 4:
            _context.t1 = _context.sent;
            _context.next = 7;
            return $.getJSON('http://' + ipAddress + '/api/DistPoints/distPointGeoJSON', function (data) {
              createLayer(data[0].row_to_json, 'Disturbance Points');
            });

          case 7:
            _context.t2 = _context.sent;

            _context.t0.when.call(_context.t0, _context.t1, _context.t2);

            _context.next = 14;
            break;

          case 11:
            _context.prev = 11;
            _context.t3 = _context['catch'](0);

            console.error(_context.t3);

          case 14:
          case 'end':
            return _context.stop();
        }
      }
    }, _callee, this, [[0, 11]]);
  }));

  return function getLayers() {
    return _ref.apply(this, arguments);
  };
}();

function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }

;