javascriptのFileReaderではまった話

なにがあった

「FileReaderでファイルを読み込み(IndexedDBに)保存」→ 「保存されたファイルを取り出し」という処理をしたいのに、 そのままの順番で書くと「取り出し」→「保存」になってしまった。

原因

FileReaderは非同期でファイルを読み込むらしい。ファイルの読み込みは時間がかかる処理なので、「空いてる時間で次のことやっていいよー」とするらしい。ありがた迷惑だ。

対策

FileReader.onload に取り出し処理を書けばいい。

Before

var reader = new FileReader(); 

// ファイルをArrayBufferで保存 
reader.readAsArrayBuffer(xxx); // 

保存されたファイルを取り出す 
getSavedFile(); 

After

 var reader = new FileReader(); 

// ファイルをArrayBufferで保存 
reader.readAsArrayBuffer(xxx); 

reader.onload = function(e){ 
                             getSavedFile(); 
                           } 

ちなみにFileReaderSync()というのもあって、それで同期的にできるのかな？とも思ったが、これはWebWorkerをつかって同期的に(並列に？)読み込むものらしい。なので今回の用途では使えなかった。

まとめ

非同期処理めんどくさいなーと思う一方、javascriptはシングルスレッドで重い処理をうまいことこなす工夫がされてるんだなと感心した。 同じような非同期のAPIもあるらしいので今後注意して使いたい。