[javascript] Axios를 이용한 업로드 및 다운로드 진행률 모니터링

21 Nov 2023

javascript

Axios는 자바스크립트를 위한 강력한 HTTP 클라이언트 라이브러리입니다. 이 라이브러리를 사용하면 업로드 및 다운로드 요청의 진행률을 모니터링할 수 있습니다. 이번 블로그 포스트에서는 Axios를 사용하여 업로드 및 다운로드의 진행률을 모니터링하는 방법에 대해 알아보겠습니다.

업로드 진행률 모니터링

먼저, 업로드 요청의 진행률을 모니터링하는 방법을 살펴보겠습니다. 아래의 예제 코드를 참고해주세요.

const axios = require('axios');
const FormData = require('form-data');

const file = // 업로드할 파일;
const formData = new FormData();
formData.append('file', file);

axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data',
  },
  onUploadProgress: progressEvent => {
    const percentCompleted = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    );
    console.log(`업로드 진행률: ${percentCompleted}%`);
  },
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

위의 예제 코드에서는 FormData를 사용하여 업로드할 파일을 포함시키고, onUploadProgress 콜백을 설정하여 업로드 진행률을 모니터링합니다. progressEvent.loaded는 현재 업로드된 바이트 수를, progressEvent.total은 전체 파일 크기를 나타냅니다.

다운로드 진행률 모니터링

이제 다운로드 요청의 진행률을 모니터링하는 방법에 대해 알아보겠습니다. 아래의 예제 코드를 참고해주세요.

const axios = require('axios');
const fs = require('fs');
const path = require('path');

const url = // 다운로드할 파일의 URL;
const filePath = // 저장할 파일 경로;

const writer = fs.createWriteStream(filePath);

axios({
  method: 'get',
  url: url,
  responseType: 'stream',
  onDownloadProgress: progressEvent => {
    const percentCompleted = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    );
    console.log(`다운로드 진행률: ${percentCompleted}%`);
  },
})
.then(response => {
  response.data.pipe(writer);
})
.catch(error => {
  console.error(error);
});

위의 예제 코드에서는 fs.createWriteStream을 사용하여 파일을 저장할 수 있고, onDownloadProgress 콜백을 설정하여 다운로드 진행률을 모니터링할 수 있습니다. progressEvent.loaded는 현재 다운로드된 바이트 수를, progressEvent.total은 전체 파일 크기를 나타냅니다.

Axios를 사용하여 업로드 및 다운로드 진행률을 모니터링하는 방법에 대해 알아보았습니다. 이를 통해 사용자에게 진행 상황을 시각적으로 제공하고, 더 나은 사용자 경험을 제공할 수 있습니다.

참고 자료

Axios 공식 문서: https://axios-http.com/