Путеводитель по JavaScript Promise для новичков

Для «loadImage» можно было использовать «fetch», он как раз возвращает промис.

loadImage на основе fetch

function loadImage(url){
    return fetch(url)
        .then(response=>response.blob())
        .then(blob=>{
            let img = new Image();
            let imgSRC = URL.createObjectURL(blob);
            img.src = imgSRC;
            return img;
        })
        .catch(err => {
           console.log('loadImage error: ', err, url) 
           throw err;
         });
}


function loadAndDisplayImages(imgList){
    let notLoaded = [];
    let loaded = [];
    let promiseImgs = imgList.map(loadImage);

    return promiseImgs.reduce((prev, curr)=>{
        return prev
            .then(() => curr)
            .then(img => {
               loaded.push(img);
               document.body.appendChild(img)
             })
            .catch(err => {
               notLoaded.push(err);
               console.log('loadAndDisplayImages error: ', err)
            });
    }, Promise.resolve())
        .then(() => ({'loaded' : loaded, 'notLoaded': notLoaded}));
}

loadAndDisplayImages([
  'https://hsto.org/getpro/habr/avatars/7ad/1ce/310/7ad1ce31064020bdb79dd73c755ad5ff_small.jpg',
  'https://hsto.org/getpro/habr/avatars/51e/115/c17/51e115c17cbd25fb4adb16c1e3255a32_small.jpg',
  'https://bad_url',
  'https://hsto.org/getpro/habr/avatars/479/a6e/98d/479a6e98d816f8644ff18513cc26a60e_small.png'
]).then(console.log);

Двусторонний binding данных с ECMAScript-2015 без Proxy

Да, я тоже поначалу думал, что при вводе символов на «инпутах» вызывается setter. Но оказалось все «хитрее», и единственный способ это отследить навесить обработчик на событие. Хотя вызов setter`а для обновления DOM был бы вполне логичен.

Двусторонний binding данных с ECMAScript-2015 без Proxy

Ну так «EventListener» это как раз наоборот — реакция на изменение данных DOM.
Т.е. данные DOM изменяются непосредственно пользователем путем ввода символов и JS тут ни при чем.
Или я вас неправильно понял?

Двусторонний binding данных с ECMAScript-2015 без Proxy

Что значит

нельзя навесить геттер-сеттер на DOM елемент.

А у меня разве ни это самое и делается? Если внимательно посмотрите, то в DOM всё в геттерах и сеттерах

Двусторонний binding данных с ECMAScript-2015 без Proxy

Самое забавное, что MutationObserver не отслеживает изменение данных на input`ах и textarea`ах. И это справедливо в обе стороны JS->DOM, DOM->JS.

Кстати вопрос по '… всегда идет изменение DOM из js'. А как же вводимые пользователем данные?

Двусторонний binding данных с ECMAScript-2015 без Proxy

У вас описана односторонняя привязка. Если начнете расширять функционал — двусторонние привязки, список привязок, асинхронн, DOM, проверки и прочее, то ваш код несомненно разрастется. Но возможно вам удастся все это более лаконично расписать и кода будет поменьше.

Двусторонний binding данных с ECMAScript-2015 без Proxy

Вам, спасибо за комментарий.
Почему ж, некорректно? Мне кажется вполне себе. Да подходы различаются, но цель то одна — связывание данных.
Я тоже надо сказать открытия не делал.

Двусторонний binding данных с ECMAScript-2015 без Proxy

Обложить все и вся пропертями...

— Не понял, что вы имеете ввиду. Если количество кода, тогда конечно смотрится это менее аккуратно, чем простое присвоение. Если вы про дескрипторы, то лишних структур нет, т.к. дескрипторы есть у каждого свойства по умолчанию.

… открытия америки тут нет.

— А никто и не претендует.

Непонятно зачем, во первых это будет тормозить*

— Тоже были такие подозрения, но вроде как речь идет о модификации исходных прототипов. Или сама цепочка тоже влияет. Буду рад если дадите ссылки где почитать.

… есть готовое апи MutationObserver

был не в курсе, спасибо почитаю.