Promise.race()

 

문제상황 :

 

지금까지 대부분의 작업은 axios를 이용해서 fetching을 진행하였는데..

 

새로 작성해야 하는 코드는 FileSystem.uploadAsync를 이용해서 fetching을 진행해야 했다.

 

하지만 이 부분에서 무한히 응답을 대기하고만 있는 상황이 발생했다.

 

원인을 추적해보니, FileSystem으로 작성한 코드부에서 Timeout error가 발생하지 않고 있었다.

 

axios를 활용한 코드에서는 선임자가 Timeout error handling 코드를 이미 포함시켜놓았기에 갖다 쓰기만 하면 되었는데,

 

FileSystem은 이러한 코드부가 없기에 내가 직접 Timeout Error를 구현해보고자 하였다.

 

 

구현방법 :

1. Promise를 이용해 응답을 요청한다.

2. 또 다른 Promise를 선언하고, 1번 요청의 5초 후에 Timeout error message와 함께 408 에러를 reject부에 출력하도록 한다.

3. 둘의 응답 속도를 비교해 더 빠르게 들어온 응답을 출력시킨다.

 

 

3번을 구현하기 위해 Promise.race() 를 사용하였다.

 

이는 말 그대로 2개의 비동기 응답을 경쟁시켜 더 빨리 들어온 응답을 출력시키는 함수이다.

 

사용법은 다음과 같다.

 

Promise.race(['1번 요청', '2번 요청'])

 

내 코드에 적용시키면 다음과 같다.

const createTimeoutPromise = () => new Promise((_, reject) => setTimeout(() => {
      // eslint-disable-next-line prefer-promise-reject-errors
      reject({
        errorData: {
          status: 408,
          error: {
            message: 'TIMEOUT',
          },
        },
      })
    },
    5000))

Promise.race([
      new Promise((resolve, reject) => {
        FileSystem.uploadAsync(_, _, _)
        .then((result) => {
          resolve(JSON.parse(result.body))
        }).catch((error) => {
          reject(new Error(JSON.stringify({
            errorData: error,
          })))
        })
      }),
      createTimeoutPromise(),
    ])

 

 

1. Promise를 이용해 응답을 요청한다.

: 성공시키고자 하는 함수 FileSystem.uploadAsync(...)를 포함시킨다.

 

 

2. 또 다른 Promise를 선언하고, 1번 요청의 5초 후에 Timeout error message와 함께 408 에러를 reject부에 출력하도록 한다.

: CreateTimeoutPromise는 5초의 지연시간 후에 Timeout error를 발생시키는 함수이다.

여기서 출력하는 응답은 에러 신호로 간주되어야 했기에 resolve가 아닌 reject로 출력시킨다.

 

 

3. 둘의 응답 속도를 비교해 더 빠르게 들어온 응답을 출력시킨다.

: Promise.race(['1번 요청', '2번 요청'])
-> 1번 요청이 5초 이하의 시간이 걸린다면 1번 요청의 응답을 출력하고,

-> 1번 요청이 5초를 초과한 시간이 걸린다면 2번 요청의 응답을 출력한다.