[Deep JavaScript] 비동기

Dae-Hee·2022년 3월 6일
0

Deep JavaScript Study

목록 보기
9/12
post-thumbnail

자바스크립트는 단일 스레드에 동작한다.
즉, 자바스크립트는 한 번에 한가지 일만 할 수 있다.
위 싱글스레드를 특성을 극복하기위해 비동기적 프로그래밍이 필요한 것 이다.

▪︎ JS 비동기의 종류

  1. Callback Function
  2. Promise
  3. await / asyns

▪︎ Promise

JS Callback Hell을 벗어나고자 생긴 패턴

Promise의 상태

  1. 대기(Pending)
    비동기 처리 로직이 아직 완료되지 않은 상태
    Promise 객체 생성 단계 (new Promise)

  2. 이행(Fulfilled)
    비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
    인자 resolve를 실행

  3. 실패(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);
});
  • 비동기 로직이 포함된 함수는 프로미스 객체를 반환 해줘야한다.
  • 위 로직안에서 성공에 대한 결과값을 반환하려면 resolve 콜백 함수에 파라미터를 작성한다.
  • 위와 반대로 실패에 대한 결과값을 반환하려면 reject 콜백 함수에 파라미터를 작성한다.
  • 비동기 로직이 포함된 함수의 결과값을 받기위해서는 then/catch 메서드로 호출해야 한다.

프로미스 로직안에 중첩 함수가 존재 할때는?

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);
});
  • 내부 함수와 관계없이 결과값은 setTimeout 실행 이전인 '2' 출력
  • 결과값과 별개로 어플리케이션은 1초간 블락 상태가 된다.
  • 결국 resolve를 적잘한 위치에 작성을 하면 원하는 값을 반환할 수 있다.

▪︎ await & async

then/catch 대신 가독성이 개선된 비동기 문법 
async function test() {
  await asyncTask();
}
  • 함수 앞에 async라는 예약어를 붙인다.
  • 비동기 처리 코드 앞에 await를 붙인다.
  • 비동기 처리가 메서드가 꼭 프로미스 객체를 반환해야 await가 정상 동작된다.

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();
  }
}

▪︎ 마무리 정리

  • 비동기 패턴은 가독성 문제를 극복하기 위해 개발/적용!
  • Promise는 비동기 함수를 정의/작성 할때 사용!
  • await & async는 비동기 함수를 호출/사용 할때 사용!
  • 흔히 HTTP 통신(비동기)에 사용되는 axios, fetch는 Promise를 반환 하는것!

Reference

https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

0개의 댓글