await 이후 동작 원리

안녕하세요 Aredra님, 먼저 강의에 대한 좋은 평가를 해주셔서 감사드립니다 :) 좋은 평가에 이어 또 좋은 질문을 주셨네요..!

답변부터 드리자면 async await는 내부적으로 Promise와 Generator의 조합으로 비동기 처리를 합니다. 사실 사용하는 사람 입장에서는 내부 구조까지 구체적으로 알 필요는 없지만, 여기서 await가 지정된 비동기 메서드 호출의 반환 값을 기다렸다가 다음 코드를 실행한다고 추정할 수 있을 것 같습니다.

위 코드의 경우 `res` 라는 변수는 비동기 처리가 된 이후에만 접근이 가능할 것입니다. 따라서, `res` 변수와 연관된 로직들도 비동기 처리 이후에 진행됩니다. 만약 해당 코드가 내부적으로 정확히 어떻게 돌아가는지 보시고 싶다면 아래 코드를 참고하시면 될 것 같습니다. 제가 Babel 사이트에서 위 코드를 내부적으로 어떻게 변환했는지 확인한 결과입니다.

"use strict";

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }

function example() {
  return _example.apply(this, arguments);
}

function _example() {
  _example = _asyncToGenerator(
  /*#__PURE__*/
  regeneratorRuntime.mark(function _callee() {
    var res;
    return regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            _context.next = 2;
            return Axios.get('foo');

          case 2:
            res = _context.sent;
            console.log('foo');

            if (res.data = 1) {// ...
            }

          case 5:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  }));
  return _example.apply(this, arguments);
}

강의 수강해주셔서 감사합니다 :)