투케이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

// --------------------------------------------------------------------------------------

 

반응형
Comments