[Javascript] 비동기처리

---

 

#1. 비동기처리

1. 동기식, 비동기식의 개념

1) 동기식(Synchronous)

• 하나의 작업이 끝나면 다음 작업이 시작되는 방식이다. (순차 작업)
• 작업이 직렬형식으로 잔행되며, 정해진 순서에 맞게 실행한다. (동기식 처리)

※ 호이스팅: var, 함수 선언들이 자동적으로 제일 위로 올라가는 것

 

2) 비동기식(Asynchronous)

• 동기식이 순차적으로 작업을 수행한다면, 비동기식은 작업의 완료, 순서에 상관 없이 작업을 시작하는 방식이다. (비순차 작업) 
• 작업의 순서가 확실하지 않아 늦게 시작된 작업이 먼저 끝나는 경우도 있다. (비동기식 처리)

 

2. 콜백함수 사용

1) 비동기식 콜백

• 콜백함수로 비동기식 처리를 할 때는 setTimeout( ) 함수를 사용한다.

function example(func, time) {
  // 콜백함수로 파라미터 값 받는다
  setTimeout(func, time);
}
example(() => console.log("비동기식 콜백"), 2000);  // (2초뒤) 비동기식 콜백

 

2) 콜백 지옥(Callback Hell)

• 콜백함수에 콜백함수에 콜백함수에 콜백함수로 코딩하는 방식.
• 코드가 간결하지 못하고 가독성이 떨어진다는 단점이 있다.

// 콜백지옥으로 비동기식 처리

// 랜덤 숫자 함수 선언
function random(min, max) {
  return parseInt(Math.random() * (max - min + 1)) + min;
};

// 비동기식 처리
setTimeout(() => {
  console.log("홀수/짝수");  // 1초뒤 출력

  // 랜덤 숫자 함수 호출
  const number = random(1, 10);
  setTimeout(() => {
    console.log(number % 2 === 0 ? "짝수" : "홀수");  // 3초뒤 출력
  }, 3000)
}, 1000);

 

3. 프로미스(Promise)

• 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있게 해주는 오브젝트이다.
• 콜백지옥을 벗어나기 위한 방법 중 하나이다. (차선택으로, 좋은건 아니다)

then-catch-finally

• 예외처리의 try-catch와 비슷한 구문으로 생각하면 된다.
• 결과값이 맞으면 Promise 객체의 resolve를 then으로 호출하고, 아니면 reject를 catch로 호출한다.
  • reject를 then으로 호출하면 에러가 나기 때문에 catch로 처리한다. (resolve는 then, reject는 catch)
• finally는 try-catch와 같이 결과값에 상관없이 무조건 실행되는 구문이다. 생략가능

function random(min, max) {
  return parseInt(Math.random() * (max - min + 1)) + min;
};

// Promise를 가동하기 위해서는 Promise 객체를 리턴하는 함수가 필요함
function getOddEven() {
  // Promise 객체는 resolve 함수와 reject 함수를 파라미터로 받는 콜백이 필요함
  return new Promise(function(resolve, reject) {
    // 비동기 처리
    setTimeout(() => {
      console.log("홀수/짝수");
      const oddEven = random(1,10) 

      if(oddEven % 2 === 0) {

        // if문이 true면 resolve를 호출
        // 여러개의 정보를 보내야할 경우 JSON이 적절함
        resolve({msg1: "짝수", msg2: "짝홀짝홀"});
      } else {

        // if문이 false일 경우 reject 호출
        reject({msg1: "홀수", msg2: "홀짝홀짝"});
      }
    }, 3000);
  });
}

// Promise 객체를 리턴받기 위한 함수 호출
// Promise 클래스에 전달한 생성자 파라미터(콜백함수)가 실행됨
const myPromise = getOddEven();

myPromise
.then(({msg1, msg2}) => {  // resolve 값을 호출
  console.log(msg1, msg2);
}) 
.catch(({msg1, msg2}) => {  // reject 값을 호출
  console.log(msg1, msg2);
})
.finally(() => {  // 결과값에 상관 없이 무조건 실행되는 구문, 생략가능
  console.log("finally는 생략가능");
});

 

4. async & await

• Promise를 좀더 편하고 간결하게 사용하기 위해 나온 문법이다.
• Promise를 리턴하는 함수를 호출하기 위해 새로운 async 함수를 정의 해야 한다.
• 익명함수 전체를 괄호( )로 묶고, 그 뒤에 호출을 위한 ( )를 연달아 넣는 형식이 주로 쓰인다. (즉시 실행 함수 형태)
  • 현재 자바스크립트에서 가장 발전된 형태

1) async

• 함수 앞에 async만 붙이면 코드블럭이 자동으로 Promise로 바뀐다.
• 명시적으로 Promise를 리턴하는것도 가능하지만, 결과는 동일하다.

// 함수 앞에 async 선언
async function example() {
  return "Hi";
};

// async가 선언된 함수에서 then 사용
example().then(console.log);  // Hi 출력
console.log(example());  // Promise { 'Hi' } 출력

 

2) await

• await은 async가 정의된 함수안에서만 사용 가능하다. (일반 함수에서 사용하면 Syntax error)
• Promise가 처리될 때 까지 기다렸다가 그 후에 반환한다.

async function f() {
  let example = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("실행완료")
    }, 2000);
  })
  // Promise가 처리 될 때까지 기다린다.
  let wait = await example;
  console.log(wait);
}
f();

 

3) try-catch문 활용

function random(min, max) {
  return parseInt(Math.random() * (max - min + 1)) + min;
};

function getOddEven() {
  return new Promise(function(resolve, reject) {
    setTimeout(() => {
      console.log("홀수/짝수");
      const oddEven = random(1,10) 

      if(oddEven % 2 === 0) {
        resolve({msg1: "짝수", msg2: "짝홀짝홀"});
      } else {
        reject({msg1: "홀수", msg2: "홀짝홀짝"});
      }
    }, 1000);
  });
};

(async () => {  // async는 1회용 목적으로 만든다.
  let result = null;

  // Promisefmf 리턴 받는 과정을 await 키워드를 적용하여 처리, 예외처리도 가능하다.
  try {
  	// await은 async가 정의된 함수에서만 사용 가능
    result = await getOddEven();
    // getOddEven에서 resolve가 호출되면 전달한 파라미터 리턴
    console.log(result.msg1, result.msg2);
  } catch(err) {
  	// getOddEven에서 reject가 호출되면 전달한 파라미터는 예외객체 (err)로 전달
    console.log(err.msg1, err.msg2);
  }
// 익명함수 호출을 위한 마지막 괄호()
}) ();