Articles
Введение в TypeScript
Асинхронность/ожидание (async/await) в TypeScript

Асинхронность/ожидание (async/await) в TypeScript

В этой статье объясняется использование async/await в TypeScript.

YouTube Video

Асинхронность/ожидание (async/await) в TypeScript

В TypeScript ключевое слово async используется для упрощенного описания асинхронных операций и ведет себя аналогично синтаксису async/await в JavaScript. Функции, определенные с помощью async, предназначены для более интуитивного управления функциями, возвращающими Promises.

Основы функций с использованием async

Функции, объявленные с ключевым словом async, всегда возвращают объект типа Promise. Пример базового использования:.

1async function fetchData(): Promise<string> {
2    return "Data received";
3}
4
5fetchData().then((data) => console.log(data)); // "Data received"

В этом примере, поскольку функция async всегда возвращает объект Promise, возвращаемое значение автоматически разрешается с помощью Promise.resolve. Другими словами, "Data received" превращается в Promise<string> и обрабатывается как асинхронная операция.

Ключевое слово await

Ключевое слово await можно использовать только внутри функции, объявленной с ключевым словом async. Это позволяет приостановить выполнение и дождаться результата Promise перед продолжением выполнения функции.

В следующем примере асинхронная обработка с использованием fetch написана с помощью async/await.

 1async function getUserData() {
 2    try {
 3        const response = await fetch("https://codesparklab.com/json/example.json");
 4        const data = await response.json();
 5        console.log(data);
 6    } catch (error) {
 7        console.error("Error fetching user data:", error);
 8    }
 9}
10
11getUserData();

В этом примере ключевое слово await используется для ожидания завершения Promise, возвращаемого функцией fetch, и его результат присваивается переменной response. Далее, результат response.json() также обрабатывается с помощью await.

Обработка ошибок с использованием async/await

Ошибки, возникающие при асинхронной обработке, можно отлавливать с помощью стандартного синтаксиса try...catch. Если ошибка возникает на этапе использования await, она обрабатывается в блоке catch.

 1async function fetchDataWithErrorHandling() {
 2    try {
 3        const response = await fetch('https://invalid.codesparklab.com/');
 4        if (!response.ok) {
 5            throw new Error(`HTTP error! status: ${response.status}`);
 6        }
 7        const data = await response.json();
 8        console.log(data);
 9    } catch (error) {
10        console.error("Fetch error:", error);
11    }
12}
13
14fetchDataWithErrorHandling();

В приведенном выше примере результат вызова функции fetch обрабатывается с помощью await, а в случае возникновения ошибки она обрабатывается с использованием try...catch.

Преимущества async/await

  1. Интуитивное асинхронное программирование: Использование async/await делает поток выполнения кода более интуитивным, чем использование цепочек Promise (then или catch), позволяя писать код, похожий на синхронный.

  2. Простота обработки ошибок: Использование try...catch упрощает обработку ошибок в асинхронных операциях. Позволяет писать более читаемый код по сравнению с использованием цепочек Promise.

Возвращаемые значения функций async

Функция async всегда возвращает Promise. Таким образом, даже без явного возвращения Promise асинхронная обработка возможна с использованием ключевого слова async.

1async function example() {
2    return 42;
3}
4
5example().then((result) => console.log(result)); // 42

В приведённом выше коде возвращается синхронное значение 42, но так как оно внутри функции async, оно автоматически преобразуется в Promise.resolve(42).

Последовательное выполнение асинхронных функций

При выполнении нескольких асинхронных функций подряд можно использовать await для управления их порядком.

 1async function fetchData(url: string): Promise<any> {
 2    try {
 3        const response = await fetch(url);
 4        return await response.json();
 5    } catch (error) {
 6        console.error("Error fetching user data:", error);
 7    }
 8}
 9
10async function fetchData1(): Promise<any> {
11    return await fetchData("https://codesparklab.com/json/example.json");
12}
13
14async function fetchData2(): Promise<any> {
15    return await fetchData("https://codesparklab.com/json/example2.json");
16}
17
18async function processData() {
19    const data1 = await fetchData1();
20    console.log(data1);
21
22    const data2 = await fetchData2();
23    console.log(data2);
24}
25
26processData();

В этом примере fetchData2 выполняется после завершения fetchData1. Это более читаемо по сравнению с использованием цепочки Promise.

Параллельное выполнение

Если нужно выполнить асинхронные операции параллельно, можно использовать Promise.all для обработки нескольких Promise одновременно.

 1async function fetchData(url: string): Promise<any> {
 2    try {
 3        const response = await fetch(url);
 4        return await response.json();
 5    } catch (error) {
 6        console.error("Error fetching user data:", error);
 7    }
 8}
 9
10async function fetchData1(): Promise<any> {
11    return await fetchData("https://codesparklab.com/json/example.json");
12}
13
14async function fetchData2(): Promise<any> {
15    return await fetchData("https://codesparklab.com/json/example2.json");
16}
17
18async function fetchMultipleData() {
19    const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
20    console.log(data1);
21    console.log(data2);
22}
23
24fetchMultipleData();

В этом случае fetchData1 и fetchData2 выполняются одновременно, и процесс продолжается после того, как оба будут выполнены. Это позволяет эффективно обрабатывать несколько асинхронных операций.

Резюме

  • Функция async возвращает Promise, и с помощью ключевого слова await можно дождаться результата асинхронной операции.
  • С использованием try...catch обработка ошибок в асинхронных операциях становится проще.
  • С использованием Promise.all можно выполнять несколько асинхронных операций параллельно.

async/await широко используется в TypeScript и JavaScript, так как позволяет проще описывать асинхронные операции.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

Класс Promise в TypeScriptГенераторные функции в TypeScript