Apabila saya menggunakan "menunggu" di peringkat atas seperti ini:
const LuckyDrawInstance=await new web3.eth.Contract(abi)
Saya mendapat amaran: "set Experiments.topLevelAwait true" pada terminal. Apabila saya cuba menambahnya pada "tsconfig.json" ia masih tidak berfungsi. Ia mengatakan harta "percubaan" tidak wujud.
Saya boleh membalutnya dalam fungsi async, tetapi saya mahu menetapkannya tanpa fungsi pembalut.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Penyelesaian terkini yang berkesan untuk saya semasa menulis artikel ini ialah menggunakan Babel dan bukannya SWC, kerana Next.js tidak membenarkan konfigurasi SWC tersuai, oleh itu, anda tidak boleh menghantar
允许fail.topLevelAwait。 swcrc@babel/plugin-syntax-top-level-await的 Babel 插件添加到package.jsondalam.Sebagai contoh.
{ "devDependencies": { "@babel/plugin-syntax-top-level-await": "^7.14.5" } }Dalam
package.json所在项目的根目录中创建.babelrcfail.In
.babelrc中确保包含next/babel预设和topLevelAwaitpemalam.Sebagai contoh.
{ "presets": ["next/babel"], "plugins": [ "@babel/plugin-syntax-top-level-await" ] }Ini adalah penyelesaian paling mudah sehingga pasukan Next.js membenarkan kami memasukkan konfigurasi SWC. Ambil perhatian bahawa dengan melakukan ini, anda tidak akan mendapat manfaat prestasi SWC kerana ia akan dilumpuhkan memihak kepada Babel.
Tiada kaitan dengan tsconfig.json. Anda mesti menetapkannya dalam next.config.js. Versi baharu next.js menggunakan webpack5, yang menyokong menunggu peringkat teratas.
module.exports = { webpack: (config) => { // this will override the experiments config.experiments = { ...config.experiments, topLevelAwait: true }; // this will just update topLevelAwait property of config.experiments // config.experiments.topLevelAwait = true return config; }, };Perhatian
Anda mesti menggunakannya di luar komponen berfungsi:
export default function Navbar() { // this will throw error // Syntax error: Unexpected reserved word 'await'. const provider=await customFunction() return ( ); }13 item seterusnya
Tetapan yang sama digunakan untuk "seterusnya" dalam direktori "halaman" dan "apl": "^13.1.6" . (Oleh kerana ciri ini ialah ciri
webpack5webpack5, bukan ciri next.js) Anda boleh mengujinya menggunakan kod contoh berikut:const _promise = async () => { return new Promise((resolve, reject) => resolve(4)); }; // you might get typecsript warning const val = await _promise(); console.log("val", val);AMARAN
Memandangkan ia adalah percubaan, ia mungkin rosak dalam beberapa versi