자바스크립트는 단일 스레드에 동작한다.
즉, 자바스크립트는 한 번에 한가지 일만 할 수 있다.
위 싱글스레드를 특성을 극복하기위해 비동기적 프로그래밍이 필요한 것 이다.
JS Callback Hell을 벗어나고자 생긴 패턴
대기(Pending)
비동기 처리 로직이 아직 완료되지 않은 상태
Promise 객체 생성 단계 (new Promise)
이행(Fulfilled)
비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
인자 resolve를 실행
실패(Rejected)
비동기 처리가 실패하거나 오류가 발생한 상태
인자 reject를 실행
// 선언!
function test() {
return new Promise(function(resolve, reject) {
// 성공 로직 결과 반환
resolve("성공");
// 실패 로직 결과 반환
reject("실패");
});
}
// 실행!
test().then(function(data) {
console.log(data);
}).catch(function(err) {
console.error(err);
});
프로미스 로직안에 중첩 함수가 존재 할때는?
function test() {
return new Promise(function(resolve, reject) {
let result = 1;
const test2 = () => {
result++;
setTimeout(() => {
result++;
}, 1000);
}
test2();
resolve(result);
});
}
test().then(function(data) {
console.log(data);
}).catch(function(err) {
console.error(err);
});
then/catch 대신 가독성이 개선된 비동기 문법
async function test() {
await asyncTask();
}
await & async는 연속적 비동기 처리에 용이
// await & async 사용 전!
function test1() {
return new Promise(function(resolve, reject) {
resolve(1);
});
}
function test2(o) {
return new Promise(function(resolve, reject) {
if(o === 1){
resolve("성공");
}
});
}
test1().then(function(data1) {
if(data1.idx === 1){
test2(data1).then(function(data2) {
console.log(data2)
}).catch(function(err) {
console.error(err);
});
}
}).catch(function(err) {
console.error(err);
});
// ---------------------------------------------------
// await & async 사용 후!
async function test3() {
const result1 = await find1();
if (result1.idx === 1) {
const result2 = await find2();
}
}
Reference
https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/