XMLHttpRequest

XMLHttpRequest でプログレスバーに進捗状況を表しつつ、ダウンロードするコードを書きます。
(※このコードは「XMLHttpRequest Living Standard」の6.4節のコードを参考にしました。)

6.4. 用例 - XMLHttpRequest Standard （日本語訳）

HTML
1<progress id="download"></progress>
2
3<script>
4'use strict';
5var progressBar = document.getElementById('download'),
6    xhr = new XMLHttpRequest;
7
8xhr.open('GET', 'test.csv', true);
9
10xhr.addEventListener('progress', function (event) {
11  if (event.lengthComputable) {
12    progressBar.max = event.total;
13    progressBar.value = event.loaded;
14  }
15}, false);
16
17xhr.addEventListener('loadend', function (event) {
18  progressBar.value = event.loaded;
19}, false);
20
21xhr.send();
22</script>

Fetch API

Fetch API でも XMLHttpRequest と同様のコードを書こうとしますが、progress イベントを捕捉する方法が分かりません。

JavaScript
1'use strict';
2fetch('test.txt').then(function (response) {
3  response.text().then(function (string) {
4    console.log(string);
5  });
6});

Fetch API で出来ない事

仕様書を見る限りでは見つけられなかったのですが、そもそも、Fetch API にはイベントの概念がなく、同様のコードを書く事は出来ないのでしょうか。
本件以外にも「XMLHttpRequest で出来て Fetch API では実現できない機能」があれば教えて頂けると有り難いです。

参考リンク

行動規範の内容に同意します

回答1件

ベストアンサー

think49さんの推測通り、Fetch APIには、おそらくイベントの概念はないのではないでしょうか。
どちらかというと、Streamなどを用いて、Fetch APIを使ってprogress イベントを実装するようなイメージではないかと思います。

upload progress? · Issue #21 · whatwg/fetch
に、以下のようにあるところから判断しました。

The native fetch() API implemented by browsers does not use XMLHttpRequest underneath.
The eventual API for progress is building something on https://streams.spec.whatwg.org/
which https://github.com/yutakahirano/fetch-with-streams/ is adding to fetch().

ダウンロード(応答)の進捗については、
Fetch Standard （日本語訳） 6. fetch API
に記述されている

ボディデータを漸進的に受信したいなら：

という箇所にあるコードをもとにすると、一応プログレスバーに進捗は出すことができました。
(ファイルの内容は読み捨ててますが。。)

lang
1fetch('test.txt').then(function(response) {
2	var contentLength = response.headers.get("Content-Length")
3	consume(response.body.getReader(), contentLength);
4});
5
6function consume(reader, contentLength) {
7	var progressBar = document.getElementById('download');
8	var total = 0;
9	return pump();
10
11	function pump() {
12		reader.read().then(function(result) {
13			var done = result.done;
14			var value = result.value;
15			if (done) {
16				progressBar.value = total;
17				return;
18			}
19			total += value.byteLength;
20
21			progressBar.max = contentLength;
22			progressBar.value = total;
23
24			return pump();
25		})
26	}
27}

Fetch API で出来ない事

Fetch Standard （日本語訳） 6. fetch API

fetch() メソッドは、リソースを fetch するための，比較的低レベルの API である。
XMLHttpRequest より少しばかり基盤的部分を対象にする
— 現時点では、いつ要請の進捗（応答の進捗ではなく）が来たかを報告する機能を欠いているが。

とあるところから、アップロード(要請)の進捗については、現状その機能がないようです。

参考リンク

Introduction to Fetch() API | Hacker News

同じように困っている人の質問です。

Now that I think about it, I couldn't find any API related to download/upload progress events with the Fetch API. If that's the case, it means it's an actual regression to XMLHTTPRequest.
You can access the stream as it's coming in using fetch - would that let you do progress? Seems like it would.

JavaScript Fetch API in action

未確認ですが、Fetch APIの制限事項が書かれています。

Limitations

Promises don't have finally/always method- there is a workaround

There is neither abort method nor a timeout property for fetch()

fetch() (as Promise- based standard) doesn't have ability to provide onProgress() callback- so you cannot process a response by chunks

Haven't found clear info about doing synchronous fetching

but, most of all, it's not provided, because even in such case onSuccess and onReject callbacks would be invoked on the next tick- due to Promise nature.

javascript - Progress indicators for fetch? - Stack Overflow

これも、同じように困っている人の質問です。

Soon you'll be able to provide a stream as the body of a request, but the open question is whether the consumption of that stream relates to bytes uploaded.

投稿2016/07/06 03:20

eripong

総合スコア1546

think49

2016/07/07 13:09

ありがとうございます。期待通りの結果は得られましたが、stream を理解するのに時間がかかりそうです。 response.body が ReadableStream であることまでは突き止めました。 https://triple-underscore.github.io/Streams-ja.html#rs-class おそらく、Streamはデータを少しずつロードして reader.read().then() を再帰呼び出ししているイメージでしょうか。コードから実動作を何となく想像できるものの仕様書から動作を理解できるまでではなく、もやもやしている状況です。 Streamの基礎的な部分を解説している資料がもっとあるといいのですが…。