[JavaScript] async함수 활용 팁

프로젝트를 진행하다보면 GET이나 POST 메소드로 데이터를 주고받을때가 많다. (사실 이게 다인듯함)

 

데이터를 주고받을때는 일정 시간이 소요되기 때문에 대부분 비동기 프로그래밍으로 처리한다.

 

async를 사용하여 함수를 작성하는데 이때 사용될수있는 자그마하지만 중요한 팁이다. 바로 코드를 확인해보자.

 

async getUserData(){
    try{
    	const res = await this._api.getUserData();
    }
    catch(e){
    	console.log(e);
    }
}

위와같이 유저데이터를 가져오는 함수가 있다고 가정하자.

별로 문제가 될게 없어보이는 함수이지만, 한가지 놓친 부분이있다.

 

비동기 함수는 처리가 언제 끝나는지 알수없다. 만약 저 getUserData라는 함수가 아직 실행중일때

다시 getUserData함수를 호출하면 어떻게될까? 분명 원치않는 데이터를 받게될것이다.

그렇기 때문에 함수가 실행중일때 다시 호출되지 않도록 안전장치를 하나 마련해주면 될것이다. 

코드는 다음과 같다.

//함수가 실행중인것을 알려주기위한 변수선언
let isRequestingUserData:boolean = false;

async getUserData(){
    // 함수가 이미 실행중이면 함수를 실행시키지않는다.
    if(isRequestingUserData) return;
    
    // 함수가 실행중이면 true값으로 변경한다.
    isRequestingUserData = true;
    
    try{
    	const res = await this._api.getUserData();
    }
    catch(e){
    	console.log(e);
    }
    
    // 함수가 종료되면 false값으로 변경한다.
    isRequestingUserData = false;
}

isRequestingUserData 라는 하나의 flag변수를 선언해주고 함수가 실행중인데 함수가 호출됐을경우

isRequestingUserData 변수로 함수의 실행여부를 판단하고 함수를 실행시키지않는다.

 

이런식으로 코드를 작성한다면 좀더 안정적으로 코드가 작동하는것같다.