Фронтендщик
前往频道在 Telegram
Все для frontend developer, шуточки, тесты, статьи Администрация/Реклама @vtopua
显示更多1 068
订阅者
无数据24 小时
-27 天
-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}
标签云
进出提及
---
---
---
---
---
---
吸引订阅者
十月 '2610月 '26
十月 '260
在0个频道中
九月 '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个频道中
| 日期 | 订阅者增长 | 提及 | 频道 | |
| 09 十月 | 0 | |||
| 08 十月 | 0 | |||
| 07 十月 | 0 | |||
| 06 十月 | 0 | |||
| 05 十月 | 0 | |||
| 04 十月 | 0 | |||
| 03 十月 | 0 | |||
| 02 十月 | 0 | |||
| 01 十月 | 0 |
频道帖子
Промис представляет собой объект, в который параметром передается функция, внутри которой нужно размещать наш асинхронный код:
let promise = new
Promise(function()
{
// асинхронный код
});
📌 #instr || Фронтендщик
| 2 | Введение в промисы в JavaScript
Вы уже знаете, что использование коллбэк-модели асинхронности легко приводит к ситуации callback hell. Поэтому в JavaScript была введена новая модель под названием промисы (promise). Давайте изучим эту модель.
📌 #instr || Фронтендщик | 17 |
| 3 | Код получился красивый и без callback hell, однако, мы вернулись к двум нашим проблемам: порядок картинок не гарантирован и невозможно поймать момент загрузки всех картинок.
И решения в данной ситуации нет: невозможно запустить цикл, использовать внутри него асинхронную функцию, а потом поймать момент завершения всех функций цикла. Либо вам не нужно ловить этот момент и приведенный выше код вам подойдет либо добро пожаловать в callback hell.
📌 #instr || Фронтендщик | 18 |
| 4 | Асинхронная загрузка картинок в цикле в JavaScript
Пусть пути к картинкам хранятся в массиве:
let arr = ['img1.png',
'img2.png',
'img3.png'];
Мы можем загрузить эти картинки в цикле:
for (let path of arr) {
loadImage(path, function(image,
err) {
document.body.append(image);
});
}
📌 #instr || Фронтендщик | 16 |
| 5 | Мы решили обе описанные проблемы. Однако, получили взамен другую. Пока она еще не сильно видна, но представьте себе, как будет выглядеть наш код, если в нем будет загрузка не трех, а, скажем, десяти картинок, плюс будет добавлена обработка исключений. В результате код станет крайне нечитаемым: сложность кода лавинообразно нарастает при вложенности коллбэков друга. Такая ситуация называется callback hell - ад коллбэков.
📌 #instr || Фронтендщик | 15 |
| 6 | Окей, переделаем код:
loadImage('img1.png',
function(image1,
err1) {
document.body.append(image1);
loadImage('img2.png',
function(image2,
err2) {
document.body.append(image2);
loadImage('img3.png',
function(image3,
err3) {
document.body.append(image3);
console.log('все
картинки
загружены');
});
});
});
📌 #instr || Фронтендщик | 17 |
| 7 | С этим кодом кое-что не так. Дело в том, что картинки будут добавляться в bodyпо мере их загрузки. To есть никто не гарантирует нам, что картинки будут добавлены именно в том порядке, который нам нужен.
Есть еще кое-что. Пусть мы хотим сделать что-нибудь, когда будут загружены все три картинки. В нашем коде мы просто не сможем поймать этот момент, так как все три картинки грузятся независимо.
📌 #instr || Фронтендщик | 17 |
| 8 | Проблема callback hell в JavaScript
Пусть мы хотим с помощью функцииloadImage загрузить три картинки:
loadImage('img1.png',
function(image,
err) {
document.body.append(image);
});
loadImage('img2.png',
function(image,
err) {
document.body.append(image);
});
loadImage('img3.png',
function(image,
err) {
document.body.append(image);
});
📌 #instr || Фронтендщик | 20 |
| 9 |  Либо с обработкой исключительной ситуации:
loadImage('image.png',
function(image,
err) {
if (!err) {
document.body.append(image);
} else {
console.log('произошла
ошибка: '
+ err);
}
});
📌 #instr || Фронтендщик | 21 |
| 10 | Мы можем использовать нашу функцию следующим образом:
loadImage('image.png',
function(image,
err) {
document.body.append(image);
// разместим картинку по
загрузке
});
📌 #instr || Фронтендщик | 24 |
| 11 | Пусть в первый параметр нашего коллбэка попадает ссылка на DOM элемент картинки, а во второй - ошибка, если произойдет исключительная ситуация:
loadImage('img.png',
function(image,
err) {
console.log(image, err);
});
📌 #instr || Фронтендщик | 23 |
| 12 | Загрузка картинок через асинхронные коллбэки в JavaScript
Давайте реализуем функцию loadImage, которая будет загружать картинки. Пусть первым параметром эта функция принимает путь к картинке, а вторым - коллбэк, который выполнится, когда картинка будет загружена:
loadImage('img.png',
function() {
// выполнится по загрузке
картинки
});
📌 #instr || Фронтендщик | 18 |
| 13 |  Давайте переделаем код нашей функцииmake в соответствии с описанным:
function make(num, callback) {
setTimeout(function() {
let arr = [1, 2, 3, 4, 5];
let err;
if (arr[num] ===
undefined) {
err = 'elem not exists';
// текст ошибки
} else {
err = null; // ошибки нет
}
callback(arr[num], err);
}, 3000);
}
📌 #instr || Фронтендщик | 17 |
| 14 | В коллбэк-подходе с исключениями работают следующим образом: в первый параметр коллбэка отправляют результат, а во второй - ошибку. В этом случае обработка ошибок происходит следующим образом:
make(10, function(res, err) {
if (!err) {
console.log(res);
// ошибки не возникло,
выведем результат
} else {
console.log(err);
// ошибка возникла,
выведем ее текст
}
});
📌 #instr || Фронтендщик | 26 |
| 15 | В нашем случае исключение, возникшее внутриmake или коллбэка, не будет поймано:
try {
make(10, function(res) {
console.log(res);
});
} catch(err) {
// не поймается
}
📌 #instr || Фронтендщик | 21 |
| 16 | Иключения в асинхронных коллбэках в JavaScript
Пусть, если параметром make передан номер несуществующего элемента массива - это исключительная ситуация. Как вы уже знаете, исключения, возникшие внутри асинхронной функции, не могут быть пойманы через try-catch.
📌 #instr || Фронтендщик | 18 |
| 17 |  Для примера давайте получим третий элемент массива:
make(3, function(res) {
console.log(res); // третий
элемент массива
});
Давайте переделаем код нашей функции make в соответствии с описанным:
function make(num, callback) {
setTimeout(function() {
let arr = [1, 2, 3, 4, 5];
callback(arr[num]);
// результатом передаем элемент
массива
}, 3000);
}
📌 #instr || Фронтендщик | 16 |
| 18 | Передача параметров в асинхронный коллбэк в JavaScript
Сделаем теперь так, чтобы в асинхронную функцию можно было передавать входные параметры. Пусть для примера в качестве первого параметра функции make мы будем передавать номер того элемента массива, который мы хотим получить в качестве результата.
📌 #instr || Фронтендщик | 19 |
| 19 |  Теперь, при передаче коллбэка в вызов функции make мы можем написать в нем параметр - и в этот параметр попадет результат асинхронной операции:
make(function(res) {
console.log(res); // наш
массив
});
📌 #instr || Фронтендщик | 19 |
| 20 | Сделаем так, чтобы массив с результатом передавался в параметр коллбэка:
function make(callback) {
setTimeout(function() {
let res = [1, 2, 3, 4, 5];
callback(res); // передаем
результат
параметром
}, 3000);
}
📌 #instr || Фронтендщик | 16 |
