api 순차적 실행 | catch (err) vs catch | throw error vs return error

상황

1번째 api 요청 결과에 따라서 2번째 api가 처리되도록 동기적으로 실행순서를 보장하고 싶다.

 

1번째 api 

사용자가 입력한 비밀번호가 기존 비밀번호와 일치하는지 확인 

//사용자 비밀번호 확인
    checkCurrentPassword: builder.mutation({
      query: (password: string) => ({
        url: 비밀번호확인 요청 주소,
        method: 'POST',
        headers: {
          'Content-type': 'text/plain',
        },
        body: password,
      }),
    }),

 

2번째 api

사용자 비밀번호를 변경

//비밀번호 변경
updatePasswordQuery: builder.mutation({
      query: (password: string) => ({
        url: 비밀번호 변경 주소,
        method: 'PATCH',
        headers: {
          'Content-type': 'text/plain',
        },
        body: password,
      }),
    }),

 

1번째 api에서 사용자가 원래 쓰던 비밀번호를 입력하면 2번째 api 호출이 되지 않아야한다. 이전과 다른 새로운 비밀번호를 입력해달라는 alert을 띄운다.

따라서, 1번째 api의 응답이 실패해야지 (사용자가 원래 비밀번호와 일치하는 비밀번호를 입력했어야지) 2번째 api를 호출한다.

 

이 로직의 함수를 처음엔 이렇게 작성했다. (http 통신 라이브러리로는 RTK Query 사용)

   checkCurrentPassword(passwordInputValue)
      .unwrap()
      .then(() => {
       //"이전과 다른 비밀번호 입력해주세요" 를 화면에서 띄울 로직
      })
      .catch(() => {
        //비밀번호 변경 서버에 요청
        updatePasswordQuery(passwordInputValue)
          .unwrap()
          .then(() => {
           //성공시 처리할 로직
          })
          .catch((err) =>
            toast.error('비밀번호 변경 실패. 다시 시도해 주세요'),
          );
      });

 

먼저, 1번째 api인 비밀번호 일치 확인 api 요청을 하고, then()으로 성공 응답이 오면 화면에 보여줄 로직만 작동되게 한다.

1번째 api의 요청이 실패해야지만 catch() 절에서 받아서 catch() 내부에서 2번째 api인 비밀번호 변경을 요청하고, 2번째 api가 처리해야할 로직도 then과 catch로 나누어주어 작성했다.

위에선 로직을 간추려서 적용했지만, 실제 코드는 성공시 처리할 로직이 복잡하다. 웹뷰인지 웹브라우저인지에 따라 조건문을 줘서 내부에 로직이 더 존재한다. 

오늘 코드리뷰에서 동료가 위 코드의 depth 가 깊어 코드를 읽다가 길을 잃었다는 피드백을 받았다.! 

 

리팩토링

then catch 절로 작성하여 depth가 깊어졌던 것을 막고, 프라미스를 처리하는 async await 키워드와 try/catch 절을 사용해서 1번째 api와 2번째 api가 각자 자기 역할에만 충실하도록 함수를 분리한다. 

1번째 api를 처리하는 함수에서 에러가 생기면 2번째 api한테 에러를 토스해주기만 한다.

그러므로 2번째 api는 1번째 api 호출시 실패 응답을 받은 경우에만 에러를 받아서 2번째 api의 로직을 실행한다.

 

1번째 api 기존 비밀번호와 일치여부 확인

  const checkCurrentPasswordPromise = async () => {
    try {
      await checkCurrentPassword(passwordInputValue).unwrap();
    } catch {
      //2번째 api로 에러를 토스하도록 에러처리
    }
  };

 

2번째 api 비밀번호 변경

  const updatePasswordPromise = async () => {
    try {
      await updatePasswordQuery(passwordInputValue).unwrap();
      //비밀번호 업데이트 로직
    } catch {
      toast.error('비밀번호 변경 실패. 다시 시도해 주세요');
    }
  };

 

api 호출 사용 

  const handleComplete = () => {
    //기존 비밀번호와 같은지 확인
    checkCurrentPasswordPromise().catch(() => {
      //비밀번호 변경 서버에 요청
      void updatePasswordPromise();
    });
  };

 

 

여기서 1번째 api의 에러처리 중에서 헷갈렸던 부분이 있다. 

    catch {
      //2번째 api로 에러를 토스하도록 에러처리
    }

 

catch (err) {} vs catch {}

catch (err) {} 

    catch (err) {
      throw err
    }

 

프라미스에서 반환된 (서버에서 응답으로 주는) 에러를 그대로 나타낸다.

 

 

서버에서 주는 에러 메시지가 그대로 찍히는 걸 볼 수 있다.

 

catch {}

    catch {
      throw new Error()
    }

 

반면에, catch의 exceptionVar 에 아무런 인자도 주지않고 Error 생성자를 만들면, javascript 자체의 사용자가 정의한 에러 객체가 만들어진다.

 

 

 

throw error vs return error

throw error

    catch (err) {
      throw err;
    }

 

throw 를 사용하면, 정상적인 실행 순서를 방해해서 에러를 던지는 것이다. 던져진 에러는 call stack에 던져지고, 에러를 처리하는 쪽에서 에러가 잡히지 않으면 프로그램이 종료된다. 

 

return error

    catch (err) {
      return err;
    }

 

반면에 에러를 리턴하면 발생한 에러는 콘솔에는 잘 찍힌다. 

 

 

그렇지만 1번째 api를 호출해서 사용하는 아래 구문에서 catch 절에 잡히지 않았다.

에러를 리턴하면 2번째 api 호출로 에러가 토스가 안되고 1번째 호출에서 그냥 에러만 반환하면서 실행이 끝난다. 

 

checkCurrentPasswordPromise().catch(() => {
}

 

에러를 리턴하는 건 단순히 value로서 에러를 리턴하는 것이다. 따라서 호출하는 함수는 그 에러를 return value로 받는 것이다. 따라서 리턴한 에러를 가져다 쓰고 싶으면 then 으로 처리해야지 반환받은 에러를 핸들링할 수가 있다. 

 

checkCurrentPasswordPromise().then((res) => {
    console.log(res, 'res는?')
}

 

리턴받은 에러는 위와 같이 then으로 처리해주면 아래처럼 서버에서 받은 에러가 잘 나온다. 

 

 

 

결론적으로, 서버에서 받은 에러를 다음 api로 토스하는게 주된 목적이니 catch (err) 를 사용해서 서버 응답 에러를 그대로 받고, 1번째에api에서 에러가 던져지면 2번째 api에서 원하는 로직을 실행하도록 하고 싶으니 throw err를 사용해서 리팩토링 했다.

 

  const checkCurrentPasswordPromise = async () => {
    try {
      await checkCurrentPassword(passwordInputValue).unwrap();
    } catch (err) {
      //2번째 api로 에러를 토스하도록 에러처리
      throw err;
    }
  };

 

 

끝