javascript에서 비동기를 공부하기 전에 헷갈리는 sync, async, blocking, non-blocking
에 대해 간단하게 정리하고 시작한다
1. Asynchronous ?
Synchronous == Blocking ? Asynchronous == Non-blocking?
동기와 비동기, blocking과 non-blocking은 각각 관심을 갖는 부분이 다르다
2. JavaScript에서 Async
자바 스크립트에서 비동기화를 처리하는 방법에는 여러 가지가 있고, 아래에서 callback, promise, await를 차례대로 살펴본다
setTimeout(function, 시간)
과 같은 구조를 가지고, 시간/1000
초 후에 function을 수행한다 let data=[1,2,3];
function getData() {
setTimeout( () => {
data.push(4);
data.push(5);
console.log("done!");
printData();
}, 1000);
}
function printData() {
data.forEach(el => console.log(el));
}
getData();
printData();
setTimeout
안에 있는 4,5를 push
하는 과정이 일어나기 전에 printDate()가 먼저 수행되어 1,2,3
이 출력되고 그 후에 4,5
의 push가 일어남을 확인할 수 있다 callback함수는 간단하게 다른 함수에 매개변수로 넘겨준 함수를 말한다. 매개변수로 넘겨받은 함수는 일단 넘겨받고, 때가 되면 나중에 호출 (called back)한다는 것이 콜백함수의 개념이다
(참고로 JavaScript의 함수는 일급 객체로, 매개변수로 전달될 수 있다는 특징이 있다)
(4,5를 push한 후, data를 print하는 것)
콜백 함수에 담아 인자로 던진다 let data=[1,2,3];
function getData( callback ) {
setTimeout( () => {
data.push(4);
data.push(5);
console.log("done!");
callback ();
}, 1000);
}
function printData() {
data.forEach(el => console.log(el));
}
getData(printData);
let data=[1,2,3];
function getData() {
/*
비동기 작업이 성공하면 resolve
비동기 작업이 실패하면 reject
*/
return new Promise( (resolve, reject) => {
setTimeout( () => {
data.push(4);
data.push(5);
console.log("Done!");
const error=false;
if (!error) resolve();
else reject('Error!');
}, 1000);
});
}
function printData() {
data.forEach(el => console.log(el));
}
getData()
.then(printData)
.catch(e=>console.log(e));
.then
의 호출을 await
로, function
앞에 async
를 붙여 await
를 사용할 수 있도록 한다 let data=[1,2,3];
function getData() {
return new Promise( (resolve, reject) => {
setTimeout( () => {
data.push(4);
data.push(5);
console.log("Done!");
const error=false;
if (!error) resolve();
else reject('Error!');
}, 1000);
});
}
function printData() {
data.forEach(el => console.log(el));
}
doIt();
async function doIt () {
await getData(); //promise 기반 비동기 function -> 이게 끝나면 다음 라인 수행
printData();
}
try...catch
를 사용할 수도 있다 async function doIt () {
try {
await getData();
printData();
} catch (e) {
console.log(e);
}
}