async, await + setTimeout 동시에 사용하기

개발을 하다보면, 순서대로 코드를 실행시켜야 할 상황이 있다.

 

나 같은 경우에는, Firebase에 데이터를 업로드하는 과정에서 데이터를 업로드 한 뒤, 해당 데이터를 제외한 나머지를 삭제하기 위해 순서를 지켜야 했음.

 

하지만, 다음과 같이 코딩을 해보면 순서대로 실행되지 않는 머리아픈 상황이 발생한다.

const updateFiles = async () => {
    // #1. 파일 업데이트 코드
    
    // #2. 딜레이 코드
    setTimeout(()=>{
    	console.log("Delay~");
    }, 3_000);
	
    // #3. 파일 삭제 코드
};

 

실행결과, #1 코드와 #3 코드가 순차적으로 실행된 뒤, #2 코드가 실행된다.

 

✏️ setTimeout은 Promise를 반환하지 않기 때문이다.

따라서, 기능은 동일하지만 Promise를 반환하는 함수를 만들어서, 사용하면 된다!

const promiseDelay = (delay: number): Promise<undefined> => {
	return new Promise((resolve) => setTimeout(resolve, delay));
}

const fetchData = async () => {
    // #1. 파일 업데이트 코드
	
    // #2. 딜레이 코드
    await promiseDelay(3_000)	    
	
    // #3. 파일 삭제 코드
};

 

 

참고

- 숫자를 입력할때, JavaScript 안에서는 _를 마음대로 입력해도 됩니다.

ex) 1000_0000 (가능), 10_000_000 (가능)