Фронтендщик
رفتن به کانال در Telegram
Все для frontend developer, шуточки, тесты, статьи Администрация/Реклама @vtopua
نمایش بیشتر1 058
مشترکین
اطلاعاتی وجود ندارد24 ساعت
-47 روز
-1330 روز
در حال بارگذاری داده‌ها
کانال‌های مشابه
![Frontender's notes [ru]](https://cdn.tlmtr.io/_next/image?url=https%3A%2F%2Fimg.telemetr.io%2Fc%2F1qrVZ3%2F5348049928330532677%3Fty%3Dx&w=96&q=75){kind=small}
ابر برچسب‌ها
اشارات ورودی و خروجی
---
---
---
---
---
---
جذب مشترکین
نوامبر '26نوامبر '26
نوامبر '260
در 0 کانال‌ها
اکتبر '26
+1
در 0 کانال‌ها
Get PRO
سپتامبر '26
+1
در 0 کانال‌ها
Get PRO
اوت '26
+1
در 0 کانال‌ها
Get PRO
ژوئیه '26
+1
در 0 کانال‌ها
Get PRO
ژوئن '260
در 1 کانال‌ها
Get PRO
مه '260
در 0 کانال‌ها
Get PRO
آوریل '260
در 1 کانال‌ها
Get PRO
مارس '26
+1
در 0 کانال‌ها
Get PRO
فوریه '26
+1
در 0 کانال‌ها
Get PRO
ژانویه '260
در 0 کانال‌ها
Get PRO
دسامبر '25
+1
در 0 کانال‌ها
Get PRO
نوامبر '25
+1
در 0 کانال‌ها
Get PRO
اکتبر '250
در 0 کانال‌ها
Get PRO
سپتامبر '25
+7
در 0 کانال‌ها
Get PRO
اوت '25
+1
در 0 کانال‌ها
Get PRO
ژوئیه '25
+2
در 0 کانال‌ها
Get PRO
ژوئن '25
+1
در 0 کانال‌ها
Get PRO
مه '250
در 0 کانال‌ها
Get PRO
آوریل '25
+1
در 0 کانال‌ها
Get PRO
مارس '25
+6
در 0 کانال‌ها
Get PRO
فوریه '25
+4
در 0 کانال‌ها
Get PRO
ژانویه '25
+2
در 0 کانال‌ها
Get PRO
دسامبر '240
در 1 کانال‌ها
Get PRO
نوامبر '24
+1
در 0 کانال‌ها
Get PRO
اکتبر '24
+1
در 0 کانال‌ها
Get PRO
سپتامبر '24
+2
در 0 کانال‌ها
Get PRO
اوت '24
+2
در 0 کانال‌ها
Get PRO
ژوئیه '24
+3
در 0 کانال‌ها
Get PRO
ژوئن '24
+3
در 0 کانال‌ها
Get PRO
مه '24
+4
در 0 کانال‌ها
Get PRO
آوریل '24
+3
در 0 کانال‌ها
Get PRO
مارس '24
+3
در 0 کانال‌ها
Get PRO
فوریه '24
+3
در 1 کانال‌ها
Get PRO
ژانویه '24
+2
در 0 کانال‌ها
Get PRO
دسامبر '23
+3
در 0 کانال‌ها
Get PRO
نوامبر '23
+4
در 0 کانال‌ها
Get PRO
اکتبر '23
+3
در 0 کانال‌ها
Get PRO
سپتامبر '23
+8
در 0 کانال‌ها
Get PRO
اوت '23
+4
در 0 کانال‌ها
Get PRO
ژوئیه '23
+14
در 0 کانال‌ها
Get PRO
ژوئن '23
+6
در 0 کانال‌ها
Get PRO
مه '23
+8
در 0 کانال‌ها
Get PRO
آوریل '23
+41
در 0 کانال‌ها
Get PRO
مارس '23
+6
در 0 کانال‌ها
Get PRO
فوریه '23
+9
در 0 کانال‌ها
Get PRO
ژانویه '23
+17
در 0 کانال‌ها
Get PRO
دسامبر '22
+177
در 0 کانال‌ها
Get PRO
نوامبر '22
+142
در 0 کانال‌ها
Get PRO
اکتبر '22
+26
در 0 کانال‌ها
Get PRO
سپتامبر '22
+328
در 0 کانال‌ها
Get PRO
اوت '22
+1 290
در 0 کانال‌ها
Get PRO
ژوئیه '22
+106
در 0 کانال‌ها
Get PRO
ژوئن '22
+2
در 0 کانال‌ها
Get PRO
مه '220
در 0 کانال‌ها
Get PRO
آوریل '220
در 0 کانال‌ها
Get PRO
مارس '220
در 0 کانال‌ها
Get PRO
فوریه '220
در 0 کانال‌ها
Get PRO
ژانویه '220
در 0 کانال‌ها
Get PRO
دسامبر '210
در 0 کانال‌ها
Get PRO
نوامبر '21
+1
در 0 کانال‌ها
Get PRO
اکتبر '21
+1
در 0 کانال‌ها
Get PRO
سپتامبر '21
+4
در 0 کانال‌ها
Get PRO
اوت '210
در 0 کانال‌ها
Get PRO
ژوئیه '210
در 0 کانال‌ها
Get PRO
ژوئن '21
+1
در 0 کانال‌ها
Get PRO
مه '210
در 0 کانال‌ها
Get PRO
آوریل '21
+3
در 0 کانال‌ها
Get PRO
مارس '21
+2
در 0 کانال‌ها
Get PRO
فوریه '210
در 0 کانال‌ها
Get PRO
ژانویه '21
+1
در 0 کانال‌ها
Get PRO
دسامبر '20
+1 226
در 0 کانال‌ها
| تاریخ | رشد مشترکین | اشارات | کانال‌ها | |
| 02 نوامبر | 0 | |||
| 01 نوامبر | 0 |
پست‌های کانال
Исправить проблему нам поможет Promise.resolve:
function func(num) {
if (num > 0) {
return new Promise(function(resolve) {
setTimeout(function() {
resolve(num * num);
}, 3000);
});
} else {
return Promise.resolve(0);
// возвращаем промис, а
не число
}
}
📌 #instr || Фронтендщик
| 2 | Однако, теперь получается, что функция возвращает или промис, или число. Из-за этого мы больше не можем применить метод then к результату функции, так как в случае возврата функцией числа мы получим ошибку:
func(0).then(function(res)
{ // ошибка, применяем
метод then к нулю
});
📌 #instr || Фронтендщик | 13 |
| 3 | Мы будем пользоваться нашей функцией следующим образом:
func(5).then(function(res) {
console.log(res); // выведет
25
});
Пусть теперь мы решили, что нашу асинхронную операцию мы будем совершать, только если передано число больше нуля. В противном случае результатом функции должен быть ноль:
function func(num) {
if (num > 0) {
return new Promise(function(resolve) {
setTimeout(function() {
resolve(num * num);
}, 3000);
});
} else {
return 0; // нулевой
результат
}
}
📌 #instr || Фронтендщик | 14 |
| 4 | Когда нам может понадобится уже выполненный промис?
Давайте посмотрим на примере. Пусть у нас есть некоторая функция, которая параметром принимает число, что-то с ним делает асинхронно и возвращает промис с результатом:
function func(num) {
return new Promise(function(resolve) {
setTimeout(function() {
resolve(num * num);
}, 3000);
});
}
📌 #instr || Фронтендщик | 15 |
| 5 | Создание сработавших промисов в JavaScript
Иногда вам может понадобится создать уже выполненный промис. Для этого существуют два метода: метод
Promise.resolve создает выполненный успешно промис, Promise.reject создает отклоненный промис. Параметром эти методы получают то, что станет результатом или ошибкой промиса соответственно.
📌 #instr || Фронтендщик | 13 |
| 6 |  Поэтому возникшее исключение можно поймать обычным, уже изученным вами способом, например, черезcatch:
Promise.all(promises).then(function(res) {
console.log(res);
}).catch(function(err) {
console.log(err);
});
📌 #instr || Фронтендщик | 16 |
| 7 | А теперь с помощью Promise.race дождемся окончания загрузки первого из промисов:
Promise.race(promises).then(function(res) {
console.log(res); // выведет
1 - результат первого выполнившегося
промиса
});
Если хотя бы один из промисов в массиве будет отклонен, то промис с результатом сразу же перейдет в состояние rejected.
📌 #instr || Фронтендщик | 17 |
| 8 | Давайте с помощью Promise.all дождемся окончания загрузки всех промисов из нашего массива:
Promise.all(promises).then(function(res) {
console.log(res); // выведет
[1, 2, 3] - результаты
всех промисов
});
📌 #instr || Фронтендщик | 15 |
| 9 | Давайте посмотрим на практике. Пусть у нас есть массив промисов:
let promises = [
new Promise(resolve
=> setTimeout(() => resolve(1),
1000)),
new Promise(resolve
=> setTimeout(() => resolve(2),
2000)),
new Promise(resolve
=> setTimeout(() => resolve(3),
3000)),
];
📌 #instr || Фронтендщик | 18 |
| 10 | Оба метода своим результатом возвращают новый промис. Для метода Promise.all результатом этого промиса будет массив результатов всех переданных промисов (порядок результатов соответствует порядку промисов в массиве), а для Promise.race - результат первого сработавшего промиса.
📌 #instr || Фронтендщик | 16 |
| 11 | Работа с массивами промисов в JavaScript
Сейчас мы разберем два полезных метода, позволяющих работать с массивами промисов. Метод Promise.all позволяет выполнить код по окончанию всех промисов, переданных ему в виде массива, а метод Promise.race дожидается загрузки первого промиса из массива, отбрасывая остальные.
📌 #instr || Фронтендщик | 17 |
| 12 |  Учтите, что catch нужен именно для диагностики ошибки: она решаема или нет. Если ошибка решаема, то catch должен передать ее решение следующему за собой then. А если не решаема (или данный catch просто не знает как ее решить), то мы должны или ничего не вернуть или бросить исключение:
promise.then(
function(result) {
return result + ‘1’;
}
).then(
function(result) {
return result + ‘2’;
}
).catch(
function(error) {
if (ошибкаРешаема) {
return ‘данные’;
// отправляем на следующий
then
} else {
// ничего не возвращаем
или бросаем
исключение
}
}
).then(
function(result) {
// тут решаем ошибку
}
);
📌 #instr || Фронтендщик | 19 |
| 13 | При этом исключение может возникнуть в самом промисе, либо выброшено через throw в любом звене цепочки:
promise.then(
function(result) {
return result + ‘1’;
}
).then(
function(result) {
if (всеХорошо) {
return result + ‘2’;
} else {
throw new Error(‘ошибка’);
// переходим к ближайшему
перехватчику
}
}
)
.then(
function(result) {
return result + ‘3’;
}
).catch(
function(error) {
// ближайший перехватчик
}
);
📌 #instr || Фронтендщик | 16 |
| 14 | Как правило, все ошибки цепочки перехватываются в одном месте: в конце цепочки размещается catch:
promise.then(
function(result) {
return result + ‘1’;
}
).then(
function(result) {
return result + ‘2’;
}
).catch(
function(error) {
// попадем сюда в
случае ошибки
}
);
📌 #instr || Фронтендщик | 22 |
| 15 | Функция-обработчик имеет два варианта действий: если она справилась с исключительной ситуацией, то может вернуть результат через return и выполнение продолжится дальше по цепочке. Если же она не справилась с ошибкой, то может или ничего не возвращать, или выбросить исключение через throw. В этом случае выполнение перейдет к следующему перехватчику ошибки (в then или catch - что встретится раньше).
📌 #instr || Фронтендщик | 19 |
| 16 | Вот пример второй ситуации:
promise.then(
function(result) {
return result + ‘1’;
}
).then(
function(result) {
return result + ‘2’;
}
).catch(
function(error) {
// выполнение сразу
перейдет сюда
}
).then(
function(result) {
console.log(result);
}
);
📌 #instr || Фронтендщик | 17 |
| 17 | В этом случае выполнение кода сразу перейдет к тому then, в котором есть функция-обработчик ошибки, либо в первому catch, смотря что встретится раньше.
Вот пример первой ситуации:
promise.then(
function(result) {
return result + ‘1’;
}
).then(
function(result) {
return result + ‘2’;
},
function(error) {
// выполнение сразу
перейдет сюда
}
).then(
function(result) {
console.log(result);
}
);
📌 #instr || Фронтендщик | 17 |
| 18 | Исключения в цепочках промисов в JavaScript
Пусть по каким-то причинам наш промис завершится с ошибкой:
let promise = new
Promise(function(resolve,
reject) {
setTimeout(function() {
reject(‘error’);
}, 3000);
});
📌 #instr || Фронтендщик | 21 |
| 19 | Исключения в цепочках промисов в JavaScript
Пусть по каким-то причинам наш промис завершится с ошибкой:
let promise = new
Promise(function(resolve,
reject) {
setTimeout(function() {
reject(‘error’);
}, 3000);
});
📌 #instr || Фронтендщик | 1 |
| 20 |  Промисы внутри цепочки в JavaScript
Функции цепочки могут также возвращать промисы. В этом случае результат этого промиса попадет в следующий then:
promise.then(
function(result) {
return result + ‘1’;
}
).then(
function(result) {
return new Promise(function(resolve) {
resolve(result +
‘2’); // этот результат
попадет в следующий then
});
}
).then(
function(result) {
return result + ‘3’;
}
).then(
function(result) {
console.log(result);
// выведет
‘string123’
}
);
📌 #instr || Фронтендщик | 18 |
