Notice
Recent Posts
Recent Comments
Link
투케이2K
98. (Http/axios) [간단 소스] 액시오스 사용해 Http 요청 및 응답 수행 시 interceptors 인터셉터 사전 가로 채기 수행 본문
Http & Api
98. (Http/axios) [간단 소스] 액시오스 사용해 Http 요청 및 응답 수행 시 interceptors 인터셉터 사전 가로 채기 수행
투케이2K 2024. 12. 20. 19:00[개발 환경 설정]
개발 툴 : Edit++
개발 기술 : Axios
[소스 코드]
// --------------------------------------------------------------------------------------
[개발 및 테스트 환경]
// --------------------------------------------------------------------------------------
- 언어 : JavaScript
- 개발 툴 : Edit ++
- 구분 : HTTP / API
// --------------------------------------------------------------------------------------
// --------------------------------------------------------------------------------------
[사전 설명]
// --------------------------------------------------------------------------------------
1. Axios interceptors 는 then 또는 catch로 처리되기 전에 요청과 응답을 가로챌수 있습니다
2. Axios 인터셉터 추가 후 필요가 없을 시 제거 할 수 있습니다
// --------------------------------------------------------------------------------------
// --------------------------------------------------------------------------------------
[소스 코드]
// --------------------------------------------------------------------------------------
<!-- ================================================== -->
<!-- [CDN 주소 설정] -->
<!-- ================================================== -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- ================================================== -->
<!-- ================================================== -->
<!-- [자바스크립트 코드 지정] -->
<!-- ================================================== -->
// [요청 인터셉터 추가하기]
axios.interceptors.request.use(function (config) {
// [요청이 전달되기 전에 작업 수행]
return config;
}, function (error) {
// [요청 오류가 있는 작업 수행]
return Promise.reject(error);
});
// [응답 인터셉터 추가하기]
axios.interceptors.response.use(function (response) {
// [2xx 범위에 있는 상태 코드는 이 함수를 트리거 합니다.]
// [응답 데이터가 있는 작업 수행]
return response;
}, function (error) {
// [2xx 외의 범위에 있는 상태 코드는 이 함수를 트리거 합니다.]
// [응답 오류가 있는 작업 수행]
return Promise.reject(error);
});
// --------------------------------------------------------------------------------------
// --------------------------------------------------------------------------------------
[참고 사이트]
// --------------------------------------------------------------------------------------
https://axios-http.com/kr/docs/intro
// --------------------------------------------------------------------------------------
반응형
'Http & Api' 카테고리의 다른 글
Comments