同期通信におけるXMLHttpRequest.responseTypeの指定

Question

var xhr = new XMLHttpRequest();
xhr.open('POST', srcImgUrl, false);
xhr.responseType = 'blob';   // ←ここでエラー
xhr.send();

上記のようなコードを書くと下記のサイトの通りに仕様上エラーになりますが、
古いブラウザ等では正常に動作します。(Edgeではエラー、IE11はＯＫ)
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest

同期通信時にresponseTypeを指定できなくなった経緯が分かるサイトまたは、理由を教えてください。
※英語が読めないです。。。

Answer 1

そもそも論として、同期的にXHRをかけること自体が、ふつうのブラウザ環境では非推奨です（Qiita）。

とはいえ、既存のコードを一気にエラーにしては大問題になるので、新機能であるresponseTypeから非同期オンリーに制限していっている、とのことです（StackOverflow）。

Comments

[himakuma]

ありがとうございます。
正直、同期処理があってもいいのでは？と思ってしまいます。

[maisumakun]

ブラウザのメインスレッドで同期処理をすると、その間ブラウザが操作できなくなるなどの問題があるためです。

メインスレッドと関係しないWeb Workerなどの上では、同期通信も行えます。

[himakuma]

やっぱりブラウザをクライアントアプリのように使用したいという状態がおかしいんですよね。。。
（むしろロックしたい感じです。）
愚痴みたいなコメントに回答ありがとうございます。

[jser]

await fetchを使うと同期と同じ程度簡潔に書けますよ。

[himakuma]

対応ブラウザの要件的に、await fetchは使用できないのです。。orz
promiseも同様。。。

[jser]

トランスパイルしてはどうですか？

Answer 2

まだレスポンスを受け取っていないからでは？

事前に指定できるとすると、実際のレスポンスと互換性のないものを指定した際に、エラーが発見されるのは受信後なってしまいます。同期型を使いたいというケースではそういう非同期的な現象を避けたいはずなので、事後に設定する事を強制して、互換性がない場合にその設定文でエラーになるようにしているんでしょう。

Answer 3

responseTypeにblobを指定する意図がよくわかりませんが
blobを処理したい場合aresponseTypeをarraybufferなどにして
FormDataで処理するのではないでしょうか？
また余計なことかとは思いますがajaxでわざわざ同期処理をするのもいかがなものかと
非同期で処理をさせて、promiseで処理を待つほうがよいと思います

Comments

[himakuma]

ありがとうございます。
特殊な仕様ですが、返却されるバイナリに複数のファイル情報が存在していて、
sliceを使いたいが為にblobです。（扱いやすい）