XMLHttpRequest (XHR) 진행상황 모니터링

다운로드 진행률

XMLHttpRequest요청이 처리되는 동안 발생할 수 있는 다양한 이벤트를 수신하는 기능을 제공합니다. 

여기에는 주기적인 진행 알림, 오류 알림 등이 포함됩니다.

 

var xhr = new XMLHttpRequest();

// 이벤트 리스너를 먼저 등록해준다
xhr.onload = () => {
    console.log(`The transfer is completed: ${xhr.status} ${xhr.response}`);
};
xhr.onabort = () => {
    console.error('Download cancelled.');
}
xhr.onprogress = (e) => {
    if (e.lengthComputable) {
    	// 다운로드 진행률 계산
        var percentComplete = Math.floor(e.loaded / e.total * 100);
    } else {
    	// 사이즈 측정 불가
    }
}

xhr.open('GET', '/downloadUrl');
xhr.send();

progress 이벤트 핸들러는 전송할 총 바이트 수 total과 이벤트 및 loaded 필드에서

지금까지 전송 된 바이트 수를 받습니다.

 

업로드 진행률

업로드 이벤트는 XMLHttpRequest.upload 객체에서 시작됩니다.

 

var xhr = new XMLHttpRequest();

xhr.upload.onload = (e) => {
	console.log('upload complete', e);
}
xhr.upload.onprogress = (e) => {
  if( e.lengthComputable ) {
  	// 업로드 진행률 계산
    var percentComplete = Math.floor(e.loaded / e.total * 100);
  } else {
  	// 측정 불가
  }
}
xhr.upload.onabort = () => {
    console.error('Upload cancelled.');
}

xhr.open('POST', '/upload-file');
//xhr.open('POST', '/upload-file', false);  false로 하면 동기 처리

const files = document.querySelector('[name=file]').files;
const formData = new FormData();
formData.append('avatar', files[0]);

xhr.send(formData);

 

참조

developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest