[JavaScript] Promise, Async/Await

1. Promise

비동기로 작동하는 코드를 제어할 수 있는 방법이다. Promise는 class이기 때문에 new키워드를 통해서 객체를 생성한다. Promise는 비동기 처리를 수행할 콜백 함수(executor)를 인수로 전달받는데 이 콜백 함수는 resolve, reject 함수를 인수로 전달받는다. Promise안의 파라미터를 꼭 resolve, reject로 사용해야 되는것은 아니지만 보통 관습적으로 resolve, reject를 사용한다.

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

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

• Promise 에서 resolve가 출력이되면 성공, reject가 출력이 되면 실패로 생각해도 좋을듯 하다. 어떤게 출력되는것인지는 사용하는 사람이 지정 해 주면된다.

Promise에서 resolve가 출력이 되면 .then메서드로 접근할 수 있다. 반대로 resolve가 출력되면 .catch메서드로 접근이 가능하다.

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

promise.then(value => {
	console.log(value);
	// "성공"
})
.then(() => {
  console.log('성공했습니다.');
})

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

promise.catch(error => {
	console.log(error);
	// Error: 에러
})
.catch(() => {
  console.log('실패했습니다')
})

• resolve와 reject에 값을 넣어주면 그 값이 들어간 .then이나 .catch가 출력 된다.

2. Async/Await

ES8에서 새로나온 키워드인데 이를 통해 복잡한 Promise코드를 간결하게 작성할 수 있다. 함수 앞에 async키워드를 적어주고 그 함수 내에서만await를 사용하면 await 키워드가 작성된 코드가 동작하고 나서 다음순서의 코드가 동작하게 된다.

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

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

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

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

const a = async () => {
    await console.log('성공1')
    await console.log('성공2')
    await console.log('성공3')
}

a()

• a()를 실행하면 성공1, 성공2, 성공3이 순서대로 실행되는것을 볼 수 있다.