Promise, Async/Await

이전까지는 그래도 이해 안되도 꾸역꾸역 해왔는데, 정말 어려운 부분이 나왔다. 이 부분을 블로깅할 자신이 없어서 미루다 보니 일주일이 지나 블로깅을 하게 되었는데, 어렵다고 블로깅 포기하지 말고 밀리지 말고 부트캠프 끝날 때 까지 하자!

Promise

비동기적인 코드를 동기적인 코드로 바꾸는 여러가지 방법 중 하나이다. Promise는 객체중에 클라스이고, then을 이용해 인자를 넘겨주며 순차적으로 코드를 실행시킬 수 있게 해준다. 오류가 났을 때는 catch를 통해 다음 인자를 넘겨주어 코드를 실행시킨다.

let promise = new Promise(function(resolve, reject) {
	resolve('성공');
	//reject('실패');
});

promise
  .then((value) => {
    console.log(value);
    return '성공';
  })
  .then((value) => {
    console.log(value);
    return '성공';
  })
  .then((value) => {
    console.log(value);
    return '성공';
  })
  .catch((error) => {
    console.log(error);
    return '실패';
  })
  .finally(() => {
    console.log('성공이든 실패든 작동!');
  });

예시코드에서 보면 Promise에서 resolve를 호출 하므로 state(상태)가 fulfilled(이행)가 되며 then이 있는 코드를 차례로 실행시킨다. return 값으로 문자열을 주는 것을 볼 수 있는데, 이는 다음 then의 매개변수로 사용된다. 만약 promise 함수에 reject를 실행 시키면 state는 rejected(거절됨)이 되고 catch에 있는 코드가 실행된다. finally는 상태에 상관없이 실행됨으로 두 경우 모두 마지막에 실행된다.

resolve("성공")인 경우

reject("실패")인 경우

Promise.all()

promise.all()은 비동기로 작동되는 작업들을 묶어서 한번에 실행 시키는 방법이다. promise.all()는 동시에 promise들을 실행시키기 때문에 시간이 단축되고, 여러개의 promise에 동일한 then과 catch를 사용할 경우 그것들을 한번만 써주면 되서 코드도 간결해진다.

Promise.all([
	new Promise((resolve, reject) => setTimeout(() => resolve(new Error('에러1'))), 1000),
	new Promise((resolve, reject) => setTimeout(() => resolve(new Error('에러2'))), 2000),
	new Promise((resolve, reject) => setTimeout(() => resolve(new Error('에러3'))), 3000),
])
	.then((value) => console.log(value))
  .catch((err) => console.log(err));

위에 예시를 보면 3개의 promise를 Promise.all()로 묶어주었는데, setTimeout()을 이용해 1초, 2초, 3초 후에 consolelog가 찍힐 것이다. 만약 state가 rejected가 되는 promise가 하나라도 있으면 해당 promise만을 실행하고 함수가 종류되는데, 그것이 두 개 이상 있어도 가장 먼저 rejected되는 promise만이 실행되고 종류된다.

Async/Await

Async/Await는 promise가 가진 복잡성을 조금더 단순화 하게 해주는 ES8에 나오는 문법이다. promise와 연계해서 주로 사용한다.

// 함수 선언식
async function funcDeclarations() {
	await 작성하고자 하는 코드
	...
}

// 함수 표현식
const funcExpression = async function () {
	await 작성하고자 하는 코드
	...
}

// 화살표 함수
const ArrowFunc = async () => {
	await 작성하고자 하는 코드
	...
}

await뒤에는 promise가 들어가고, await은 한 await이 끝난 뒤에 다음 await이 실행된다.

const printString = (string) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve();
      console.log(string);
    }, Math.floor(Math.random() * 100) + 1);
  });
};

const printAll = async () => {
  await printString('A');
  await printString('B');
  await printString('C');
};

printAll();

promise를 만들어서 그것들이 순서대로 동작하게 만든 것이다.