showOpenFilePickerによるファイル読込が完全に終わる前に、次の処理が作動してしまう。

Question

$(function () {
	$("button").click(async function () {
		var e, fh, fh_list, file, opts, reader;
		console.log("step1");
		try {
			console.log("step2");
			opts = {
				types: [
					{
						description: 'csv file',
						accept: {
							'text/csv': ['.csv']
						}
					}
				]
			};
			fh_list = (await window.showOpenFilePicker(opts));
			fh = fh_list[0];
			file = (await fh.getFile());
			reader = new FileReader();
			reader.readAsText(file, 'UTF-8');
			reader.onload = (event) => {
				console.log("step3");
				console.log(event.target.result);
			};
		} catch (error) {
			e = error;
			console.log(e);
		}
		console.log("end");
	});
});

ページ上に設置されているbuttonタグをクリックするとcsvファイル選択のダイアログが開き、そのあとに選択されたcsvの内容に基づいた処理を実行しようとしています。
しかし、上のコードでいう「step1」「step2」「step3」「end」の順番で実行されてほしいのに、awaitを入れているにも関わらず非同期処理になってしまい、「step1」「step2」「end」「step3」の順番になってしまいます。
どうすれば「end」のところを最後に実行させられるのでしょうか？

追記

$(function () {
	$("button").click(async function () {
		var e, fh, fh_list, file, opts, reader;
		console.log("step1");
		try {
			console.log("step2");
			opts = {
				types: [
					{
						description: 'csv file',
						accept: {
							'text/csv': ['.csv']
						}
					}
				]
			};
			fh_list = (await window.showOpenFilePicker(opts));
			fh = fh_list[0];
			file = (await fh.getFile());
			reader = new FileReader();
			await new Promise((resolve, reject) => {
				reader.addEventListener('load', resolve);
				reader.addEventListener('error', reject);
				reader.readAsText(file, 'UTF-8');
				reader.onload = (event) => {
					console.log("step3");
					console.log(event.target.result);
				};
			});
		} catch (error) {
			e = error;
			console.log(e);
		}
		console.log("end");
	});
});

promiseを入れても「step3」が最後に実行されてしまいます。

Answer 1

reader.onload が非同期に呼ばれるからですね。

await new Promise((resolve, reject) => {
  reader.addEventListener('load', resolve);
  reader.addEventListener('error', reject);
  reader.readAsText(file, 'UTF-8');
});

こういう感じで await しましょう。

Comments

[muro]

回答ありがとうございます。
しかし、promiseを入れてみても実行順が「step3」が最後になってしまいます。
変更後のコードを質問文に追加しました。

[int32_t]

「reader.onload = ...」は文ごと削除してください。

const event = await new Promise(...);
console.log("step3");
console.log(event.target.result);

でいいでしょう。

[muro]

ありがとうございます。ようやく解決いたしました。

$(function () {
$("button").click(async function () {
var e, fh, fh_list, file, opts, reader;
console.log("step1");
try {
console.log("step2");
opts = {
types: [
{
description: 'csv file',
accept: {
'text/csv': ['.csv']
}
}
]
};
fh_list = (await window.showOpenFilePicker(opts));
fh = fh_list[0];
file = (await fh.getFile());
reader = new FileReader();
await new Promise(function (resolve, reject) {
reader.addEventListener('load', resolve);
reader.addEventListener('error', reject);
reader.readAsText(file, 'UTF-8');
});
console.log("step3");
console.log(event.target.result);
} catch (error) {
e = error;
console.log(e);
}
console.log("end");
});
});