javascript - làm thế nào tôi có thể sử dụng "await" cấp cao nhất trong typescript next.js

Khi tôi sử dụng "await" ở cấp độ cao như thế này:

 const LuckyDrawInstance=await new web3.eth.Contract(abi)

Tôi nhận được một cảnh báo trên terminal: "set experiments.topLevelAwait true". Khi tôi thử thêm điều này vào "tsconfig.json", nó vẫn không hoạt động. Nó nói rằng thuộc tính "experiments" không tồn tại.

Tôi có thể gói nó trong một hàm async nhưng tôi muốn thiết lập nó mà không cần một hàm được gói.

Câu trả lời #1

Nó không liên quan gì đến tsconfig.json. Bạn phải thiết lập nó bên trong next.config.js. Phiên bản mới của next.js sử dụng webpack5 và webpack5 hỗ trợ await cấp cao nhất.

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;
  },
};

CHÚ Ý

Bạn phải sử dụng nó bên ngoài thành phần chức năng:

export default function Navbar() {
  // this will throw error
  // Syntax error: Unexpected reserved word 'await'.
  const provider=await customFunction()

  return (
    <section>          
    </section>
  );
}

Tiếp theo 13

Cài đặt giống nhau hoạt động tại "next": "^13.1.6", trong cả thư mục "pages" và "app". (Bởi vì tính năng này là một tính năng của webpack5, không phải của next.js) bạn có thể thử nó với đoạn mã mẫu này:

const _promise = async () => {
  return new Promise((resolve, reject) => resolve(4));
};
// you might get typecsript warning
const val = await _promise();
console.log("val", val);

Cảnh báo

Vì nó đang trong giai đoạn thử nghiệm, nó có thể bị lỗi ở một số phiên bản