Javascript 동기식/비동기식 처리

Javascript는 싱글 스레드 언어로 동기적 언어이고 브라우저 엔진에서 작동할 때 비동기적으로 처리된다. 

 

동기 : 요청 처리 완료 후 다음 요청을 처리 하는 방식

비동기 : 하나의 요청 처리가 완료되기 이전에 다음 요청을 처리하는 방식

 

callback 

콜백 함수는 다른 함수의 인자로 사용되거나 이벤트에 의해 호출되어지는 함수를 말한다.

함수의 요청 값을 콜백 하여 다음 함수에서 사용할 수 있는 것을 콜백이라고 한다.

const arr = [0,1,2,3,4,5];

(arr.forEach(function(element){
//function이 for Each의 인자로 활용되고 있음
    console.log(element);
})();

 

setTimeOut

호출될 콜백 함수와 지연 시간 두가지 인자를 설정하여 사용한다.

setTimeout(function() {
 console.log('5 sec wait message');
}, 5000);

 

Promise 함수

promise 함수는 콜백의 문제점을 해결하기 위해 나온 개념이다.

콜백 내의 프로미스 객체를 활용해 성공, 실패, 오류 등 다양한 상황에 따른 후속처리를 가능하도록 한다.

function test(){
resolve(); // second, 밑 함수로 넘어감
console.log("hi"); // first
}

test().then(function({
console.log("done"); // resolve(); 성공시
}, .then(function(){
console.log("failed"); //resolve(); 실패시
})

 

await&async

비동기 함수 앞에는 async를 붙이고 동기 함수 앞에는 await을 붙이면 된다.

단 async의 뒤에는 반드시 promise를 반환해야 하며 await은 async 함수 안에서만 사용할 수 있다.

const funcPromise = async () => {
  return 'hello!';
};
funcPromise().then((result) => {
// then() 성공, catch() 실패 제어
  console.log(result); // 'hello'
});

 

await 함수의 사용

await 함수는 async 함수 내에서만 사용 가능하다.

const msg = async function() {
  const msg = await thenFunc();
  console.log('Message:', msg);
}

 

try/catch 사용한 예제

function yayOrNay() {
  return new Promise((resolve, reject) => {
    const val = Math.round(Math.random() * 1); // 0 or 1, at random

    val ? resolve('Hello!') : reject('Nope');
  });
}

async function msg() {
  try {
    const msg = await yayOrNay();
    console.log(msg);
  } catch(err) {
    console.log(err);
  }
}