Fetch: Download Progress

fetch메서드는 다운로드 진행사항을 추적할 수 있습니다.

upload진행사항은 추적 불가능한데, 이건 추후에 배울XMLHttopRequest로 보완 가능합니다.

 

다운로드 진행사항 추적을 위해 response.body의 프로퍼티를 사용할 수 있습니다.

ReadableStream입니다. body를 받을 때, 그것을 청크별로 나눠 받을 수 있는 특별한 객체입니다.

Readable-stream자체에 대한 설명은 Streams API에서 읽으면 됩니다.

 

response.text(), response.json()과 다르게 response.body에서는 읽는 과정에서 모든 통제권을 가질 수 있어서 ,어느때건 그것이 얼마나 사용되었는지 확인 가능합니다.

 

//예시

const reader = reponse.body.getReader();

// infinite loop while the body is downloading
// done is true for the last chunk
// value is Uint8Array of the chunk bytes
while(True){
	const {done, value} = awair reader.read();
    
    if(done){
    	break;
    }
    
    console.log(`Revived: ${value.length} bytes`);

다시 정리하면,

done: 계속 false이다가 마지막값에 대해서 true

value: Unit8Array chuck의 배열

 

!. ReadableStream이 for ..await..of 반복을 지원하기는 하지만, 널리 사용되고 있는 건 위와 같이 while을 사용하는 방식입니다.

 

따라서

진행사항을 체크하려면, value.length값이 늘어날 때마다 카운트를 증가시키면 됩니다. 

 

https://ko.javascript.info/fetch-progress

Fetch: Download progress

해당 링크에 이것과 관련된 구현 사항도 제시되어 있습니다.

 

step1: response.body의 getReader로 'reader'를 만듭니다.

step2: response.header.get('ContentLength')로 전체 내용의 길이를 구할 수 있습니다.

step3: 데이터를 읽습니다. 읽으며 value.length값이 증가하면 카운트를 증가시켜 카운트 값을 확인합니다.

step4: 단일 Unit8Array에 chunk묶음을 합칩니다.

    4-1. unit8Array() 객체에 value.lenth 총합 길이 (= 카운트 길이) 넣어 초기화

    4-2. unit8Array()객체에 set메서드로 내용 자체 치기 (for...of 돌려서)

step5: string으로 디코딩하기 ex. let result = new textDecoder('UTF-8").decode( 4번진행사항의 객체)

step6: 완성된 string객체를 JSON.parse(5번진행사항 스트링으로 변경한값)  => 이제 사용ㄱ ㅏ능