📌 동기 / 비동기
자바스크립트의 경우에는 Single Thread 언어이기 때문에, 하나의 스레드에서 작업들이 순차적으로 수행된다. 동기적인 실행은 한 줄의 코드가 완료될 때까지 뒤의 코드가 실행되지 못하는 현상이 발생한다.
이때, setTimeout()와 같은 Web API로 비동기로 동작하게 할 수 있다. 비동기는 특정 코드의 처리가 끝나기 전에 다음 코드를 실행할 수 있는 것이다.
하지만, 만약 비동기적으로 동작하지만, 순서가 중요하다면 어떻게 해야할까?
비동기 처리는 결과를 예측할 수 없기 때문에 동기식의 처리가 필요하다.
이때, 콜백, promise, async/await를 통해 비동기 동작을 조작하면 된다. 즉 순차적으로 실행될 수 있는 비동기 처리를 하는 것이다.
📌콜백
test 함수가 실행 된 후 callback 함수가 실행된다.
const test = function (value, callback) {
console.log(value);
callback();
};
test('before', function () {
console.log('callback');
});
// before
// callback📌Promise
const promise = new Promise((resolve, reject) => ~~)
new Promise 생성자가 반환하는 객체는 state와 result를 프로퍼티를 갖는다.
📎resolve
resolve 는 비동기 처리 성공 시 호출
const pr = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('ok');
}, 2000);
});
pr.then((result) => {
console.log(result);
})
.catch((err) => {
console.log(err);
})
.finally(() => {
console.log('end');
});
📎reject & catch 에러 처리
reject는 비동기 처리 실패시 호출
- catch : reject인 경우에만 실행, catch로 구분해서 작성하는 것이 가독성 좋음.
- finally : resolve, reject 상관없이 이행이 완료되면 실행.
로딩 화면을 제거할 때 사용 가능.
const pr2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error('err......'));
}, 3000);
});
pr2
.then((result) => {
console.log(result);
})
.catch((err) => {
console.log(err);
})
.finally(() => {
console.log('end');
});
//결과
//Error: err......
//end - resolve이면 then으로 찾아간다.
- reject을 리턴받게 되면, catch를 찾아간다.
- catch 실행 후, 다음 then이 있다면 then을 실행한다.
📎promise chaining
프로미스는 여러 개의 프로미스를 연결하여 사용할 수 있다.
then() 메서드를 호출하고 나면 새로운 프로미스 객체가 반환한다.
<참고 예제 코드>
const f1 = (message) => {
console.log(message);
return new Promise((res, rej) => {
setTimeout(() => {
res('1번 주문');
}, 3000);
});
};
>
const f2 = (message) => {
console.log('2번', message); // 2번 1번 주문
return new Promise((res, rej) => {
setTimeout(() => {
res('2번 주문');
}, 1000);
});
};
>
const f3 = (message) => {
console.log('3번', message); //3번 2번 주문
return new Promise((res, rej) => {
setTimeout(() => {
res('3번 주문');
}, 2000);
});
};promise chaining
console.time('x');
f1()
.then((res) => f2(res))
.then((res) => f3(res))
.then((res) => console.log(res)) // 3번 주문
.catch(console.log)
.finally(() => {
console.log('end');
console.timeEnd('x');
// 순차적으로 실행되기 때문에 대략 6초가 걸린다.
});콜백 지옥
f1(function () {
f2(function () {
f3(function () {
console.log('end');
});
});
});📌async/await
예시 코드로 await 정리, MicroTakse Queue
비동기 처리 메서드가 프로미스 객체를 반환해야 await가 의도한 대로 동작한다.
하지만, 일반 함수를 리턴받아도 작동하기는 한다.
📎async
async를 쓸 경우 promise를 쓰지 않아도 자동적으로 promise를 반환한다.
promise를 반환하기 때문에 then을 사용할 수 있다.
async function fetchUser(){ return 'async!!' } const user = fetchUser() user.then(console.log) // Promise {<fulfilled> :"async!!"}async를 함수 앞에 쓰게 되면 자동적으로 프로미스를 반환한다.
📎await
비동기로 처리되는 부분 앞에 await를 붙여준다.
await 문의 반환값은 Promise 에서 fulfill된 값
Promise가 reject되면, await 문은 reject된 값을 throw
여러 await는 앞의 await이 끝나기 전까지 다음으로 넘어가지 않는다.
예를 들면 f1(1000), f2(2000), f3(1000)로 아래와 같이 실행한다면 총 4000ms가 소요된다.
이를 해결하기 위해 Promise.all과 같은 프로미스 메소드를 사용할 수 있다.(Promise 메소드 정리)
async function order() {
const result1 = await f1();
const result2 = await f2(result1);
const result3 = await f3(result2);
return result3;
}
order()
.then((v) => console.log(v));
.finally(() => console.log('end'))async는 await와 함께 쓸 때 비동기적으로 작동한다.
async function start() {
console.log(11);
const prom = new Promise((resolve) => {
console.log('promise1');
resolve('1');
});
const prom2 = new Promise((resolve) => {
console.log('promise2');
resolve('2');
});
let a = await prom;
let b = await prom2;
console.log(2);
}
start();
console.log(3);
//11
//promise1
//promise2
//3
//2async만 쓰인 아래 예시로 동기적으로 동작하는 것을 확인 할 수 있다.
(즉, async는 await과 같이 사용해야 비동기적으로 실행된다.)
async function start() {
console.log(11);
console.log(2);
}
start();
console.log(3);
//11
//2
//3📎try / catch 에러 처리
async는 try, catch를 통해 에러 처리가 가능하다.
async function order() {
try {
const result1 = await f1();
const result2 = await f2(result1);
const result3 = await f3(result2);
console.log(result3);
} catch (e) {
console.log(e);
}
console.log('end');
}
order();📌Promise 메소드
Promise.all
Promise.race
Promise 메소드 정리
