[JS] Promise와 Async, Await 🧹

✔️ Promise

Promise를 활용하면 비동기로 작동하는 코드를 제어할 수 있다.
(Callback Hell을 방지하는 역할도 수행한다.)

---

🧽 new Promise

Promise는 class이기 때문에 new 키워드를 통해 Promise 객체를 생성하면 된다.

또한 Promise는 비동기 처리를 수행할 콜백 함수를 인수로 전달받는데,
이 콜백 함수(executor)는 resolve, reject 함수를 인수로 전달받는다.

let promise = new Promise((resolve, reject) => {
	// 1. 정상적으로 처리되는 경우
	// resolve의 인자에 값을 전달할 수도 있습니다.
	resolve(value);

	// 2. 에러가 발생하는 경우
	// reject의 인자에 에러메세지를 전달할 수도 있습니다.
	reject(error);
});

---

🧽 then, catch, finally

resolve : 연산이 성공적으로 완료됨 👉 .then

reject : 연산이 실패함 👉 .catch

정상 처리 여부와 상관없이 무조건 실행 👉.finally

let promise = new Promise(function(resolve, reject) {
	resolve("성공");
});

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

간단한 예제

const character = (name) => {
  return new Promise((resolve, reject) => {
    if (name === "tata") {
      resolve("tata 캐릭터입니다."); // 성공
    } else {
      reject("tata 캐릭터가 아닙니다."); // 실패
    }
  });
};

character("tata")
  .then((value) => {
    console.log(value);
    // tata 캐릭터입니다.
  })
  .catch((error) => {
    console.log(error);
  })
  .finally(() => {
    console.log("감사합니다.");
    // 감사합니다.
  });

---

🧽 Promise chaining

Promise chaining가 필요하는 경우는 비동기 작업을 순차적으로 진행해야 하는 경우이다.

Promise chaining이 가능한 이유?
.then .catch .finally의 메서드들은 Promise를 반환하기 때문

.then 안에서 리턴한 값이 Promise면 Promise의 내부 프로퍼티 result를 다음 .then 의 콜백 함수의 인자로 받아오고, Promise가 아니라면 리턴한 값을 .then 의 콜백 함수의 인자로 받아올 수 있다.

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('성공이든 실패든 작동!');
  });
// 성공
// 성공
// 성공
// 성공이든 실패든 작동!

⏱ setTimeout을 사용한 예제

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

const printAll = () => {
  printString('A')
    .then(() => {
      return printString('B');
    })
    .then(() => {
      return printString('C');
    });
};

printAll();
// A
// B
// C

---

🧽 Promise.all()

Promise.all()은 여러 개의 비동기 작업을 동시에 처리하고 싶을때 사용한다.

인자로는 배열을 받고, 해당 배열에 있는 모든 Promise에서
executor 내 작성했던 코드들이 정상적으로 처리가 되었다면,
결과를 새로운 배열에 저장하여 새로운 Promise를 반환해 준다.

Promise.all()을 사용하지 않았을 때

const promiseOne = () => new Promise((resolve, reject) => setTimeout(() => resolve('1초'), 1000));
const promiseTwo = () => new Promise((resolve, reject) => setTimeout(() => resolve('2초'), 2000));
const promiseThree = () => new Promise((resolve, reject) => setTimeout(() => resolve('3초'), 3000));

// 기존
const result = [];
promiseOne()
  .then(value => {
    result.push(value);
    return promiseTwo();
  })
  .then(value => {
    result.push(value);
    return promiseThree();
  })
  .then(value => {
    result.push(value);
   console.log(result);  
	 // ['1초', '2초', '3초']
  })
// 총 6초가 걸렸다.

Promise.all()을 사용했을 때

// promise.all
Promise.all([promiseOne(), promiseTwo(), promiseThree()])
  .then((value) => console.log(value))
  // ['1초', '2초', '3초']
  .catch((err) => console.log(err));
// 총 3초가 걸렸다.

Promise.all은 인자로 받는 배열에 있는 Promise 중
하나라도 에러가 발생하게 되면 나머지 Promise의 state와 상관없이 즉시 종료된다.

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

이렇게 Promise를 통해 비동기 코드의 순서를 제어할 수 있지만,
Callback 함수와 같이 코드가 길어질수록 복잡해지고
가독성이 낮아지는 Promise Hell이 발생한다는 단점이 있다.
이 단점을 해결하고 싶다면 Async / Await를 사용하면 된다.

---

✔️ Async / Await

JavaScript는 ES8에서 async / await키워드를 제공하였다.
이를 통해 복잡한 Promise 코드를 간결하게 작성할 수 있다.

🤔 사용법?
함수 앞에 async 키워드를 사용하고,
async 함수 내에서만 await 키워드를 사용하면 된다.

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

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

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

⏱ setTimeout을 사용한 예제

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();
// A
// B
// C

👉 지금 바로 동기와 비동기, 타이머 관련 API(setTimeout...) 보러가기
👉 callback, Promise, Async Await 차이점 한눈에 보고 싶다면?