개발's egg/Javascript

axios 서버에서 에러때렸는데 then도 타고 catch도 타고 왜죠?

현z 2023. 5. 24. 18:02

axios 사용중

서버에서 400을 내려줬는데 then도 타고 catch도 탄다

 

axios interceptors 설정이 필요하다

 

axios.interceptors.request.use (
  function (config) {
    setOnLoading(true);
    return config;
  },
  function (error) {
    return error;
  }
)
axios.interceptors.response.use (
  function (response) {
    setOnLoading(false);
    return response;
  },
  function (error) {
    setOnLoading(false);
    return Promise.reject(error);
  }
)

 

밑에 response.use error부분 참고

나머지는 로딩패널 설정해둔거임

 

나는 App.js useEffect 안에 박음

 

useEffect(() => {
  axios.interceptors.request.use (
    function (config) {
      setOnLoading(true);
      return config;
    },
    function (error) {
      return error;
    }
  )
  axios.interceptors.response.use (
    function (response) {
      setOnLoading(false);
      return response;
    },
    function (error) {
      setOnLoading(false);
      return Promise.reject(error);
    }
  )
}, []);

 

 

 

그리고 fetch에서는

통신에 문제가 없으면 400을 떨구든 500을 떨구든

예외 캐치를 안해준다 하더라

그래서 then 안에서 상태코드같은걸로 분기태워야됨