Question

想象一下，你有一个异步过程，它是一系列n个异步步骤：

function step1(item){
  return new Promise((resolve, reject)=>{
    setTimeout(()=>{
      resolve('step 1 fort item ' + item);
    });
  });
}

function step2(item){
  return new Promise((resolve, reject)=>{
    setTimeout(()=>{
      resolve('step 2 for item ' + item);
    },1000);
  });
}

function step3(item){
  return new Promise((resolve, reject)=>{
    setTimeout(()=>{
      resolve('step 3 for item ' + item);
    },1000);
  });
}

function processItem(item){
  let steps = [step1, step2, step3];
  return steps.reduce((current, next) => {
    return current.then(res => {
      console.log(res);
      return next(item);
    }).then(res => {
      console.log(res);
    });
  },Promise.resolve());
}

所以，现在你有一个items数组，并且你想要处理所有应用函数processItem的项目。但是对于限制，所有进程必须按顺序执行，一个进程在前一个进程完成时开始。

好吧，如果我以这种方式实现它：

let items = [1, 2, 3];
items.map(i => processItem(i)).reduce((p, next) => {
  return p.then(() => {
    return next;
  });
}).then(() => {
  // all finished
});

你得到这个输出：

step 1 for item 1
step 1 for item 2
step 1 for item 3
step 2 for item 1
step 2 for item 2
step 2 for item 3
step 3 for item 1
step 3 for item 2
step 3 for item 3

只需要3秒，而不是预期的9。

同时如果你实现它避免地图步骤，你会得到预期的结果：

let items = [1, 2, 3];
items.reduce((promise, nextItem) => {
  return promise.then(() => {
    return processItem(nextItem);
  });
}, Promise.resolve()).then(() => {
  // all finished
});

结果：

step 1 for item 1
step 2 for item 1
step 3 for item 1
step 1 for item 2
step 2 for item 2
step 3 for item 2
step 1 for item 3
step 2 for item 3
step 3 for item 3

预计需要9秒。

为什么会这样？我认为当你将一个promise返回函数映射到一个数组时，你得到一个promises数组，因此，reduce anonymous函数的first和seconds参数是promises，你可以像我在上面第一个例子中那样行事。我对此有点困惑。

Answer 1

.map正在调用传入其中的函数，如果您不希望在此步骤中调用processItem，则需要将其再次包装，即

let items = [1, 2, 3];
items.map(i => () => processItem(i)).reduce(
    (p, next) => p.then(next),
    Promise.resolve()
).then(() => {
    // all finished
});

Answer 2

谢谢@Paul S。

以你的答案为基础，我认为我更愿意包装原始的processItem函数：

function processItem(item){
  return function(){
    let steps = [step1, step2, step3];
    return steps.reduce((current, next) => {
      return current.then(res => {
        console.log(res);
        return next(item);
      }).then(res => {
        console.log(res);
      });
    },Promise.resolve());
  }
}

然后map.reduce保持清洁：

items = [1, 2, 3];
items.map(i => processItem(i)).reduce((p, next) => {
    return p.then(() => {
        return next();
    });
}, Promise.resolve()).then(() => {
    // all finished
});

为什么这个地图减少Promises数组不起作用，但只是减少它呢？

2 个答案: