Класс Promise в TypeScript
Эта статья объясняет класс Promise в TypeScript.
YouTube Video
Обещание (Promise)
Класс Promise в TypeScript по сути такой же, как и Promise в JavaScript. Promise – это встроенный класс для обработки асинхронных операций, представляющий результат асинхронной операции после её завершения. Здесь мы объясняем основные принципы работы с Promises и связанные с ними концепции.
Основное использование
Создание Promise:
Объект Promise используется для обёртывания асинхронных операций. Promise создаётся с помощью new Promise(executor) и исполняет асинхронные операции внутри. Функция executor принимает две функции, resolve и reject, в качестве аргументов.
1const myPromise = new Promise<number>((resolve, reject) => {
2 // Perform asynchronous operations
3 const success = true; // This is just an example
4 if (success) {
5 resolve(42); // In case of success
6 } else {
7 reject('Failed'); // In case of failure
8 }
9});Использование Promise:
Созданный Promise обрабатывается с помощью then() и catch().
1myPromise.then((value) => {
2 console.log(`Success: ${value}`); // Process the value passed with resolve
3}).catch((error) => {
4 console.error(`Error: ${error}`); // Handle the error passed with reject
5});Метод finally()
1const myPromise = new Promise<number>((resolve, reject) => {
2 // Perform asynchronous operations
3 const success = false; // This is just an example
4 if (success) {
5 resolve(42); // In case of success
6 } else {
7 reject('Failed'); // In case of failure
8 }
9});
10
11myPromise.then((value) => {
12 console.log(`Success: ${value}`); // Process the value passed with resolve
13}).catch((error) => {
14 console.error(`Error: ${error}`); // Handle the error passed with reject
15}).finally(() => {
16 console.log('The operation has completed');
17});- Метод
finally()определяет код, который всегда будет выполнен независимо от того, выполнено обещание (Promise) или отклонено.
Цепочки Promises:
Связывая then() после then(), можно последовательно соединять несколько асинхронных операций.
1const myPromise = new Promise<number>((resolve, reject) => {
2 // Perform asynchronous operations
3 const success = true; // This is just an example
4 if (success) {
5 resolve(42); // In case of success
6 } else {
7 reject('Failed'); // In case of failure
8 }
9});
10
11myPromise
12 .then((value) => {
13 console.log(`Success: ${value}`);
14 return value + 1; // Pass the value to the next then
15 })
16 .then((newValue) => {
17 console.log(`New value: ${newValue}`);
18 })
19 .catch((error) => {
20 console.error(`Error: ${error}`);
21 });async/await:
В TypeScript вы можете более просто работать с Promises, используя async/await. Внутри функции async можно использовать ключевое слово await, чтобы дождаться результата Promise.
1const myPromise = new Promise<number>((resolve, reject) => {
2 // Perform asynchronous operations
3 const success = true; // This is just an example
4 if (success) {
5 resolve(42); // In case of success
6 } else {
7 reject('Failed'); // In case of failure
8 }
9});
10
11async function asyncFunction() {
12 try {
13 const value = await myPromise;
14 console.log(`Success: ${value}`);
15 } catch (error) {
16 console.error(`Error: ${error}`);
17 }
18}
19
20asyncFunction();Методы Promise
Promise.all()
Promise.all выполняет несколько промисов одновременно и ждет, пока все они будут выполнены.
1const promise1 = Promise.resolve(1);
2const promise2 = Promise.resolve(2);
3const promise3 = Promise.resolve(3);
4
5Promise.all([promise1, promise2, promise3])
6 .then((results) => {
7 console.log(results); // [1, 2, 3]
8 })
9 .catch((error) => {
10 console.error('Error :', error);
11 });then()вызывается только тогда, когда все промисы выполнены.catch()вызывается, если хотя бы один промис завершился с ошибкой.
Promise.race()
Promise.race возвращает результат первого промиса, который завершится среди нескольких промисов.
1const promise1 = new Promise((resolve) => setTimeout(resolve, 100, 'First'));
2const promise2 = new Promise((resolve) => setTimeout(resolve, 500, 'Second'));
3
4Promise.race([promise1, promise2]).then((result) => {
5 console.log(result); // "First"
6});- Как и в этом примере, возвращается результат первого завершившегося промиса.
Promise.allSettled()
Promise.allSettled ожидает завершения всех промисов и возвращает массив всех результатов, включая как выполненные, так и отклонённые.
1const promise1 = Promise.resolve(1);
2const promise2 = Promise.reject("Failed");
3const promise3 = Promise.resolve(3);
4
5Promise.allSettled([promise1, promise2, promise3])
6 .then((results) => {
7 results.forEach(result => console.log(result));
8 // [
9 // { status: 'fulfilled', value: 1 },
10 // { status: 'rejected', reason: 'Failed' },
11 // { status: 'fulfilled', value: 3 }
12 // ]
13 });then()вызывается после того, как все промисы завершились (выполнены или отклонены). Каждый результат включает свойствоstatus('fulfilled'или'rejected'). Неудачи не влияют на другие операции.
Promise.any()
Promise.any ожидает выполнения первого промиса и возвращает его.
1const promise1 = new Promise((resolve) => setTimeout(() => resolve("A ok"), 300));
2const promise2 = new Promise((_, reject) => setTimeout(() => reject("B fail"), 100));
3const promise3 = new Promise((resolve) => setTimeout(() => resolve("C ok"), 200));
4
5Promise.any([promise1, promise2, promise3])
6 .then(value => {
7 // Logs the first fulfilled value ("C ok")
8 console.log("first fulfilled:", value);
9 })
10 .catch(err => {
11 console.log("should not reach here in this example:", err);
12 });- Он возвращает первое выполненное значение среди нескольких промисов.
Резюме
Используя TypeScript, вы можете правильно указывать типы Promises, что позволяет писать более типобезопасные программы. Это помогает обнаруживать ошибки на раннем этапе разработки, заранее указывая тип значения, возвращаемого Promise.
Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.