다음은 웹 기반 파일 시스템 구현 프로젝트의 일부 기능이다.

파일 목록에서 선택한 다수의 파일 및 폴더를 다른 폴더로 이동할 수 있다.
이때, 이동 대상 폴더에 이름이 같은 파일 및 폴더가 이미 존재할 경우 모든 건에 대해서 사용자에게 확인한다.

예를 들어 ‘새 폴더’라는 이름이 중복될 경우, ‘이동하려는 폴더에 이름이 중복된 폴더가 있습니다.
[새 폴더(1)]이라는 이름으로 변경 후 이동하시겠습니까?’라는 문구의 확인용 디자인 레이어를 띄운다.

'확인'을 누르면 그 이름으로 이동시킨다. 이때 '이후의 모든 항목에 적용'
체크박스를 누르면 이후 중복 건은 모두 '확인' 처리한다.

'취소'를 누르면 그 파일에 대해 취소한다. 마찬가지로 '이후의 모든 항목에 적용'
체크박스를 누르면 이후 중복 건을 모두 '취소' 처리한다.

사용자가 모든 중복 건에 대해 확인하면 모든 건에 대해 이동 처리한다.

GET  '/api/check-duplication'
[이름 중복 확인]
 - 특정 폴더의 id와 생성할 이름을 전달
 - 중복되는 경우 사용 가능한 새 이름과 함께 409 응답
 - 가능한 경우 200 응답

POST '/api/move'
[파일 및 폴더 이동]
 - 이동 대상 파일 및 폴더의 id 목록과 이동 대상 폴더의 id 전달
 - 오류가 없으면 모든 이동을 처리 후 200 응답

<div id="layer">
  <input type="checkbox" id="checkbox" />
  <button type="button" id="ok">ok</button>
  <button type="button" id="cancel">cancel</button>
</div>

<script>
  const layer = $("#layer");
  const checkbox = $("#checkbox");

  /**
   * @param {string} msg - confirm 에 출력할 메시지 내용
   * @param {function} cb - callback 함수
   */
  function jsConfirm(msg, cb = () => {}) {
    checkbox.prop("checked", false);

    layer.show().on("click", ev => {
      const target = $(ev.target);
      const checked = checkbox.prop("checked");

      if (target.is("#ok")) {
        layer.hide().off();
        cb({ confirmed: true, checked });
      } else if (target.is("#cancel")) {
        layer.hide().off();
        cb({ confirmed: false, checked });
      }
    });
  }
</script>

// [이름 중복 확인] API의 응답 데이터 (요청한 이름, 사용가능한 이름 쌍)
const dupList = [["foo", "foo(2)"], ["bar", "bar(2)"], ["baz", "baz(2)"]];

// 이 변수에 확인 항목을 모은다
let resolved = [];

function resolveDuplicates(idx) {
  const item = dupList[idx];

  jsConfirm(`msg${idx}`, ({ confirmed, checked }) => {
    if (confirmed) {
      // A '확인'
      resolved.push(item);
    }

    idx += 1;

    if (checked) {
      if (confirmed) {
        // B '이후 모든 항목에 적용', '확인'
        resolved = [...resolved, ...dupList.slice(idx)];
      } else {
        // C '이후 모든 항목에 적용', '취소'
      }
      return;
    }

    if (!dupList[idx]) {
      // D 모든 항목 완료
      return;
    }

    resolveDuplicates(idx);
  });
}
resolveDuplicates(0);

/**
 * @param {string} msg - confirm 에 출력할 메시지 내용
 * @returns {Promise}
 */
function jsConfirm(msg) {
  // Return Promise
  return new Promise((resolve, reject) => {
    checkbox.prop("checked", false);

    layer.show().on("click", ev => {
      const target = $(ev.target);
      const checked = checkbox.prop("checked");

      if (target.is("#ok")) {
        layer.hide().off();
        resolve({ confirmed: true, checked });
      } else if (target.is("#cancel")) {
        layer.hide().off();
        resolve({ confirmed: false, checked });
      }
    });
  });
}

let resolved = [];

dupList
  .reduce((promise, item, idx) => {
    return promise.then(() => {
      return jsConfirm().then(({ confirmed, checked }) => {
        if (confirmed) {
          // A '확인'
          resolved.push(item);
        }

        idx += 1;

        if (checked) {
          if (confirmed) {
            // B '이후 모든 항목에 적용', '확인'
            resolved = [...resolved, ...dupList.slice(idx)];
          } else {
            // C '이후 모든 항목에 적용', '취소'
          }

          // Promise 체인을 완전히 탈출하기 위함
          throw new Error("checked");
        }
      });
    });
  }, Promise.resolve())
  .then(() => {
    // D 모든 항목 완료
    console.log(resolved);
  });

run(function*() {
  let resolved = [];

  for (let i = 0, len = dupList.length; i < len; i += 1) {
    const item = dupList[i];
    const { confirmed, checked } = yield jsConfirm();

    if (confirmed) {
      // A 확인
      resolved.push(item);
    }

    if (checked) {
      if (confirmed) {
        // B '이후 모든 항목에 적용', '확인'
        resolved = [...resolved, ...dupList.slice(i + 1)];
      } else {
        // C '이후 모든 항목에 적용', '취소'
      }

      break;
    }
  }

  // D 모든 항목 완료
  console.log(resolved);
});

function* moveObjects(destId, targetIdList) {
  // [이름 중복 확인] API 호출
  const dupList = yield axios.get("/api/check-duplicate?dest...");

  // [중복되는 모든항목의 사용자 응답 수집]
  let resolved = [];
  for (let i = 0, len = dupList.length; i < len; i += 1) {
    const item = dupList[i];
    const { confirmed, checked } = yield jsConfirm();

    if (confirmed) {
      // A 확인
      resolved.push(item);
    }

    if (checked) {
      if (confirmed) {
        resolved = [...resolved, ...dupList.slice(i + 1)];
      }

      break;
    }
  }

  // [개체 이동] API 호출
  yield axios.post("/api/move", { resolved /* request data */ });
}

function* moveObjects(destId, targetIdList) {
  try {
    /* 구현 */
  } catch (err) {
    // API 호출 오류 처리
    // 기타 오류 처리
  } finally {
    // 필요의 경우 구현 (React의 경우 이전 상태로 복원 등...)
  }
}

function run(gen) {
  const iter = gen();

  (function iterate({ value, done }) {
    if (done) {
      return value;
    }

    if (value.constructor === Promise) {
      value
        .then(data => iterate(iter.next(data)))
        .catch(err => iter.throw(err)); // 여기가 추가된 코드
    } else {
      iterate(iter.next(value));
    }
  })(iter.next());
}

try {
  jQuery.ajax({
    success: () => {
      //여기서 오류가 발생해도
    }
  });
} catch (err) {
  // 여기서 잡을 수 없다.
}

// 서비스 코드
<script>
  // 네임스페이스 설정
  window.ne = { toastDrive: {} };
</script>
<script src="src/js/generators.js"></script>
<script>
  ne.toastDrive.logList(["a", "b"]);
</script>

// src/js/generators.src.js

function run(gen) {/* runner */}

ne.toastDrive.logList = function(dupList) {
  run(function*() {
    for (let item of dupList) {
      console.log(item);
      yield item;
    }
  });
};

// regenerator 설치
npm install -g regenerator

// --include-runtime을 통해 의존 모듈을 포함하여 트랜스파일
regenerator --include-runtime src/js/generators.src.js > src/js/generators.js