JavaScript에서의 비동기 처리에대해서 알아보겠다.!!
자바스크립트는 동기적인 언어이다.
blocking이며 single-Thread한 언어이다.
그러므로 한번에 하나의 작업만 할수있다는것을 말하는데 모든면에서 이런한 특성을 띄고있지는 않다.
만약 대용량 데이터베이스를 요청하려면 어떻게해야할까
동기적으로 처리한다면....? 더더욱 RDBMS이면 서버가 터지든 매우 오래걸리든 뭐든 큰일일거다..?
자바스크립트 진영에서는 이런 이슈를 해결하기위해 비동기프로그래밍이 가능토록했다!
만약 작업을 동기처리하면 하나의작업이 끝난후 그작업을 실행하고 또 그다음 작업을 실행할것이다.
하지만 이를 비동기처리하면 작업의 흐름이 멈추지않고 동시에 여러가지 작업을 할수있으며 도중에 다른 함수도 호출할수있다.
콜백함수는 함수안에서 함수를 어떤 시점에서 호출되는 함수를 말한다
콜백함수가 동기처리에 가장 간단한 해결책이된다
document.querySelector('click',function ());
여기서 클릭이벤트시 호출되는 함수가 콜백함수라고 한다
콜백지옥은 비동기 처리를 위해 콜백함수가 연속해서 사용할때 일어나는 문제를 뜻한다
위에서는 아주 간단해보이지만
getUserName(function(result_first){
getTitleByName(function(result_second){
getPostNoByTitle(function(result_third){
console.log(`result : ${result_first}`)
},catchCallback)
},catchCallback)
},catchCallback)
이렇게 되면 가독성도 떨어지게되는데 3개라서 다행이지 3개로도 끝나지않는 경우 매우 난감하다
이런경우 Promise와 Async/Await를 사용하여 해결가능하다
ES6에 도입된 기능이다
const promise = new Promise((resolve, reject)) => {
// executor 실행자, 함수 실행
}
resolve는 new Promise가 만들어질때 자동으로 실행되고
resolve, reject는 자바스크립트가 자체제공하는 콜백이다.
async/await은 ES8문법으로 가장 최근에 나왔다.
콜백함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드로 작성할수 있게한다.
async/await는 Promise를 기반으로 하고
모든 async함수는 Promise를 리턴하고, 모든 await함수는 일반적으로 Promise가 된다
const getUser = async() => {
await function();
}
함수앞에 async를 선언해야만 await을 사용가능하다
async는 function앞에 위치하며 function앞에 붙이면 해당 함수는 프로미스를 반환한다.
await를 만나면 프로미스가 처리될때까지 기다린다. 그이후 변환된다. async함수가 아닌 일반적인 함수에선 사용할수없다.
function eatLunch(ms){
return new Promise((resolve) => setTimeout(resolve,ms));
}
async function goResturant() {
console,log('점심은 못참지');
await eatLunch(1000); // 1초 쉰다
console.log('1초만에 다먹었다');
}
goResturant();
async/await에서의 예외처리는 try-catch를 사용한다
async function getPost() {
try {
const user = await fetchUser();
if(user.name === '박준형'){
const post = await fetchPost();
console.log(post.content)
}
} catch(error) {
console.log(error)
}
}