axios httpService Lib

axios는 많은 개발자들이 사용하는 인기있는 HTTP 클라이언트 라이브러리입니다. 여러 가지 장점이 있습니다:

1. 브라우저 및 Node.js에서 모두 사용 가능: axios는 다양한 플랫폼에서 작동하므로 클라이언트 사이드와 서버 사이드 모두에서 사용할 수 있습니다.

2. Promise 기반 API: axios는 Promise 기반 API를 제공하여 비동기 처리를 보다 간결하게 작성할 수 있습니다. async/await 구문과 함께 사용하면 코드의 가독성이 향상됩니다.

3. Request 및 response 데이터의 변환: axios는 요청 전과 응답 후에 데이터를 변환할 수 있는 기능을 제공합니다. 이를 통해 사전 처리가 필요한 경우 유연하게 작업할 수 있습니다.

4. Request 및 response의 Interception: 요청 및 응답의 중간에 개입할 수 있게 하는 Interceptors를 제공합니다. 로깅, API 키 삽입 및 응답 오류 처리 등의 작업을 수행할 수 있습니다.

5. 중단 가능한 업로드 및 다운로드: 큰 파일 등의로드/다운로드를 중단할 수 있는 기능을 제공합니다. 사용자에게 진행 상황을 보여주거나, 작업을단하도록 허용할 때 유용합니다.

6. Timeout 작업: axios는 요청을 시작하고 완료될 때까지 지정한 시간 내에 작업을 수행해야지 여부를 결정하기 위해 설정할 수 있는 Timeout 기능을 제공합니다.

7. 다양한 옵션 및 구성: axios에서 사용할 수 있는 다양한 옵션을 제공하여, 개발자가 필요한 요청 메서드 생성을 간편하게 설정할 수 있습니다.

모든 이러한 장점 덕분에axios`는 현대 JavaScript/TypeScript 애플리케이션 개발에서 인기 있는 선택지 중 하나입니다.

axios를 사용하는 방법은 axios 라이브러리를 import하고 axios 인스턴스를 생성한 후 요청을 보내는 것으로 간단합니다. 다음은 기본적인 axios 사용 방법입니다:

1. axios 라이브러리를 설치합니다.

npm install axios

2. axios 라이브러리를 import 합니다.

import axios from 'axios';

3. 요청을 보낼 URL과 함께 axios 인스턴스를 생성합니다.

const instance = axios.create({
  baseURL: 'https://example.com/api/',
  timeout: 1000,
});

4. instance를 사용하여 HTTP 요청을 전송합니다.

instance.get('/users')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

위의 코드에서 instance의 get 메서드를 호출하는 것으로 HTTP GET 요청을 생성하고 전송합니다. 다른 HTTP 요청 메서드는 .get 대신 .post, .put, .delete 등을 사용하여 생성할 수 있습니다. 리턴 값은 Promise 객체로, 성공 및 실패 두 가지 콜백 함수를 추가할 수 있습니다.

더 많은 옵션을 제공하며, Interceptor나 기본 오류처리와 같은 기능도 간단하게 사용할 수 있습니다. 자세한 내용은 axios 공식 문서를 참조하시면 더욱 자세히 알아보실 수 있습니다.

axios를 사용하여 파일 업로드 및 다운로드를 하는 방법은 일반적인 HTTP 요청과 다르지 않습니다. 다만 axios에서 파일을 업로드하거나 다운로드할 때 추가적인 설정이 필요할 뿐입니다.

파일 업로드

파일 업로드를 하려면 FormData 객체를 사용하여 데이터를 작성해야 합니다. 이렇게 작성된 데이터를 axios로 보낼 때, POST 요청에 headers에 Content-Type 속성을 설정해줘야 합니다.

const fileInput = document.querySelector('#fileinput');
const formData = new FormData();

// 파일목록을 formData 추가합니다.
for (const file of fileInput.files) {
  formData.append('file', file);
}

// formData를 axios로 보내기 위한 설정입니다.
const config = {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
};

// axios를 사용하여 파일을 업로드합니다.
axios.post('/api/upload', formData, config).then(response => {
  console.log(response.data);
});

위의 코드에서 fileinput 요소로부터 파일 목록을 가져와 formData 객체에 추가합니다. 그리고 headers에 Content-Type 속성을 설정하여 파일 데이터를 보냅니다.

파일 다운로드

파일 다운로드를 하려면, axios의 responseType 속성을 blob으로 설정해야 합니다. 그리고 response 객체에서 blob() 메서드를 호출하여 반환된 Blob 데이터를 파일로 저장하면 됩니다.

axios({
  url: '/api/download',
  method: 'GET',
  responseType: 'blob',
}).then(response => {
  const url = window.URL.createObjectURL(new Blob([response.data]));
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'file.pdf');
  document.body.appendChild(link);
  link.click();
});

위의 코드에서 axios 요청에서 responseType 속성을 blob으로 설정하여 응답 데이터가 Blob 유형임을 알립니다. 그리고 응답 처리 함수에서 반환된 Blob 데이터를 파일로 저장합니다. 이 때 window.URL.createObjectURL() 메서드를 사용하여 브라우저 URL을 생성하고, <a> 요소를 생성하여 URL을 링크로 추가합니다. 마지막으로 link.click()을 호출하여 다운로드를 활성화합니다.

위의 코드에서 파일 형식 및 다운로드 위치를 수정하여 원하는 파일을 다운로드할 수 있습니다.

axios의 post 메서드를 사용하여 파일 업로드를 할 때는 FormData 객체를 이용하여 파일 데이터를 multipart/form-data 형식으로 만들어 서버로 전송하면 됩니다. post 메서드에 전달할 인자로 FormData 객체와 config 객체를 넘겨주어야 합니다.

다음은 axios의 post 메서드를 사용하여 파일 업로드를 하는 예시입니다.

const fileInput = document.getElementById('fileInput');
const formData = new FormData();
for (const file of fileInput.files) {
  formData.append('files[]', file);
}
axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data',
  },
  onUploadProgress: function(event) {
     // 업로드 진행 상태를 처리하기 위한 콜백 함수
     const percentCompleted = Math.round((event.loaded * 100) / event.total);
     console.log(percentCompleted);
  }
})
.then(res => console.log(res))
.catch(err => console.error(err));

위의 코드에서 FormData 객체를 만든 후, <input type="file"> 요소에서 가져온 데이터를 append 메서드를 통해 FormData 객체에 추가합니다. axios.post 메서드에 URL과 HTTP 메서드(post)를 전달한 후에 config 객체에 Content-Type을 multipart/form-data로 설정합니다. 이 설정으로 파일 데이터가 multipart/form-data 로 인코딩됩니다.

axios.post 메서드는 업로드 도중 처리 상태를 알려주는 onUploadProgress 콜백 함수를 받을 수 있습니다. 이 콜백 함수로 업로드 진행 상태 등을 처리할 수 있습니다.

마지막으로 axios.post 메서드의 Promise 객체에서 서버가 응답한 결과를 처리할 수 있습니다.

위와 같이 axios의 post 메서드를 사용하면 쉽게 파일 업로드를 구현할 수 있습니다.