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

javascript

1$(function () {2 $("button").click(async function () {3 var e, fh, fh_list, file, opts, reader;4 console.log("step1");5 try {6 console.log("step2");7 opts = {8 types: [9 {10 description: 'csv file',11 accept: {12 'text/csv': ['.csv']13 }14 }15 ]16 };17 fh_list = (await window.showOpenFilePicker(opts));18 fh = fh_list[0];19 file = (await fh.getFile());20 reader = new FileReader();21 reader.readAsText(file, 'UTF-8');22 reader.onload = (event) => {23 console.log("step3");24 console.log(event.target.result);25 };26 } catch (error) {27 e = error;28 console.log(e);29 }30 console.log("end");31 });32});

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