비동기처리[js지식]

BBAKJUN·2021년 12월 9일
0

JavaScript

목록 보기
2/2
post-thumbnail

JavaScript에서의 비동기 처리에대해서 알아보겠다.!!

JavaScript.isSyncrouns??

자바스크립트는 동기적인 언어이다.
blocking이며 single-Thread한 언어이다.
그러므로 한번에 하나의 작업만 할수있다는것을 말하는데 모든면에서 이런한 특성을 띄고있지는 않다.
만약 대용량 데이터베이스를 요청하려면 어떻게해야할까
동기적으로 처리한다면....? 더더욱 RDBMS이면 서버가 터지든 매우 오래걸리든 뭐든 큰일일거다..?

자바스크립트 진영에서는 이런 이슈를 해결하기위해 비동기프로그래밍이 가능토록했다!

자바스크립트의 비동기 처리

만약 작업을 동기처리하면 하나의작업이 끝난후 그작업을 실행하고 또 그다음 작업을 실행할것이다.

하지만 이를 비동기처리하면 작업의 흐름이 멈추지않고 동시에 여러가지 작업을 할수있으며 도중에 다른 함수도 호출할수있다.

비동기적를 사용하는 예시

  • Web API 요청 : 서버쪽에서 데이터를 받아올경우
  • 파일 읽기 : 서버에서 파일을 읽어올 경우
  • 암호화/복호화 : 바로 처리되지않고 시간이 걸릴 경우
  • 작업예약 : setTimeout을 사용하여 비동기처리할 경우

비동기처리의 단점

콜백지옥

콜백함수는 함수안에서 함수를 어떤 시점에서 호출되는 함수를 말한다
콜백함수가 동기처리에 가장 간단한 해결책이된다

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를 사용하여 해결가능하다

Promise

ES6에 도입된 기능이다

const promise = new Promise((resolve, reject)) => {
  // executor 실행자, 함수 실행
}

resolve는 new Promise가 만들어질때 자동으로 실행되고
resolve, reject는 자바스크립트가 자체제공하는 콜백이다.

  • resolve : 작업이 성공적으로 끝난경우 그결과를 value와 함께 호출
  • reject : 에러 발생시 에러 객체를 표현하는 error와 함께 호출
  • executor : 자동으로 실행되는데 함수를 처리한다. 처리후 성공여부에 따라 resolve, reject를 호출한다

Promise의 3-state

  • Pending : 비동기처리 로직이 완료되지 않은 상태
  • Fulfilled : 비동기처리 로직이 완료되어 프로미스가 결과 값을 반환한 상태
  • Rejected : 비동기 처리가 실패하거나 오류발생한 상태

async / await

async/awaitES8문법으로 가장 최근에 나왔다.
콜백함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드로 작성할수 있게한다.

async/await는 Promise를 기반으로 하고
모든 async함수는 Promise를 리턴하고, 모든 await함수는 일반적으로 Promise가 된다

const getUser = async() => {
  await function();
}

함수앞에 async를 선언해야만 await을 사용가능하다

async

async는 function앞에 위치하며 function앞에 붙이면 해당 함수는 프로미스를 반환한다.

await

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)
  }
}
profile
함께 일하고 싶은 환경을 만들어가는 프론트엔드 개발자 박준형입니다.

0개의 댓글