[릴레이 블로깅 챌린지]

Promise

new Promise

Promise는 class이기 때문에 new 키워드를 통해 Promise 객체를 생성,
비동기 처리를 수행할 콜백 함수(executor)를 인수로 전달받는데 이 콜백 함수는 resolve, reject 함수를 인수로 전달

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

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

내부 프로퍼티

Promise 객체는 state, result 내부 프로퍼티를 가짐. 하지만 직접 접근할 수 없고 .then, .catch, .finally의 메서드를 사용해야 접근이 가능

State

기본 상태는 pending(대기). 성공적으로 작동했다면 fulfilled(이행), 에러가 발생했다면 rejected(거부).

Result

처음은 undefined. 성공적으로 작동하여 resolve가 호출되면 value, 에러가 발생하여 reject가 호출되면 error.

---

Then

정상적으로 처리가 되었다면 resolve 함수를 호출하고 .then 메서드로 접근. 또한 .then 안에서 리턴한 값이 Promise면 Promise의 내부 프로퍼티 result를 다음 .then 의 콜백 함수의 인자로 받아오고, Promise가 아니라면 리턴한 값을 .then 의 콜백 함수의 인자로 받아옴.

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

promise.then(value => {
	console.log(value);
	// "성공"
})

Catch

에러가 발생했을 경우에는 reject 함수를 호출하고 .catch 메서드로 접근.

let promise = new Promise(function(resolve, reject) {
	reject(new Error("에러"))
});

promise.catch(error => {
	console.log(error);
	// Error: 에러
})

Finally

코드들의 정상 처리 여부와 상관없이 .finally 메서드로 접근.

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

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

---

Promise.all()

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

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

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

---

Async/Await

async/await을 통해 복잡한 Promise 코드를 간결하게 작성 가능.
함수 앞에 async 키워드를 사용하고 async 함수 내에서만 await 키워드를 사용.

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

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

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