[동기&비동기] async await

[동기 & 비동기 개념]

동기와 비동기는요청된 작업을 순차적으로 처리하느냐 동시에 처리하느냐에 대한 차이다.

 

예시) 실행해야 하는 작업이 3개가 있다(a, b, c). a는 작업을 완료하는데 10초가 걸린다. b는 작업완료까지 7초가 걸린다. c는 실행 후 완료까지 5초가 걸린다.

 

동기(Synchronous): 작업에 대해 완료 여부를 따져 순서대로 처리(a, b, c 작업이 완료되기 까지 22초 소요)

비동기(Asynchronous): 작업에 대해 완료 여부를 따지지 않고 처리(a, b, c 작업이 완료되기까지 10초 소요)

 

[동기 & 비동기 코드]

동기처리와 비동기 처리를 코드로 알아본다.

 

jsfiddle을 통해 작성한 코드는 다음과 같다.

// 1. start 출력
console.log('start');

// 2. 2초 후 setTimeout 출력
setTimeout(function() {
	console.log('setTimeout')
}, 2000);

// 3. end 출력
console.log('end');

 

일반적으로 생각했을때 출력되는 순서는 1 > 2 > 3 으로 생각된다. 하지만 실제로 출력해보면 1 > 3 > 2 순으로 출력 된다. 이유는 SetTimeout 함수가 비동기 함수이기 때문이다.

 

 

그렇다면 순서에 맞춰서 진행하기 위해서는 어떻게 해야할까? 비동기를 동기로 바꾸어 주면 된다. 비동기를 동기로 바꾸는 방법은 여러가지가 있다. 그중 콜백함수와 async&await가 가장 많이 사용된다.

 

1. 콜백함수 사용(일반): 두개의 작업을 함수로 정의한다(method1, method2). method1은 callback을 인자로 받는다. method1함수 실행 시 callback자리에 method2를 입력하면 method1이 실행된 후 method2가 실행된다.

method1(method2);


function method1(callback) {
  setTimeout(function() {
  	console.log('method1');
    if (callback) {
    	callback();
    }
  }, 2000);
}


function method2() {  
    console.log('method2')  
}

 

2. async & await: method1과 method2를 정의한다. method1에는 return으로 new Promise 를 명시한다. 그리고 resolve(함수실행시 성공)와 reject(함수 실행시 오류)를 인자로 받는다. 그리고 executeMethods라는 새로운 함수를 만들고 앞에 async를 붙여준다. 그리고 method1 앞에는 await를 붙여준다. method1이 실행완료 될때까지 기다린다는 의미다. 함수 내부적으로는 method1이 실행 완료되면(console.log('method1')출력) resolve가 실행되는 것이고, resolve는 method2가 된다.

function method1() {
  return new Promise((resolve, reject) => {
    setTimeout(function() {
      console.log('method1');
      resolve(); // 2초 후 작업 완료
    }, 2000);
  });
}


function method2() {
  console.log('method2');
}

async function executeMethods() {
  await method1(); // method1이 완료될 때까지 기다림
  method2();       // method1이 끝난 후 method2 실행
}

executeMethods();

 

[결론]

aysnc & await를 하게 되면 callback처럼 쓰는것 보다 가독성이 좋다. 이유는 안으로 들여쓰기가 없기 때문이다. 이런 비동기, 동기 처리는 api fetch, jquery의 ajax에서 많이 사용된다. 조금 헷갈리는 개념이지만 잘 알아두길 바란다.