axios 요청이 많아지면 network 탭에 status가 pending에 멈춰있어요.

Question

이메일 input에 입력할때마다 select를 해오는 api인데 요청이 많아지면 pending상태에서 멈춰있습니다. /sagas/user.js function checkOverlapEmailAPI (data) { return axios . get ( `/user/check_overlap_email?email=${ data }` ); } function* checkOverlapEmail (action) { try { const result = yield call (checkOverlapEmailAPI, action . data ); yield put ({ type : CHECK_OVERLAP_EMAIL_SUCCESS , data : result . data , }); } catch (err) { console.error ( '[Saga - checkOverlapEmail]' , err); yield put ({ type : CHECK_OVERLAP_EMAIL_FAILURE , error : err . response . data , }); } } function* watchCheckOverlapEmail () { yield takeLatest ( CHECK_OVERLAP_EMAIL_REQUEST , checkOverlapEmail); } 어떤 부분이 문제일까요..

travelc2bd3 · Answer

debounce를 줘도 똑같이 몇번 입력하다보면 상태가 같아집니다.. ㅠ function* watchCheckOverlapEmail () { // yield takeLatest(CHECK_OVERLAP_EMAIL_REQUEST, checkOverlapEmail); yield debounce ( 500 , CHECK_OVERLAP_EMAIL_REQUEST , checkOverlapEmail); }

제로초(조현영) · Answer

브라우저에서 한 번에 동시에 보낼 수 있는 요청에 제한이 있기 때문인데 이래서 디바운싱을 사용합니다. 쓰로틀링과 마찬가지로 사가에 있는 함수입니다.