개발자

Next.js App dir에서 fetch API를 사용할 때 interceptor는 어떻게 설정할 수 있나요?

2023년 05월 27일조회 1,401

axios의 interceptor를 사용한 로직이 있었는데, Next의 App dir에서는 getServerSideProps 등이 fetch API 로 대체된걸로 알고 있어요. 이러면 axios의 interceptor를 사용하려면 어떻게 해야할까요? 그리고 fetchAPI가 400번이나 500번 정도의 에러 코드를 제대로 잡지 못한다는 말을 들은 적이 있는데 이건 어떻게 대응할 수 있을까요?

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 3

인기 답변

김명재님의 프로필 사진

저도 같은 필요때문에 여러가지 라이브러리를 찾아봤는데 마땅한게 없어서 직접 만들었습니다. 한 번 써보세요 :) https://return-fetch.myeongjae.kim/#2-throw-an-error-if-a-response-status-is-more-than-or-equal-to-400

이준혁님의 프로필 사진

이준혁

프레스토랩스 프론트엔드 리드2023년 07월 31일

ㅋㅋㅋㅋ 많은 분들이 fetch 때문에 속썩이고 있었군요. TS 타이핑 잘 안되는것도 fetch 단점중 하납니다. 저도 군데군데 때워가며 fetch 쓰고 있었는데 잘 써보겠습니다.

김명재님의 프로필 사진

김명재

디어코퍼레이션 풀스택 개발자2023년 07월 31일

우와 감사합니다ㅋㅋㅋㅋ 애용해주세요!! 타이핑 잘 안 되는 부분이 아마도 fetch가 response body의 타입을 설정할 수 없다는 거겠죠?? axios처럼 호출할 때 generic으로 response body의 타입을 지정할 수 있는 예제도 만들어봤습니다 https://return-fetch.myeongjae.kim/#3-serialize-request-body-and-deserialize-response-body

profile picture

익명

작성자

2023년 07월 31일

와 그저 빛... 감사합니다!

이규진님의 프로필 사진

이규진

프론트 엔드 개발자2023년 11월 15일

return-fetch 사용해보고 있습니다만, next.config.js에서 proxy 설정 이후에 api 요청 시에는 Uncaught (in promise) TypeError: Failed to construct 'URL': Invalid base URL 과 같은 에러가 뜨는데 어떻게 해결해야 할까요.. proxy 설정 안하고 사용 시에는 요청이 잘 됩니다만 cors 에러 때문에요 ㅠ ㅠ

이국범님의 프로필 사진

interceptor는 어떻게 설정할 수 있나요? -> fetch를 래핑한 함수를 만들어서 fetch 호출전, 호출후 로직을 직접 만드시면 됩니다 fetchAPI가 400번이나 500번 정도의 에러 코드를 제대로 잡지 못한다는 말을 들은 적이 있는데 -> 스테이터스 코드가 4xx, 5xx번대인 경우 axios는 throwing하지만 fetch는 스로잉하지 않는걸 말씀하시는거 같은데 response.status로 값 확인하신 후에 직접 throwing하시면 됩니다

profile picture

익명

작성자

2023년 05월 31일

감사합니다. 공수가 늘어나겠군요..

권혁진님의 프로필 사진

axios 패키지를 사용하시면 request response 인터셉터 기능을 지원해서 손쉽게 사용하실 수 있어요

김명재님의 프로필 사진

김명재

디어코퍼레이션 풀스택 개발자2023년 07월 31일

axios가 request, repsonse intercpetor를 지원하긴 하지만, Next.js를 app directory 형태로 사용할 때는 Next.js가 자체적으로 확장한 built-in fetch를 사용하라고 권장하기 때문에, Next.js를 계속 사용하실 예정이라면 fetch로 갈아타는게 좋은 선택인 것 같아요. > Next.js extends the native Web fetch() API to allow each request on the server to set its own persistent caching semantics. > > In the browser, the cache option indicates how a fetch request will interact with the browser's HTTP cache. With this extension, cache indicates how a server-side fetch request will interact with the framework's persistent HTTP cache. > > - https://nextjs.org/docs/app/api-reference/functions/fetch

권혁진님의 프로필 사진

권혁진

백엔드/프론트엔드 개발자2023년 07월 31일

넵 제가 질문 자체를 이해를 잘못 했던것 같습니다 첨부해주신 링크는 읽어보겠습니다 좋은 조언 감사합니다.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!