인프런 커뮤니티 질문&답변

travelc2bd3님의 프로필 이미지

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

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

21.02.01 19:44 작성

·

1.9K

0

이메일 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);
}

어떤 부분이 문제일까요..

답변 2

0

travelc2bd3님의 프로필 이미지
travelc2bd3
질문자

2021. 02. 01. 19:59

debounce를 줘도 똑같이 몇번 입력하다보면 상태가 같아집니다.. ㅠ

function* watchCheckOverlapEmail() {
// yield takeLatest(CHECK_OVERLAP_EMAIL_REQUEST, checkOverlapEmail);
yield debounce(500, CHECK_OVERLAP_EMAIL_REQUEST, checkOverlapEmail);
}

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2021. 02. 01. 19:50

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