Top Level await (TLA) является новшеством в мире JavaScript, которое было добавлено в стандарт ECMAScript 2022. Это ключевое слово позволяет использовать оператор await в глобальной области видимости, что упрощает написание асинхронного кода и уменьшает количество лишних оберток функций. Ранее await мог использоваться только внутри функций, помеченных как async. В этой статье мы рассмотрим, что такое Top Level await, как его использовать и какие преимущества он предоставляет для разработки веб-приложений на JavaScript.

Для использования TLA в скрипте, необходимо использовать ключевое слово await перед импортом модуля, содержащего асинхронный код. Например:

const data = await import('./data.js');

В этом примере мы импортируем модуль data.js и ждем, пока он будет загружен. После этого переменная data будет содержать экспортируемые из модуля данные.

Одним из преимуществ использования TLA является то, что он позволяет избежать использования конструкции async и await внутри функций, что может приводить к увеличению количества оберток функций и усложнению кода.

Например, рассмотрим следующий код:

async function fetchData() {
  const data = await fetch('https://example.com/data');
  const json = await data.json();

  return json;
}

async function main() {
  const data = await fetchData();

  console.log(data);
}

main();

С использованием TLA этот код можно переписать таким образом:

const data = await (await fetch('https://example.com/data')).json();

console.log(data);

Как видно из примера, использование TLA позволяет упростить и сократить код, избежать использования лишних оберток функций и делает его более читаемым.

TLA поддерживается всеми популярными браузерами и средами выполнения JavaScript, но перед его использованием необходимо проверить, поддерживается ли он в конкретной среде.

В заключение, Top Level await - это полезное нововведение в JavaScript, которое упрощает написание асинхронного кода, делает его более понятным и читаемым.