[Javascript] 비동기, Promise, async, await 구분해서 사용하기

비동기, Promise, async, await 

비동기 - 동시에 여러 작업을 해야할 때

자바스크립트에서는 아무 일도 안하고 단순히 기다리기만 하는 함수가 있다.

바로 setTimeout 함수이다. 첫번째 인자는 기다린 후에 실행시킬 함수, 그 다음은 기다릴 밀리초이다.

console.log("모두에게 일을 시켜보자!");

setTimeout(() => {
  console.log("A: 일을 마쳤습니다!");
}, 1000);

setTimeout(() => {
  console.log("B: 일을 마쳤습니다!");
}, 1000);

setTimeout(() => {
  console.log("C: 일을 마쳤습니다!");
}, 1000);

console.log("일은 전부 시켜놓았다!");

모두에게 일을 시켜보자!
일은 전부 시켜놓았다!
A: 일을 마쳤습니다!
B: 일을 마쳤습니다!
C: 일을 마쳤습니다!

1초만의 시간만 걸린다. 일을 시켜놓기만 하면 알아서 진행한다.

 

우선, setTimeout 함수는 자체의 실행은 즉시 실행되고 리턴된다. setTimeout 함수가 즉시 종료되는 이유는 작업을 예약하는 일이 전부이기 때문이다. 이것에 관한 설명은 이벤트 루프를 참고하기 바란다.

 

setTimeout 함수를 통해 시간이 조금 걸리지만 기다리기만 하면 되는 작업을 흉내내 보았다.

1. setTimeout는 인자로 들어온 콜백 함수를 예약하기만 하고 바로 끝난다.

2. setTimeout에 의해 기다리는 동작은 본래의 코드 흐름과는 상관없이 따로 따로 독립적으로 돌아간다.

3. 이렇게 따로따로 독립적으로 돌아가는 작업을 비동기 작업이라고 한다.

 

어떤 작업들이 비동기로 진행될까?

브라우저에서는 ajax라 불리는 XMLHttpRequest 객체를 활용하여 비동기적으로 요청을 보내고 받을 수 있었고,

최근에는 Fetch API를 사용하는 방법이 늘고있다.

 

비동기 작업의 문제점 (1) - 흐름을 예측하기 어렵다.

동기적으로 동작한다는 건, 시간이 오래 걸리긴 하지만 무엇이 어떻게 진행될 지는 명확하다.

반면, 비동기 코드에서는 비교적 효율적이긴 하지만, 무엇이 어떤 순서로 진행될지 예측이 어렵다.

 

비동기 작업의 문제점 (2) - 콜백 지옥

비동기 작업 특성상, 각각의 비동기 작업이 끝났을 때 이어질 작업을 미리 부여하는 식으로 흐름을 제어한다.

비동기 작업이 차례대로 주루룩 이어져 있다면, 이는 콜백 지옥에 해당한다.

종종 콜백 지옥에 의해 Promise가 등장했다는 설명도 있다. (반은 맞고 반은 틀린 설명이다.) 콜백을 통해 다음 할 일을 정하는 개념은 Promise에서도 동일하다. 콜백 지옥이라는 상황이 벌어지는 이유는 비동기 작업을 관리한다는 개념 자체가 없어서 코드가 지저분해질 수 밖에 없기 때문이다.

 

Promise

Promise는 비동기 작업의 단위이다. Promise를 통해 어떻게 비동기 작업들을 쉽게 관리할 수 있는지 알아보자.

기본 사용법

우선 Promise로 관리할 비동기 작업을 만들 때에는 Promise에서 요구하는 방법대로 만들어야 한다. new Promise(...)

const promise1 = new Promise((resolve, reject) => {
  // 비동기 작업
});

1. 변수의 이름은 promise1이며, const로 선언했기 때문에 재할당이 되지 않는다. 하나의 변수로 끝까지 해당 Promise를 관리하는 것이 가독성도 좋고 유지보수 하기도 좋다.

2. new Promise(...)로 Promise 객체를 새로 만들었다. 생성자는 함수와 동일하게 동작하므로 괄호를 사용하여 함수를 호출한다.

3. 생성자는 특별한 함수를 인자로 받는다. 

이 특별한 함수는 공식문서에서 executor라는 이름으로 부른다. 이 함수에 대해 자세히 설명하면 다음과 같다.

1. executor는 첫번째 인수로 resolve, 두번째 인수로 reject를 받는다.

2. resolve는 executor내에서 호출할 수 있는 또 다른 함수이다. resolve를 호출하게 된다면 비동기 작업이 성공했다는 뜻입니다.

3. reject 또한 executor 내에서 호출할 수 있는 또 다른 함수이다. reject를 호출하게 된다면 비동기 작업이 실패했다는 뜻입니다.

 

Promise의 특징으로 new Promise(...)하는 순간 여기에 할당된 비동기 작업은 바로 시작된다.

함수는 으레 정의하는 시점과 호출하는 시점이 다르다고 했지만 new Promise(...)는 바로 호출한다.

비동기 작업의 특징은 작업이 언제 끝날지 모른다. 이 작업이 성공하거나 실패하는 순간에 뒷처리를 해줘야 한다.

Promise 가 끝나고 다음의 동작을 설정해줄 수 있는데 바로 then 메서드와 catch 메서드다.

- then 메서드는 해당 Promise가 성공했을 때의 동작을 지정한다. 인자로 함수를 받는다.

- catch 메서드는 해당 Promise가 실패했을 때의 동작을 지정한다. 인자로 함수를 받는다.

- 위 함수는 체인 형태로 활용할 수 있다. 

 

const promise1 = new Promise((resolve, reject) => {
  resolve();
});

promise1
  .then(() => {
    console.log("then!");
  }).catch(() => {
    console.log("catch!");
  });

executor로 새로운 Promise를 만든 다음 then과 catch를 이용하여 후속 동작까지 지정해줘야 한다.

위 코드의 실행 결과는 다음과 같다.

then!

resolve 부분을 reject로 수정하였다. 

const promise1 = new Promise((resolve, reject) => {
  reject();
});

promise1
  .then(() => {
    console.log("then!");
  })
  .catch(() => {
    console.log("catch!");
  });

이것의 실행결과는 다음과 같다.

catch!

재사용하기

new Promise(...)를 하는 순간 비동기 작업이 시작되는데, 비슷한 비동기 작업을 수행할 때마다 매번 new Promise(...)를 해주어야 할까? new Promise(...) 한 것을 그대로 리턴하는 함수를 만들어 사용하면 된다.

function startAsync(age) {
  return new Promise((resolve, reject) => {
    if (age > 20) resolve();
    else reject();
  });
}

const promise1 = startAsync(25);
promise1
  .then(() => {
    console.log("1 then!");
  })
  .catch(() => {
    console.log("1 catch!");
  });

const promise2 = startAsync(15);
promise2
  .then(() => {
    console.log("2 then!");
  })
  .catch(() => {
    console.log("2 catch!");
  });

1 then!
2 catch!

작업 결과를 전달하기

resolve, reject 함수에 인자를 전달함으로써 then 및 catch 함수에서 비동기 작업으로부터 정보를 얻을 수 있다.

function startAsync(age) {
  return new Promise((resolve, reject) => {
    if (age > 20) resolve(`${age} success`);
    else reject(new Error(`${age} is not over 20`));
  });
}

const promise1 = startAsync(25);
promise1
  .then((value) => {
    console.log(value);
  })
  .catch((error) => {
    console.error(error);
  });

const promise2 = startAsync(15);
promise2
  .then((value) => {
    console.log(value);
  })
  .catch((error) => {
    console.error(error);
  });

25 success
Error: 15 is not over 20
  at file
  at new Promise(<anonymous>)
  ...

기타 고려사항

- executor 내부에서 에러가 throw 된다면 해당 에러로 reject 가 수행된다.

- executor의 리턴값은 무시된다.

- 첫번째 resolve, reject만 유효하다.

const throwError = new Promise((resolve, reject) => {
  throw Error("error");
});
throwError
  .then(() => console.log("throwError succeess"))
  .catch(() => console.log("throwError catched")); //
  
const ret = new Promise((resolve, reject) => {
  return "returned");
});
ret
  .then(() => console.log("ret success")) //
  .catch(() => console.log("ret catched"))

// resolve 만 됩니다.
const several1 = new Promise((resolve, reject) => {
  resolve();
  reject();
});
several1
  .then(() => console.log("several1 success"))
  .catch(() => console.log("several1 catched"));

// reject 만 됩니다.
const several2 = new Promise((resolve, reject) => {
  reject();
  resolve();
});
several2
  .then(() => console.log("several2 success"))
  .catch(() => console.log("several2 catched"));

// resolve 만 됩니다.
const several3 = new Promise((resolve, reject) => {
  resolve();
  throw new Error("error");
});
several3
  .then(() => console.log("several3 success"))
  .catch(() => console.log("several3 catched"));

Promise의 의의

Promise는 세 가지 상태를 가진다.

- 대기 (pending)

- 이행 (fulfilled)

- 거부 (rejected)

이행 상태 일때 then, 거부 상태일 때 catch로 등록한 동작들이 실행됩니다. 

Promise를 생성한 이후에 상태가 실제로 어떤지 확인은 할 수 업다. 자바스크립트를 실행하는 브라우저 혹은 node.js에서 알아서 관리하기 때문이다.

Promise는 비동기 작업을 생성/시작하는 부분 (new Promise(...))과 작업 이후의 동작 지정부분 (then, catch)을 분리함으로써 유연한 설계를 가능토록 한다.

 

async - 비동기 작업을 만드는 손쉬운 방법

async 키워드는 함수를 선언할 때 붙여줄 수 있다. async 키워드가 붙은 함수를 async 함수, 없는 함수를 일반 함수라고 부르도록 하자. 

async 함수는 Promise와 밀접한 연관을 가지고 있는데, 기존에 작성한 executor로부터 몇가지 규칙만 적용한다면 new Promise(...)를 리턴하는 함수를 async 함수로 손쉽게 변환할 수 있다.

- 함수에 async 키워드를 붙인다.

- new Promise (...) 부분을 없애고 executor 본문 내용만 남긴다.

- resolve(value); 부분을 return value; 로 변경한다.

- reject(new Error(...)); 부분을 throw new Error(...); 로 수정한다.

 

// 기존
// function startAsync(age) {
//   retrurn new Promise((resolve, reject) => {
//     if (age > 20) resolve(`${age} success`);
//     else reject(new Error(`${age} is not over 20`));//   
//   });
// }

async function startAsync(age) {
  if (age > 20) return `${age} success`;
  else throw new Error(`${age} is not over 20`);
}

const promise1 = startAsync(25);
promise1
  .then((value) => {
    console.log(value);
  })
  .catch((error) => {
    console.error(error);
  });

const promise2 = startAsync(15);
promise2
  .then((value) => {
    console.log(value);
  })
  .catch((error) => {
    console.error(error);
  });

실행하면 다음과 같다.

25 success
Error: 15 is not over 20
    at startAsync
    ...

놀랍게도 똑같이 동작한다.

이런 결론을 얻을 수 있다.

async 함수의 리턴값은 무조건 Promise이다.

우리는 async 함수를 일반 함수처럼 사용할 수 없다는 걸 절실히 깨닫게 되었다. 우리는 무조건 async 함수를 실행시킨 뒤 then과 catch 를 활용하여 흐름을 제어해야 한다.

한가지 사소하게 다른 점은, 에러메시지가 두 줄 줄어들었다. new Promise(<anonymous>) 부분이 사라졌다.

 

모든 비동기 동작을 async 함수로 만들 수 있는 건 아니다.

 

await - Promise 가 끝날 때까지 기다리라.

awaited는 Promise 가 이행되든지 거절되든지 끝날 때까지 기다리는 함수이다. await는 async 함수 내부에서만 사용할 수 있다.

function setTimeoutPromise(delay) {
  return new Promise((resolve) => setTimeout(resolve, delay));
}

async function startAsync(age) {
  if (age > 20) return `${age} success`;
  else throw new Error(`${age} is not over 20`);
}

async function startAsyncJobs() {
  await setTimeoutPromise(1000);
  const promise1 = startAsync(25);
  
  try {
    const value = await promise1;
    console.log(value);
  } catch (e) {
    console.error(e);
  }
  
  const promise2 = startAsync(15);
  
  try {
    const value = await promise2;
    console.log(value);
  } catch (e) {
    console.error(e);
  }
}

startAsyncJobs();

// 1초후
25 success
Error: 15 is not over 20
    at startAsync
    at startAsyncJobs

1. 문법적으로 await [[Promise 객체]] 사용한다.

2. await은 Promise가 완료될 때까지 기다린다. 그러므로 setTimeoutPromise의 executor에서 resolve 함수가 호출될 때까지 기다립니다. 그 동안 startAsyncJobs의 진행은 멈춰있다.

3. await은 Promise 가 resolve 한 값을 내놓는다. async 함수 내부에서는 리턴하는 값을 resolve한 값으로 간주하므로 value엔 ${age| success가 들어간다.

4. 해당 Promise에서 reject가 발생한다면 예외가 발생한다. 이 예외를 처리하기 위해선 try-catch 구문을 사용한다. reject로 넘긴 에러 (async 함수 내에서는 throw한 에러)는 catch 절로 넘어간다. 

 

await는 왜 async 함수에서만 사용할 수 있을까?

비동기 작업으로부터 파생된 모든 작업은 비동기 작업으로 간주할 수 있다. 동기적으로 실행되는 프로그램에서 비동기 작업이 시작되었을 때, 그것을 기다리는 행위는 무의미하다.

반면, 비동기 환경에서 비동기 작업의 결과를 기다리는 것은 의미가 있다. 비동기는 동작 특성상 실제 작업과 그 작업의 후속 조치를 분리할 수밖에 없는데, async와 await를 쓰면 하나의 흐름 속에서 코딩할 수 있다.

 

.then 혹은 await가 없다면 어떻게 될까?

function setTimeoutPromise(delay) {
  return new Promise((resolve) => setTimeout(resolve, delay));
}

async function startAsync() {
  setTimeoutPromise(1000);
  setTimeoutPromise(1500);
  setTimeoutPromise(2000);
}

console.log("시작");

const promise = startAsync();
promise
  .then(() => {
    console.log("끝");
    process.exit(0);
  });

위 코드는 실행되자마자 아래 출력을 남기고 즉시 종료된다.

시작
끝

startAsync 함수의 문제점은 명확하다. setTimeoutPromise에 await를 걸지 않았다는 것이다. 

await 을 적절히 걸어야 한다는 감각은 처음 비동기를 익힐 때 쉽사리 적응되지 않는 감각이므로, 자주 쓰면서 습관을 만들어낼 수 밖에 없다.

 

 참고하면 좋은 글 

https://frogand.tistory.com/105

[ES6] 프로미스 (Promise)

- 비동기 처리를 위해 콜백 패턴을 사용하면 처리 순서를 보장하기 위해 여러 개의 콜백 함수가 네스팅(nesting, 중첩)되어 복잡도가 높아지는 콜백 헬(Callback Hell)이 발생하는 단점이 있다. 

- 이때 비동기 처리가 성공하면 콜백 함수의 인자로 전달받은 resolve 함수를 호출한다. 이때 프로미스는 'fulfilled' 상태가 된다. 비동기 처리가 실패하면 reject 함수를 호출한다. 이때 프로미스는 'rejected' 상태가 된다. 

 

 출처 

https://springfall.cc/post/7

[Javascript] 비동기, Promise, async, await 확실하게 이해하기