동기(synchronous) 비동기(asynchronous)
동기와 비동기를 나누는 가장 큰 차이점은 실행순서이다.
동기식은 요청을 보낸 후 해당하는 응답을 받아야지만 다음으로 넘어갈 수 있는 실행방식이며, 반대로 비동기식은 요청을 보낸 후 응답과 관계없이 다음 동작을 실행 할 수 있는 실행방식이다.
비동식 방식을 처리하는 방법들
callback(), promise, async/await 사용하는 이유는 비동기적 방식을 처리하는 방법들을 사용하지 않는다면 콜백 함수의 과정이 끝나기 전에 다음 프로세스로 진행될 수 있기때문이다.
예를 들어 동영상 파일을 불러와 웹에 띄어줄려고 하는데 여기서 비디오 파일을 불러오는 작업이 완료되지 않았는데 다음 프로세스로 넘어가 화면에 동영상 파일을 띄어주려한다면,
비동기식 처리 방식을 사용하지 않았을때, 비디오 파일을 불러오는중.. -> 다음 프로세스 실행 -> 비디오 출력 -> 에러
비동기식 처리 방식을 사용했을 때, 비디오파일을 불러오는중.. -> 비디오 파일을 모두다 불러옴 -> 다음 프로세스 실행 -> 비디오 정상 출력
Promise
Promise를 정의할때에 인자값으로 resolve,reject 전달한다.
안에서 resolve는 값을 전달할때에, reject는 에러를 전달할 때에 사용되며, promise 수행은 promise 객체를 담은 변수에 then을 사용하여 전달 받은 data는 콘솔창에 출력하여 확인해볼 수 있다. then은 작업수행이 완료되면 실행하게 된다.
const promiseData = new Promise((req, rej) => {
res("sending data");
});
promiseData.then(data => {
console.log(data);
});promise 에러는 앞서 설명했던것 처럼 reject 반환을 통해 사용할 수 있다.
const promiseFun = () => {
const promiseData = new Promise((res,rej) => {
const num = 2;
if(num === 2)
res.("sending data");
else
rej("error Fun1");
});
return promiseData;
};
const promiseFun2 = () => {
const promiseData = new Promise((res,rej) => {
const num = 3;
if(num === 3)
res.("sending data2");
else
rej("error Fun2");
});
return promiseData;
};
promiseFun()
.then(data => {
console.log(data);
return promiseFun2();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.log(error);
});위와 같이 조건문에 의해 에러를 반환해야 할 때에 return 값으로 reject를 반환 하면 된다. 그리고 promise 수행 부분에 catch를 사용하면 첫번째 then()에서 에러가 났을 시 그 이후 then은 실행되지 않고 catch 문으로 넘어가서 error문을 반환하게 된다.
async / await
async/await는 promise 객체를 반환한다. 따라서 promise 객체에서 사용했던 then을 사용할 수 있다.
const asyncFun = async () => {
return "This is async test";
};
async asyncFun() => {
return "This is async test";
}; 함수 선언은 위와 같이 두가지 종류로 선언할 수 있다.
async는 함수를 promise 로 return 하는 함수로 만든다.
앞서 promise 에서 값을 전달 할때에는 resolve를 통해 전달 했었다. 반면async/await는 return 으로 값을 전달한다.
const asyncFun = async () => {
return "This is async return data";
};
asyncFun.then(data => {
console.log(data);
});await는 비동기 처리 방식을 위한 실행 완료까지 기다리게 하는 함수이다.
const delayFun = sec => {
const promiseData = new Promise((res,rej) => {
setTilmeout(() => {
res(console.log("Start in" + sec + "sec." );
}, sec * 1000);
});
return promiseData;
};
const asyncFun = async () => {
delayFun(3);
return "async.";
};
asyncFun().then(result => {
console.log(result);
});await 사용전 결과 값 :
async.
Start in 3 sec.
const delayFun = sec => {
const promiseData = new Promise((res,rej) => {
setTilmeout(() => {
res(console.log("Start in" + sec + "sec." );
}, sec * 1000);
});
return promiseData;
};
const asyncFun = async () => {
await delayFun(3);
return "async.";
};
asyncFun().then(result => {
console.log(result);
});await 사용후 결과 값 :
Start in 3 sec.
async.
