axios | Notion

프로젝트 구조 변화:

프로젝트 초기화: 프로젝트 루트 디렉토리에서 npm을 초기화합니다.
```
npm init
```
axios 설치: axios를 프로젝트에 추가합니다.
```
npm install axios
```

폴더 구조 예시: 프로젝트 폴더 구조는 다음과 같이 변할 수 있습니다.

/your_project
├── src
│   ├── main
│   │   └── webapp
│   │       ├── WEB-INF
│   │       │   └── views
│   │       │       ├── index.jsp
│   │       │       └── other.jsp
│   │       ├── resources
│   │       │   └── static
│   │       │       └── js
│   │       │           ├── axiosModule.js
│   │       │           └── otherJsFile.js
└── package.json

axios 모듈화

axiosModule.js:

// axiosModule.js
import axios from 'axios';

const sendRequest = async (method, url, headers = {}, body = null) => {
  try {
    const response = await axios({
      method,
      url,
      headers,
      data: body,
    });
    return response.data;
  } catch (error) {
    throw error;
  }
};

export const get = async (url, headers = {}) => sendRequest('GET', url, headers);

export const post = async (url, headers = {}, body = null) => sendRequest('POST', url, headers, body);

export const put = async (url, headers = {}, body = null) => sendRequest('PUT', url, headers, body);

export const del = async (url, headers = {}, body = null) => sendRequest('DELETE', url, headers, body);

사용:

<!DOCTYPE html>
<html xmlns:th="<http://www.thymeleaf.org>">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf Axios 예시</title>
    <!-- axiosModule.js 로드 -->
    <script src="${pageContext.request.contextPath}/static/js/axiosModule.js" defer></script>
</head>
<body>

<!-- Thymeleaf를 사용하여 데이터 바인딩 예시 -->
<div th:id="result-container"></div>

<script>
    // Thymeleaf에서 axiosModule.js 사용 예시
    document.addEventListener('DOMContentLoaded', async function () {
        try {
            // GET 요청
            const getData = await axiosModule.get('/api/data');
            document.getElementById('result-container').innerText = 'GET 요청 결과: ' + JSON.stringify(getData);

            // POST 요청
            const postData = await axiosModule.post('/api/create', { 'Authorization': 'Bearer Token' }, { key: 'value' });
            console.log('POST 요청 결과:', postData);
        } catch (error) {
            console.error('에러 발생:', error);
        }
    });
</script>

</body>
</html>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>My JSP Page</title>
    <script src="${pageContext.request.contextPath}/static/js/axiosModule.js" defer></script>
    <script>
        // GET 요청 예시
        axiosModule.get('/api/data')
          .then(response => {
            console.log('GET 요청 결과:', response);
          })
          .catch(error => {
            console.error('에러 발생:', error);
          });

        // POST 요청 예시
        const postData = { key: 'value' };
        axiosModule.post('/api/create', {}, postData)
          .then(response => {
            console.log('POST 요청 결과:', response);
          })
          .catch(error => {
            console.error('에러 발생:', error);
          });

        // PUT 요청 예시
        const putData = { updatedKey: 'updatedValue' };
        axiosModule.put('/api/update/1', {}, putData)
          .then(response => {
            console.log('PUT 요청 결과:', response);
          })
          .catch(error => {
            console.error('에러 발생:', error);
          });

        // DELETE 요청 예시
        axiosModule.del('/api/delete/1')
          .then(response => {
            console.log('DELETE 요청 결과:', response);
          })
          .catch(error => {
            console.error('에러 발생:', error);
          });
    </script>
</head>
<body>
    <!-- JSP 페이지 내용 -->
</body>
</html>

위의 예시에서는 axiosModule.js 파일을 가져와 각 요청 방식(GET, POST, PUT, DELETE)에 대한 함수를 사용하는 예시를 보여줍니다. 이렇게 모듈화된 axios를 사용하면 코드의 재사용성과 유지보수성이 향상됩니다.

Promise 기반:
- axios는 Promise 기반의 HTTP 클라이언트이므로, 비동기 작업을 효과적으로 처리할 수 있습니다. 이는 더 깔끔하고 효율적인 코드를 작성할 수 있게 도와줍니다.
브라우저와 Node.js에서 동작:
- axios는 브라우저 및 Node.js 환경에서 모두 동작하므로, 클라이언트 사이드와 서버 사이드에서 동일한 코드를 사용할 수 있습니다.
자동 JSON 변환:
- axios는 HTTP 응답 데이터를 자동으로 JSON으로 변환해주는 기능을 제공합니다. 이로써 개발자는 데이터를 파싱하고 처리하는 번거로움을 덜 수 있습니다.
에러 처리가 쉽고 일관성 있음:
- axios는 HTTP 에러 상태 코드에 대한 처리가 편리하게 구성되어 있습니다. 일관된 방식으로 에러를 다루고 처리할 수 있어 개발자들이 코드를 예측 가능하게 유지할 수 있습니다.
취소 요청 기능:
- axios는 요청을 취소하는 기능을 제공하여, 불필요한 요청을 방지하고 성능을 향상시킬 수 있습니다.
Interceptor 지원:
- axios는 Interceptor를 통해 요청과 응답의 중간에 코드를 주입할 수 있습니다. 이를 통해 요청이나 응답을 수정하거나 로그를 기록하는 등 다양한 작업을 수행할 수 있습니다.

ajax는 오래된 기술이며, 여전히 사용되지만 axios는 이러한 측면에서 더 풍부하고 현대적인 기능을 제공하여 개발자에게 더 많은 편의성을 제공합니다.