進捗を確認できるfetch
Web Streams APIを使えばできそう
Streams API - Web API | MDN
example: Fetch & Streams API Progress Indicators
XMLHttpRequestを使う必要はなさそうだ
test
code:sh
deno run --allow-net https://scrapbox.io/api/code/takker/進捗を確認できるfetch/script.js
code:script.js
let result = '';
const {size, iterator} = await fetchWithProgress(https://scrapbox.io/api/pages/takker);
for await (const buffer of iterator()) {
console.log([Reading]Size = ${buffer.byteLength} / ${size});
result += new TextDecoder().decode(buffer);
}
console.log(result);
async function fetchWithProgress(url, options) {
const res = await fetch(url, options);
const reader = res.body.getReader();
from https://github.com/AnthumChris/fetch-progress-indicators/blob/master/fetch-basic/supported-browser.js#L16
code:script.js
const contentEncoding = res.headers.get('content-encoding');
const contentLength = res.headers.get(contentEncoding ? 'x-file-size' : 'content-length');
code:script.js
return {
size: parseInt(contentLength),
iterator: async function*() {
while (true) {
const {value, done} = await reader.read();
if (done) break;
yield value; // 新しい通信が来る度に返す
}
},
};
}
#進捗
#Fetch_API
#2021-03-21 01:49:22
#2021-03-20 21:59:10