Video học lập trình mỗi ngày

Top-level await Top-level await cho phép developers sử dụng await mà không cần phải khai báo async function. Và nó hoạt động như một async function. Nhưng hãy chú ý khi sử dụng top-level await, vì nó đang ở Status: Stage 3.

Top-level await được giới thiệu cùng với những tính năng ở bài viết này: 2020 - Cập nhật tính năng mới của javascript

Trích: https://github.com/tc39/proposal-top-level-await

Top-level await enables modules to act as big async functions: With top-level await, ECMAScript Modules (ESM) can await resources, causing other modules who import them to wait before they start evaluating their body.

async/await theo cách cũ

Khi async/await được giới thiệu ở ES8 (ECMAScript 2017) chức năng nay giúp developers loại bỏ dần những dòng code phức tạp, thay vào đó chúng được sử dụng rộng rãi. Thế nhưng điều quan trọng là khi sử dụng await ngoài async function thì chúng ta những nhà phát triển đều gặp "những sai lầm khi sử dụng async/await" trong đó có lỗi:

Tips: Nếu có async/await rồi thì Promise có còn lỗi thời? không cần thiết dùng đến hay không?

await Promise.resolve(console.log('🎉'));
// → SyntaxError: await is only valid in async function

Do vậy nhiều devjs phải sử dụng immediately-invoked async function để xử lý chúng

(async function() {
  await Promise.resolve(console.log('🎉'));
  // → 🎉
}());

Top-level await

Giờ đây Top-level await sẽ hoạt động như một bigs async function nhưng không cần khai báo async.

await Promise.resolve(console.log('🎉'));
// → 🎉

Note: Top-level await only works at the top level of modules. There is no support for classic scripts or non-async functions.

Những trường hợp sử dụng Top-level await

const connection = await dbConnector();

or

let jQuery;
try {
  jQuery = await import('https://cdn-a.example.com/jQuery');
} catch {
  jQuery = await import('https://cdn-b.example.com/jQuery');
}

Dù đã cố gắng giải thích nhưng các bạn cũng nên vào những source chính thống:

https://v8.dev

https://github.com/tc39/