비동기처리란?
특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 JavaScript의 특성이다.
동기처리를 한다면 요청을 모두 기다린 뒤 넘어가야 해서 로딩이 매우 오래 걸릴 것이다.
하지만 특정 코드의 연산이 끝나기 전 다음 코드에서 앞 코드의 값을 원한다면 어떻게 될까?
다음 코드는 앞 코드의 값을 undefined로 받을 것이다.
이를 처리하기 위해서는 3가지 방법이 있다.
1. callback 함수
2. promise
3. async / await
callback 함수
콜백 함수 : 인자(매개변수)로 대입되는 함수
즉, 다른 함수가 실행을 끝낸 뒤 실행되는 함수
<콜백 함수 사용 예시>
function mainfunc (param1, param2, callback) {
callback(result);
};
function callbackFunc(param) {
console.log("콜백 함수 실행");
};
mainfunc(1, 2, callbackFunc);하지만 함수의 매개변수로 콜백함수가 넘겨지기 때문에 여러 개의 콜백 함수가 반복된다면,
콜백 지옥으로 가독성이 낮아진다.
Promise
Promise : 비동기 처리를 할 수 있는 객체
비동기 작업이 맞이할 미래의 성공 또는 실패를 분리하여 결과 값을 반환
Promise의 상태
• Pending(대기) : Promise를 수행 중인 상태
• Fulfilled(이행) : Promise가 Resolve 된 상태 (성공)
• Rejected(거부) : Promise가 지켜지지 못한 상태. Reject 된 상태 (실패)
• Settled : fulfilled 혹은 rejected로 결론이 난 상태
<Promise 함수 정의>
function promise1(flag) {
return new Promise(function (resolve, reject) {
if (flag) {
resolve('상태가 fulfilled이므로 then으로 연결. flag == true')
} else {
reject('상태가 reject이므로 catch로 연결. flag == false')
}
})
}<Promise 함수 호출>
promise1(true)
.then(function (result) {
console.log(result);
})
.catch(function (err) {
console.log(err);
})Promise를 사용한다면 then 메서드를 연속으로 사용해 순차적인 작업이 가능해 콜백 지옥에서 탈출할 수 있다. 또한 마지막 catch 구문에서 한 번에 에러 처리가 가능하다는 장점이 있다.
하지만 Promise도 chaining을 하다보면 then이 꼬리를 물게 되며 가독성이 떨어질 수 있다.
async / await
async / await : Promise를 쉽게 쓰기 위한 문법이다.
- async : 함수 앞에 붙어 Promise를 반환한다.
- await : Promise가 처리 될 때까지 기다린 후 결과를 반환한다.
<async/await 사용 예시 1>
async function f1() { // 비동기 실행되는 게 있음을 알림
return 1;
}
async function f2() {
return Promise.resolve(1); // 명시적 프로미스 반환
}<async/await 사용 예시 2>
function fetchItems() {
return new Promise(function(resolve, reject) {
var items = [1,2,3];
resolve(items)
});
}
async function logItems() {
var resultItems = await fetchItems(); // 기다림
console.log(resultItems); // [1,2,3]
}
Sejong Univ.