Sequential promises vs async/await

In this example below you will see how to do a Sequential promises vs async/await with some HTML / CSS and Javascript

This example shows the difference of executing in sequence a series of actions that take some time and return a promise using a promises based approach vs an async/await approach.

Thumbnail
This awesome code was written by ivanalejandro0, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ivanalejandro0 ©
  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Sequential promises vs async/await</title>
  
  
  
  
  
</head>

<body>

  
  <script src='https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.20.0/polyfill.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/ivanalejandro0/sequential-promises-vs-asyncawait-NdPexm */
var test_async = function () {
  var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
    var _iteratorNormalCompletion, _didIteratorError, _iteratorError, _iterator, _step, item;

    return regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            console.log('[test_async] run');
            _iteratorNormalCompletion = true;
            _didIteratorError = false;
            _iteratorError = undefined;
            _context.prev = 4;
            _iterator = items[Symbol.iterator]();

          case 6:
            if (_iteratorNormalCompletion = (_step = _iterator.next()).done) {
              _context.next = 13;
              break;
            }

            item = _step.value;
            _context.next = 10;
            return f1(item);

          case 10:
            _iteratorNormalCompletion = true;
            _context.next = 6;
            break;

          case 13:
            _context.next = 19;
            break;

          case 15:
            _context.prev = 15;
            _context.t0 = _context['catch'](4);
            _didIteratorError = true;
            _iteratorError = _context.t0;

          case 19:
            _context.prev = 19;
            _context.prev = 20;

            if (!_iteratorNormalCompletion && _iterator.return) {
              _iterator.return();
            }

          case 22:
            _context.prev = 22;

            if (!_didIteratorError) {
              _context.next = 25;
              break;
            }

            throw _iteratorError;

          case 25:
            return _context.finish(22);

          case 26:
            return _context.finish(19);

          case 27:
          case 'end':
            return _context.stop();
        }
      }
    }, _callee, this, [[4, 15, 19, 27], [20,, 22, 26]]);
  }));

  return function test_async() {
    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"); }); }; }

var items = [1, 2, 3, 4, 5, 6];

// do something that takes time with the item
function f1(item) {
  console.log('[f1] received', item);
  return new Promise(function (resolve, reject) {
    setTimeout(resolve, 1000);
  });
}

function test_promise() {
  console.log('[test_promise] run');
  var p = items.reduce(function (promise, item) {
    return promise.then(function () {
      return f1(item);
    });
  }, Promise.resolve());
  return p;
}

test_promise().then(function () {
  return console.log('done promise');
});

test_async().then(function () {
  return console.log('done async');
});

Comments