[setTimeout + async + await ] setTimeout은 프로미스를 반환하지 않아

 

 

개발을 진행하다가 setTimeout을 사용할 일이 생겼다.

 

하나의 서비스가 돌아가고 결과를 표시하는 과정이었는데,

데이터 자동 추출 프로그램인 외부 프로그램을 돌려서 응답을 기다려야 했기에(최대 예상 시간 2분)

최대 2분동안 데이터를 받아올 때까지 기다려야 했다. 그전에 받아오면 바로 표시한다.

 

따라서 javascript내에 setTimeout을 사용해 지연과 요청을 반복하여 2분동안 데이터를 받아올 수있는지 확인해보기로했다.

 

아이디어까지는 문제가 되지 않았다.

하지만 구현에서 분명 비동기임을 인식하고 지연과 axios요청에 async과 await를 제대로 붙였음에도

동기적으로 실행되지 않더라.....

 

 

 

 

<문제 인식>

• setTime에 await가 제대로 기능하지 않는다.

• 처음 시도한 코드

  if(type === 'auto'){
      this.uploadingStart()
      await setTimeout(function () {},10000)
      this.uploadingEnd()
  }

  • 처음에 uploadingStart()이 시작하면 아래의 돌아가는 로고가 생기고 10초 뒤 사라지게 하고 싶었다.
    
    
  • 하지만 시작하자마자 바로 사라지고 그 다음에 setTimeout이 끝났다.

동그라미가 돌아가며 5초간 있어야하는데 바로 사라진다 ㅜㅜ

 

 

 

<결과>

그래서 찾아본 결과 아래의 글을 보면서 이해가 됐다.

 

 

https://stackoverflow.com/questions/33289726/combination-of-async-function-await-settimeout

Combination of async function + await + setTimeout

https://dev.to/francisprovost/await-a-settimeout-1fje

Await a setTimeout

 

 

 

setTimeout은 Promise반환을 하지 않기 때문에 async와 await를 적용해도 동기적으로 적용되지 않는다고 한다.

 

따라서 Promise를 반환하게 직접 작성 후 async와 await를 적용해야한다고 한다.

 

 

• 적용 코드

const wait = (timeToDelay) => new Promise((resolve) => setTimeout(resolve, timeToDelay)) //이와 같이 선언 후

this.uploadingStart()
await wait(5000)    // 이렇게 await와 함께 사용하면 동기적으로 동작한다.
this.uploadingEnd()

• 실제 적용 사례
  • 이렇게 요청하고 응답에 따라 지연 후 다시 요청하는 방식으로 2분동안 진행하게 하였다. (물론 응답 시에는 바로 나오게 된다.)

if (type === 'auto') {
     const wait = (timeToDelay) => new Promise((resolve) => setTimeout(resolve, timeToDelay))
     This.uploadingStart()
     let time = 24
     while (time--) {
        await ajax( ... )
        .then( ... )
        .catch( ... )
     await wait(5000)
}