에러 메시지 피드백(alert, toast 유형)에 lodash debounce 적용 사례

By | 5월 10, 2022

개요

  • react axios 공통화 작업(interceptor 등)을 하던 중,
    에러 메시지 알림에 debounce 처리를 해야 하는 요건이 발생.

소스

  • axios-settings.ts (커스텀 파일)
    /**
    * axios 기본설정
    */
    const axiosOpts = {
    // timeout: 5000,
    // headers: {
    //   "Content-Type": "application/json",
    // },
    };
    //
    export const ax = Axios.create(axiosOpts);
    //
    /**
    * axios response interceptor
    */
    ax.interceptors.response.use(
        (response: any) => {
        // TODO: 응답에 따른 예외처리
        return response;
        },
        (error: any) => {
        showErrNoti(error);
        return Promise.reject(error);
        },
    );
    //
    /**
    * axios error 를 인수로 받아서 noti bar 를 출력한다.
    */
    const showErrNoti = (error: any) => {
        // 네트워크 에러 (서버 응답 없음 등)의 경우에는 error 객체에 response 가 존재하지 않음.
        const er = error.response;
        const httpCode = er ? `${error.response.status}` : '';
        processError(httpCode);
    }
    //
    /**
    * axios error 에 대한 후처리 중, debounce를 걸어야 하는 부분을 별도로 래핑한 것
    *  - debounceMillis 동안에는 동일한 메시지피드백을 연속적으로 하지 않는다.
    */
    const processError = debounce((httpCode: any) => {
            alert(`[${httpCode}] error !!`);
        },
        debounceMillis, 
        { leading: true, trailing: false }  
    );


참고

  • debounce의 세 번째 인수
    • leading: true
      • 기본적으로 debounce는 interval이 다 지나야 한 번 내용을 호출하는데,
        나는 에러가 발생하자마자 알림을 띄워야 했기 때문에 이 옵션을 주었다.
    • trailing: false
      • leading: true로 초기 시점 문제는 해결했는데,
        interval이 끝날 때 무조건 내용을 한 번 더 호출하는 문제가 있었다.
        이 옵션을 주어 해결된 것으로 보임.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments