21_동기적처리와 비동기적 처리

* 동기적 처리

:: 입력된 순서대로 처리하여 출력한다. 1칸당 처리속도가 1초라고 가정했을 때 5초가 소요된다.

• 비동기적 처리

1) Promise와 async-await
:: 동기처리와 비동기처리를 분리하고, 비동기를 순서대로 처리하여 출력한다. (5초)

console.log('start');

비동기적으로 처리 
{
 const f1 = (sec) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('1번');
      }, sec * 1000)
    })
  };

  const f2 = (sec, message) => {
    console.log(message);
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('2번');
      }, sec * 1000)
    })
  };
 
  const f3 = (sec, message) => {
    console.log(message);
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('3번');
      }, sec * 1000)
    })
  };
 
  f1(2)
    .then((res) => f2(1, res))
    .then((res) => f3(1, res))
    .then((res) => console.log(res))
}

console.log('end');

// start
// end
// 1번 (2초)
// 2번 (1초)
// 3번 (1초)

2) Promise.all
:: 동기처리와 비동기처리를 분리하고, 비동기를 병렬로 동시에 처리하여 출력한다. (3초)

console.log('start');

비동기적으로 처리 
{
 const f1 = (sec) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('1번');
      }, sec * 1000)
    })
  };

  const f2 = (sec, message) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('2번');
      }, sec * 1000)
    })
  };
 
  const f3 = (sec, message) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('3번');
      }, sec * 1000)
    })
  };
 
  Promise.all([f1(1), f2(1), f3(1)]).then(result => console.log(result);
}

console.log('end');

// start
// end
// ["1번", "2번", "3번"] (1초)

참고: https://code-masterjung.tistory.com/91