Как составить цепочку из промисов и Promise.all?

Question

[ravshan selimov]

Всем привет.
Задача следующая :

Есть массив объектов

this._imagesUrl = [
  {
    black : 'url',
    red : 'url',
    ...

  },
  ... 
]

Объекты имеют одинаковую структуру color : url
Нужно реализовать загрузку изображений в новый массив _images, чтобы он выглядел так

this._images = [
 {
    black : image,
    red : image,
    ...
  },
  ...
]

Порядок с _imagesUrl должен быть одинаковый

Помогите реализовать загрузку, сейчас код выглядит так

loadImages(){

		let images = [];
		

		this._imagesUrl.forEach( elem => {

			let promises = [];

			for (let prop in elem) {
				let promise = new Promise( resolve => {

					let image = new Image();
					image.setAttribute('src', elem[prop]);

					let obj = { [prop] : image };
					image.onload = () => resolve(obj);  //правильно ли так делать?

				})

			}


			let promise = Promise.all(promises);
                        // здесь надо добавить кода чтобы  в images передавать объект со структурой color : image
			images.push(promise);
		})



		Promise.all(images)
		.then( images => {
			this._images = images;
			this._imagesLoaded = true;
		})
		.catch( () => this.loadImages() );


	}

также надо изменить немного(как не знаю), Pomise.all() возвращает промис а я это не учёл при создании _images.

Answer 1

[ravshan selimov]

Решил проблему разделив логику загрузки и добавления изображений

loadImages(){

		let promises = [];


		this._imagesUrl.forEach( elem => {
			let obj = {};


			for (let prop in elem) {
				let promise = new Promise( resolve => {

					let image = new Image();
					image.classList.add('plane-image');
					image.setAttribute('src', elem[prop]);

					obj[prop] = image;
					image.onload = () => resolve(image); 

				})

				promises.push(promise);
			}

			
			this._images.push(obj);
		})



		Promise.all(promises)
		.then ( () => this._imagesLoaded = true )
		.catch( () => this.loadImages() );
	}