ES2022: Top-level await proposal #1365
Comments
主なユースケースtc39/proposal-top-level-await: top-level
(async function main(){
})();
// awaiting.mjs
import { process } from "./some-module.mjs";
let output;
export default (async () => {
const dynamic = await import(computedModuleSpecifier);
const data = await fetch(url);
output = process(dynamic.default, data);
})();
export { output };後者のユースケースは、普通に関数をexportした方が圧倒的に良いので、扱いたくない。 // awaiting.mjs
import { process } from "./some-module.mjs";
let output;
export const fetch = async () => {
const dynamic = await import(computedModuleSpecifier);
const data = await fetch(url);
return process(dynamic.default, data);
}あとは、コンソールでもDynamic ImportをTop-Levelにかけるのは、これのおかげなはず。 > await import(`/i18n/${navigator.language}`);mainをなくせるのはいいけど、正直なくてもそこまで困らない。 |
|
Dynamic ImportのユースケースがないとTop-Level awaitって機能しにくいな。 |
import confetti from 'https://cdn.skypack.dev/canvas-confetti';
confetti();うーん、でもブラウザは元々URLをimportできるから、別にDynamic Import自体は関係ないか。 const confetti = await import('https://cdn.skypack.dev/canvas-confetti');
confetti.default();こう書けても何も嬉しくない… const version = "1.0.0"
const confetti = await import(`https://cdn.skypack.dev/canvas-confetti@${version}`);
confetti.default();みたいなケースぐらいか。 |
こちらは 結局 |
|
Top-Level await 仕様的には
という仕組みなっている。 https://tc39.es/proposal-top-level-await/#sec-parsemodule
https://tc39.es/proposal-top-level-await/#sec-source-text-module-record-execute-module
https://tc39.es/proposal-top-level-await/#_ref_103
https://tc39.es/proposal-top-level-await/#sec-async-function-definitions |
|
仕様的に見ると
という表現になりそう。(FormalParametersとかは細かいことなので特に明記はしないけど) |
|
問題はModuleという表現は https://jsprimer.net/basic/module/#module なので、非同期より後にあるんだよなー <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>top-level-await-dynamic-import in script</title>
</head>
<body>
<script>
console.log("script context");
const confetti = await import('https://cdn.skypack.dev/canvas-confetti');
confetti.default();
</script>
</body>
</html>はエラーで動かない
|
|
Top-Level awaitはScriptじゃなくてModuleじゃないと実行できない。 evalだとModuleじゃないのでTop-Level awaitが利用できない
|
Top-level await proposal
対応がいる。
awaitの説明あんまりユースケースでは使ってないので、詳しくは触れないかも。
CDNとかDynamic Importと合わせた場合 と コンソールが一番のユースケースな気はする。
Originally posted by @azu in #1337 (comment)
The text was updated successfully, but these errors were encountered: