Question

我正在尝试使用API调用获取构建数据，然后用于进行另一个API调用。我无法弄清楚这些承诺是如何运作的。我对Promise数组做错了什么？

http://jsbin.com/pidilokexi/edit?js,console,output

function getFruits() {
  return new Promise(resolve => {
    setTimeout(function () {
      resolve(["apple", "orange", "banana"]);
    }, 1000);
  })
}

function processFruit(fruit) {
  return new Promise(resolve => {
    setTimeout(function () {
      resolve({ processedItem: fruit + "s" });
    }, 1000);
  })
}

function processAllFruits(fruits) {
  let newFruits = [];
  fruits.forEach(fruit => {
    processFruit(fruit).then(newFruit => {
      newFruits.push(newFruit);
    })
  })
  return newFruits;
}

function buildFruits() {
  return getFruits().then(fruits => {
    return processAllFruits(fruits);
  })
}



var fruits = buildFruits();

Promise.all(fruits).then(r => {
  console.log(r);
})

fruits.then(r => {
  console.log(r)
})

Answer 1

Promise.all()是您正在寻找的。具体来说，在这个函数中：

function processAllFruits(fruits) {
  let newFruits = [];
  fruits.forEach(fruit => {
    processFruit(fruit).then(newFruit => {
      newFruits.push(newFruit);
    })
  })
  return newFruits;
}

您正在同步返回newFruits阵列，而不是等待单个processFruit承诺解析。 Promise.all()接受一系列承诺，并在所有给定的承诺解决时解决：

function processAllFruits(fruits) {
  let newFruits = fruits.map(processFruit)

  return Promise.all(newFruits);
}

这里是working jsbin。

Answer 2

你的processAllFruits应该等待所有的承诺。现在它以这种方式工作： 1）创建newFruits 2）开始加工每种水果 3）返回newFruits（仍为空数组） 4）完成处理并填充newFruits（由于已经返回，因此不会做任何事情）

嵌套的承诺数组。我不明白的是什么？

2 个答案: