fetch を中止するコードでエラーが出る

実現したいこと

実行結果:

// 実行するとalert画面に以下が表示されるようにしたい abort!

発生している問題・分からないこと

現代のjavascriptチーウトリアルで勉強しています。
fetchのURL「'/article/fetch-abort/demo/hang'」でエラーが出ると思っています。
前にも質問したのですが、ここのコードの「'/article/fetch-abort/demo/hang'」はここでしか反応しないようなので、「index4.html」と同じフォルダに「{}user」を作成して実行しています。{}user=={"message": "Aborted"}

エラーメッセージ

error

1Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules 2index4.html:80 Live reload enabled.

該当のソースコード

// 1秒で中止 let controller = new AbortController(); setTimeout(() => controller.abort(), 1000); try { let response = await fetch('/article/fetch-abort/demo/hang', { signal: controller.signal }); } catch(err) { if (err.name == 'AbortError') { // abort() を処理 alert("Aborted!"); } else { throw err; } }

試したこと・調べたこと

上記の詳細・結果

ここのコードの「'/article/fetch-abort/demo/hang'」はここでしか反応しないようなので、「index4.html」と同じフォルダに「{}user」を作成して実行しています。{}user=={"message": "Aborted"},
(async () => {}();をつけたりして実行すると、エラ-は消えるのですが、
意図する結果になりません。

補足

エディタはVSCode,実行はGoogle Chrome、エラ-確認はf12で行っています。
index4.htmlは「現代のjavascriptチーウトリアル」の「3.その他の記事」「3.ネットワークスクリプト」「4.fetch:abort」の
2番目の実行ソースコードです。前回の質問で1個だけは解決できたような気がしたのですが、promise,fetch,mocha,node.js勉強して解決しようとしたのですが、
うまくいきません。setTimeout(() => controller.abort(),1000);のあとsignalが出て、それはabort()をじっこうしているのでしょうか?そのあとの tryでcontroller.signalがエラーを返しているのでしょうか。
このあたりのコードの中身がよくわかっていないです。よろしくお願いいたします。

コメントを投稿

0 コメント