- 동기 & 비동기란
먼저 이해를 돕기 위해 아주 쉽게!! 동기와 비동기에 대해 설명드리겠습니다.
동기는 동시에 실행된다는 의미입니다. 비동기는 말 그대로 동시에 실행이 되지 않는다는 말입니다.
- async & await 사용법
async는 asynchronous의 약어로 비동기란 뜻이며 await은 (~을) 기다리다 라는 뜻입니다.
먼저 비동기 처리 함수를 만들어줍니다. 아래처럼 화살표 함수, 일반 함수에 따라서 위치가 변합니다.
async asyncAPI function(){ //일반 함수의 사용법
}
asyncAPI = async () =>{ //화살표 함수의 사용법
}
async await 도 es6이기 때문에 es6문법인 애로우 함수로 예를 들어보겠습니다.
let num =1;
function add(){
num+=1;
return num;
}
asyncAPI = async () =>{
await console.log(num);
await console.log(add());
await console.log(num+1);
}제 의도는 1, 2, 3 이 순서대로 호출되길 바라며 만들었습니다. 만약 add 함수가 정말 긴 코드일 때 동기적으로 실행될
경우 3번째 콘솔이 먼저 실행되서 1, 2, 2 가 콘솔에 찍힐 것입니다.
let num = 1;
asyncAPI = async () =>{
console.log(num);
let add = await db.getconnect().query(String)[0];//DB값을 호출한다는 예시 코드
num += add; //add 값이 1이라면
console.log(num);
console.log(num+1);
}위의 소스를 통해 왜 동기여야 되는지 간단한 동기와 비동기의 이유가 보일 것입니다. 순서상 꼭 실행 순서가 순서대로 진행되야하는 코드라면 비동기는 필수적으로 적용되어야 합니다. DB를 호출 중에 다음 코드를 실행해버려서 없는 값에 계산을 할 수는 없으니까요.
다른 발상에서 보시는 분들은 setTimeout을 생각해서 이런 식으로 사용하려는 분도 있을 수 있습니다.
asyncAPI = async () =>{
await setTimeout( ()=>{ console.log( 1); } , 2000 );
console.log( 2) ;
}그럼 1 다음 2가 console.log에 나오길 바랄 텐데 setTimeout은 내부적으로 Promise를 반환하지 않기 때문에 원하는 동작은 하지 않을 것입니다.
여기서 promise란 async에서 사용되는 비동기 처리를 위한 javascript 함수를 의미합니다.
async는 promise를 반환합니다. 그래서 promise에서 then을 사용해도 비동기적으로 처리 가능합니다.
그럼 promise 쓰지 왜 굳이 async await을 쓰는 것이냐 물으실 수 있습니다. promise then 보다 async await이 쓰기 간결합니다.
promise와 then에 관해서도 공부해 보시기 바라며 javascript의 async await이었습니다. 성실한 코딩 하세요.
