웹 개발 및 비동기 프로그래밍에서 이미 요청되어 현재 진행 중인 Promise 객체를 의미한다.
이 개념은 주로 중복 요청을 방지하고, 성능 최적화 패턴에서 쓰이는데, 내가 겪은 문제는 새로고침 시에 /refresh(인증 토큰 재발급) 요청의 동시성 만료 및 경쟁 상태를 해결하였다.
문제 상황
문제가 되었던 지점은 마운트 시점에 인증이 필요한 api 요청이 동시에 2개 이상 날아갈 때 발생하였다.
각각의 요청이 독립적으로 401을 감지하였고, tryRefresh() 함수를 각자 동시에 호출한다.
이러면 네트워크 상으로는 refreshToken 재발급 요청이 2개가 거의 동시에 나가고, 인증 시스템이 보안을 위해 refreshToken이 한 번 사용되면 즉시 회전(rotation)되어 기존 토큰을 만료시킨다.
결국 첫 번째 요청이 새 쿠키를 받아왔는데, 미세하게 늦은 두 번째 요청이 이미 만료된 이전 토큰으로 또 요청을 보내게 되면서 서버가 이를 탈취나 이상 징후로 판단해 세션을 끊어버리거나 쿠키를 지워버리는 현상이 발생한다. 이러면 로그인이 튕긴다.
해결(In-flight Promise)
In-flight Promise로 구현한 방식은 네트워크 요청을 가로채서 단 하나의 통로만 열어둔 것이다.
첫 번째 요청 진입 : tryRefresh()가 처음 실행될 때, 실제 서버로 가는 fetch / axios 프로미스를 변수(ex. activeRefreshPromise)에 할당한다. 이 프로미스가 In-flight promise다.
두 번째 요청 진입 : 첫 번째 요청이 완료되기 전 두 번째 API의 tryRefresh()가 호출되면, 새로 네트워크 요청을 보내지 않고 이미 공중에 떠 있는(In-flight) activeRefreshPromise를 그대로 return 받아 같이 기다린다.
결과적으로 서버에는 딱 1번만 refreshToken 요청이 가고, 안전하게 갱신된 쿠키/토큰을 두 API 요청이 모두 공유하여 다음 로직을 정상적으로 수행한다.