#11 - Promise в TypeScript, async await та помилки

В TypeScript для Promise вам треба вказувати тип, який він повертає, це робиться ось так:

const fetchData = (): Promise<string> => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() > 0.5) {
        resolve("Дані успішно отримані!");
      } else {
        reject(new Error("Сталася помилка при отриманні даних."));
      }
    }, 1000);
  });
};

fetchData()
  .then((data) => console.log(data)) // Виконається при успішному результаті
  .catch((error) => console.error(error.message)); // Виконається при помилці

Як бачите вам потрібно просто вказати, що фунукція являється промісом, який повертає string. Для простого розуміння, на виході ви отримаєте звичайний код:

"use strict";
const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (Math.random() > 0.5) {
                resolve("Дані успішно отримані!");
            }
            else {
                reject(new Error("Сталася помилка при отриманні даних."));
            }
        }, 1000);
    });
};
fetchData()
    .then((data) => console.log(data)) // Виконається при успішному результаті
    .catch((error) => console.error(error.message)); // Виконається при помилці

Якщо ж ви любите використовувати async await, то тут синтаксис взагалі ніяк не міняється:

const fetchDataAsync = async (): Promise<string> => {
  if (Math.random() > 0.5) {
    return "Дані успішно отримані!";
  } else {
    throw new Error("Сталася помилка при отриманні даних.");
  }
};

const handleData = async () => {
  try {
    const data = await fetchDataAsync();
    console.log(data);
  } catch (error) {
    console.error((error as Error).message);
  }
};

handleData();

Але треба розуміти, що вивід помилок треба теж обробляти як помилки, що показано в функції handleData. Ми це доречі обговорювали в попередніх уроках. 

Доречі TS дозволяє показувати типи данних, які він повертає. Якщо проміс повертає щось, що знаходиться в вашому коді, а не віддалено з сервера. То вам доведелться створити моделі данних, наприклад:

const fetchUser = async (): Promise<{ name: string; age: number }> => {
  return { name: "Олександр", age: 30 };
};

fetchUser().then((user) => console.log(user.name));

Доречі, щоб не вказувати кожен раз типи данних, ви легко в усі < {} > задавати інтерфейси, які можете розкласти по .d.ts, щоб не повторюватися в коді, наприклад:

interface User {
  name: string;
  age: number;
}

const fetchUser = async (): Promise<User> => {
  return { name: "Олександр", age: 30 };
};

fetchUser().then((user) => console.log(user.name));

На цьому все, потім ми ще розглянемо ускладнені завдання з промісами, але зараз не треба перегружати голову, тому до наступного уроку 😊.