Фронтендщик

Для начала нужно обернуть наш асинхронный код в промис: let promise = new Promise(function() {  setTimeout(function() { let result = [1, 2, 3, 4, 5];  }, 3000); }); 📌 #instr || Фронтендщик

Звучит запутано, поэтому давайте посмотрим на примере. Пусть у меня есть вот такой асинхронный код: setTimeout(function() { let result = [1, 2, 3, 4, 5]; }, 3000); Пусть я хочу решить для него нашу основную задачу асинхронности: выполнить некоторый код после срабатывания таймера. При этом я не хочу размещать этот код в самом таймере и хочу, чтобы в этот код как-то попал результат, написанный мною в переменной result. В общем-то, мы решали эту задачу в предыдущих уроках через коллбэки и подписки. Давайте теперь посмотрим, как это сделать через промисы. 📌 #instr || Фронтендщик

Как вы видите, я записал объект с промисом в переменную promise. В каком-то другом месте кода я могу применить к этой переменной метод then, передав в него функцию с кодом, который должен быть выполнен по завершении асинхронного кода, написанного при создании данного промиса: promise.then(function() { // выполнится при завершении асинхронного кода  }); 📌 #instr || Фронтендщик

Промис представляет собой объект, в который параметром передается функция, внутри которой нужно размещать наш асинхронный код: let promise = new Promise(function() {  // асинхронный код }); 📌 #instr || Фронтендщик

Введение в промисы в JavaScript Вы уже знаете, что использование коллбэк-модели асинхронности легко приводит к ситуации callback hell. Поэтому в JavaScript была введена новая модель под названием промисы (promise). Давайте изучим эту модель. 📌 #instr || Фронтендщик

Код получился красивый и без callback hell, однако, мы вернулись к двум нашим проблемам: порядок картинок не гарантирован и невозможно поймать момент загрузки всех картинок. И решения в данной ситуации нет: невозможно запустить цикл, использовать внутри него асинхронную функцию, а потом поймать момент завершения всех функций цикла. Либо вам не нужно ловить этот момент и приведенный выше код вам подойдет либо добро пожаловать в callback hell. 📌 #instr || Фронтендщик

Асинхронная загрузка картинок в цикле в JavaScript Пусть пути к картинкам хранятся в массиве: let arr = ['img1.png', 'img2.png', 'img3.png'];  Мы можем загрузить эти картинки в цикле: for (let path of arr) { loadImage(path, function(image, err) {  document.body.append(image); }); } 📌 #instr || Фронтендщик

Мы решили обе описанные проблемы. Однако, получили взамен другую. Пока она еще не сильно видна, но представьте себе, как будет выглядеть наш код, если в нем будет загрузка не трех, а, скажем, десяти картинок, плюс будет добавлена обработка исключений. В результате код станет крайне нечитаемым: сложность кода лавинообразно нарастает при вложенности коллбэков друга. Такая ситуация называется callback hell - ад коллбэков. 📌 #instr || Фронтендщик

Окей, переделаем код: 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 || Фронтендщик

С этим кодом кое-что не так. Дело в том, что картинки будут добавляться в bodyпо мере их загрузки. To есть никто не гарантирует нам, что картинки будут добавлены именно в том порядке, который нам нужен. Есть еще кое-что. Пусть мы хотим сделать что-нибудь, когда будут загружены все три картинки. В нашем коде мы просто не сможем поймать этот момент, так как все три картинки грузятся независимо. 📌 #instr || Фронтендщик