[Axios] Axios를 사용한 자바스크립트 코드

Axios란?

Axios는 JavaScript로 작성된 강력하고 유연한 HTTP 클라이언트 라이브러리
주로 클라이언트 사이드에서 API 호출을 수행하는 데 사용함
브라우저와 Node.js 환경에서 모두 사용할 수 있으며, HTTP 요청을 쉽게 만들 수 있도록 도와줌
기본적인 사용법
- Axios는 GET, POST, PUT, DELETE 등 다양한 HTTP 메서드를 지원함

// PUT 요청
axios.put('/api/users/1', {
  	username: 'updateduser',
  	password: 'newpassword'
	})
  	.then(response => {
    	console.log(response.data); // 서버로부터의 응답
  	})
  	.catch(error => {
    console.error(error);
  	});

Promise 기반
- Axios는 Promise 기반으로 작동
- 비동기 요청을 처리할 때 .then()과 .catch()를 사용하여 성공적인 응답과 에러를 쉽게 핸들링할 수 있음 + finally

axios.get('url')
      .then(response => {
        // 성공적인 응답 처리
      })
      .catch(error => {
        // 오류 처리
      });

요청과 응답 인터셉트
- 요청 전에 요청을 가로채거나, 서버로부터의 응답을 가로채어 추가적인 작업을 할 수 있음
- ex) 요청을 보내기 전에 헤더에 토큰을 추가하거나, 응답을 받은 후 특정 포맷으로 데이터를 변환하는 등의 작업

axios.interceptors.request.use(request => {
      console.log('Starting Request', request);
      return request;
});

axios.interceptors.response.use(response => {
      console.log('Response:', response);
      return response;
});

요청 취소
- 진행 중인 요청을 취소하는 기능을 제공
- ex) 사용자가 여러 번 클릭하여 중복 요청을 보낼 때 유용함

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
      cancelToken: new CancelToken(function executor(c) {
       	 cancel = c;
      })
});

// 나중에 요청을 취소하려면 cancel 함수를 호출합니다.
cancel();

글로벌 설정
- Axios 인스턴스를 생성하여 애플리케이션 전체에서 공통적으로 사용할 수 있는 설정을 정의할 수 있음
- ex) 모든 요청에 공통적으로 적용될 기본 URL, 헤더, 타임아웃 등을 설정할 수 있음

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.timeout = 2500;

에러 핸들링
- Axios 요청이 실패할 때, 에러 객체를 통해 상태 코드, 응답 메시지 등의 정보에 접근할 수 있음
- 이를 통해 사용자에게 적절한 피드백을 제공할 수 있음

axios.get('/user/12345')
      .catch(function (error) {
            if (error.response) {
                  console.log(error.response.data);
                  console.log(error.response.status);
                  console.log(error.response.headers);
            } else if (error.request) {
              	console.log(error.request);
            } else {
              	console.log('Error', error.message);
            }
            console.log(error.config);
      });

응답 형식
- Axios는 JSON 형식의 응답을 자동으로 JavaScript 객체로 변환해줌
- 데이터를 즉시 사용할 수 있음을 의미함

axios.get('/user/12345')
      .then(function (response) {
            console.log(response.data); // 서버로부터 받은 데이터
            console.log(response.status); // HTTP 상태 코드
            console.log(response.statusText); // 상태 메시지
            console.log(response.headers); // 응답 헤더
            console.log(response.config); // 요청 구성
      });

파일 업로드
- Axios를 사용하여 파일을 업로드할 수 있음
- FormData 객체를 사용하여 멀티파트 폼 데이터를 서버에 전송할 수 있음

const formData = new FormData();
formData.append('file', fileInput.files[0]);

axios.post('/upload', formData, {
      headers: {
        	'Content-Type': 'multipart/form-data'
      }
});

보안 사항
- API 요청을 할 때 보안을 고려해야함
- 예를 들어, 크로스 사이트 요청 위조(CSRF)와 같은 공격으로부터 보호하기 위해 적절한 토큰을 사용하는 것이 중요

axios.get('/user/12345', {
  	withCredentials: true // 크로스 사이트 요청 시 인증 정보(쿠키 등)을 함께 보내기 위한 설정
});

Axios의 기능
- axios.create
- 새로운 Axios 인스턴스를 생성하는 기능을 제공

const apiClient = axios.create({
      baseURL: 'https://api.example.com',
      timeout: 1000,
      headers: {'X-Custom-Header': 'foobar'}
});

Axios의 전역 설정을 정의하는 속성 또는 프로퍼티
- axios.default
- 전역 Axios 설정을 정의하는 기능을 제공, Axios의 전역 설정을 담고 있는 객체의 특정값

axios.defaults.baseURL = 'https://api.example.com';
//axios.defaults를 사용하여 전역 Axios 설정을 변경할 수 있음
//이것은 모든 Axios 요청에 영향을 미칩니다

axios.get('/user', { timeout: 5000 });
//개별 Axios 요청에 직접 구성을 지정할 수 있음.해당 요청에만 적용됨

컨트롤러 예시

@Controller
public class MyController {
    @GetMapping("/get-data")
    @ResponseBody
    public ResponseEntity<String> getData() {
        // 스프링 컨트롤러에서 클라이언트로 응답할 데이터를 생성
        String responseData = "Hello, this data is from the server!";
        return ResponseEntity.ok(responseData);
    }
}

JSP

<!DOCTYPE html>
<html>
<head>
    <!-- Axios 라이브러리를 CDN을 통해 가져옵니다. -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <button id="getDataButton">데이터 가져오기</button>
    <div id="responseData"></div>

    <script>
        // 버튼 클릭 시 데이터를 서버에서 가져오는 함수
        document.getElementById('getDataButton').addEventListener('click', function () {
            // Axios를 사용하여 GET 요청을 서버로 보냅니다.
            axios.get('/get-data')
                .then(function (response) {
                    // 요청이 성공하면 응답 데이터를 화면에 표시합니다.
                    document.getElementById('responseData').innerText = '서버 응답: ' + response.data;
                })
                .catch(function (error) {
                    // 요청이 실패하면 에러 메시지를 표시합니다.
                    console.error('에러:', error);
                });
        });
    </script>
</body>
</html>

위의 예시에서는 Axios를 사용하여 버튼 클릭 시 서버로 GET 요청을 보내고, 서버에서 응답한 데이터를 화면에 표시하는 간단한 예시
이렇게 스프링과 JSP에서 자바스크립트와 Axios를 사용하여 클라이언트와 서버 간의 통신을 구현할 수 있음

Thymeleaf

<!DOCTYPE html>
<html>
<head>
    <!-- 타임리프로 동적인 데이터 바인딩 등을 할 수 있습니다 -->
    <title>페이지 제목</title>
</head>
<body>
    <h1>페이지 콘텐츠</h1>

    <!-- Axios 라이브러리 포함 -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script>
        // Axios를 사용한 API 호출 예시
        axios.get('/api/your-endpoint')
            .then(function (response) {
                // 응답 처리
                console.log(response);
            })
            .catch(function (error) {
                // 에러 처리
                console.error(error);
            });
    </script>
</body>
</html>

저작자표시 비영리 변경금지

'🖥️ 프론트엔드 > JavaScript' 카테고리의 다른 글

[공유] 티스토리 자동 목차 만들기, 따라다니는 자동 목차 생성 방법, 목차 네비게이터 만들기 (완전 쉬움 초보자 가능) (1)	2023.12.09
[Script] 체크박스 (1)	2023.12.07
[Script] 회원가입 페이지 기능 JavaScript/JQuery로 구현하기 (1)	2023.12.07
[JQuery] 제이쿼리 기본 사용법 (1)	2023.12.05
[Node.js] Node.js 맛보기 (0)	2023.11.20

🧑🏻‍💻 LabMate_Devlog

[Axios] Axios를 사용한 자바스크립트 코드

'🖥️ 프론트엔드 > JavaScript' 카테고리의 다른 글

티스토리툴바

[Axios] Axios를 사용한 자바스크립트 코드

'🖥️ 프론트엔드 > JavaScript' 카테고리의 다른 글

관련글

티스토리툴바