Как выполнить массив промисов с передачей по цепочке результата?

Question

[raft88]

Всем привет!
есть массив arr промисов, каждый обернут в функцию
каждый имеет вид (упрощенно)

function(result) {
    return new Promise((resolve)=>setTimeout(()=>resolve(result), 1000));
}

есть метод с кодом:

this.method = function () {
        let result = Promise.resolve(data);

        for (let func of this.arr) {
            result = result.then(func);
        }
    };

хотя сами промисы вызываются последовательно с нужной задержкой,
но данные, назовем data, никто дальше по цепочке не видит, как исправить?

Answer 1

[Антон Спирин]

Так:

this.method = function () {  
  return this.arr.reduce((acc, fn) => acc.then(fn), Promise.resolve());
}

Функция вернет результат выполнения цепочного вызова.
Демо: https://jsfiddle.net/t7199xrr/

UPD ваш вариант тоже отлично работает.
Видимо, у вас изначально проблема была в аргументах setTimeout.

Comments

[raft88]

а можете подсказать, что я сделал не так по вашему коду?

let func0 = function () {
            return new Promise(resolve=> {
                setTimeout(()=>resolve(33), 1000);
            });
        };

let func1 = function (x) {
            return new Promise(resolve=> {
                setTimeout((x)=>resolve(x + 1), 1000);
            });
        };
		
let func2 = function (x) {
            return new Promise(resolve=> {
                setTimeout((x)=>resolve(x + 1), 1000);
            });
        };
		
let func3 = function (x) {
            return new Promise(resolve=> {
                setTimeout((x)=>{
                    resolve(x + 1);
                    console.log(x);
                }, 1000);
            });
        };
		
const arr = [func0, func1, func2, func3];

const fn = arr => 
  arr.reduce((acc, fn) => acc.then(fn), Promise.resolve());

console.log(fn(arr));

[Антон Спирин]

raft88, аргумент у setTimeout, вы его задаете, но не передаете. А он x в контексте колбека переопределяет. В вашем случае на undefinded.
Вот это демо должно пролить свет на причину проблемы и ее решение: https://jsfiddle.net/3nt3fbwk/

[raft88]

да, пока вы написали сообщение, я методом пробы нашел ошибку.
В любом случае, спасибо за помощь!
Все работает!

Answer 2

[Александр Косицын]

есть хорошая функция для промисов, называется waterfall
вот ссылочка waterfallJS
я тебе уже сделал якорь где показано.
там все легко, написано нужно по завершению вызвать callback и передать в него первую это ошибка, а все остальные это параметры которые будут передаваться по цепочке

Answer 3

[profesor08]

Используй async, await и твой асинхронный код примет линейный вид и выполнится линейно. И не надо выдумывать всякую хрень с задержками.

Comments

[Антон Спирин]

Вы, похоже, не поняли суть задачи. Цепочный вызов асинхронных функций из массива произвольной длины с передачей параметров между вызовами.
"Хрень с задержками", это самый примитивный способ сделать асинхронный вызов в демонстрационных примерах.

[Антон Швец]

ESlint ругается на await внутри циклов.