然后在Promise中返回Promise链

Question

我想使用axios获取API，该API返回objectId的数组列表。 获取列表objectId之后，我想使用Promise获取对象的详细信息

我想到这样的事情

var objectDetail = [];

axios.get('apiendpoint/')
.then((response) => {
  var listOfObjectId = response.data;
  var chain = Promise.resolve()
  for (var objectId of listOfObjectId) {
    chain = chain.then(axios.get(`apiendpoint/${objectId}`)
      .then((response) => {
        objectDetail.push(response.data);
      })
    );
  }
  return chain;
}).then((chain) => {
  console.log(chain);
  return chain;
})

上面的代码返回undefined，promise链对象没有传递给then方法调用。 我的方法错误还是我错过了什么？ 谢谢

这是我已阅读的一些堆栈，可能与之相关：

• 使用获取时如何在for循环中动态遍历多个Promise？
• 在for循环中创建一个Promise链

Answer 1

该承诺链条被传递到最后.then ，但承诺链不返回任何东西 ：看你的

.then((response) => {
  objectDetail.push(response.data);
})

该函数不返回任何内容。 如果要在链的末尾使用objectDetail而不引用外部变量，请同样return它：

.then((response) => {
  objectDetail.push(response.data);
  return objectDetail;
})

但请注意

}).then((chain) => {
  console.log(chain);
  return chain;
})

有点多余-除非您只是为了log结果，否则最好完全将其保留。

如果使用Promise.all代替，则代码将更清晰：

axios.get('apiendpoint/')
  .then(({ data }) => Promise.all(
    data.map(objectId => (axios.get(`apiendpoint/${objectId}`)
      .then(res => res.data)
    ))
  ));

Answer 2

您不能兑现承诺。 如果您从then( onfulfilled)处理程序中返回承诺，则承诺代码将等待结算返回的承诺，然后再解决或拒绝具有返回的成功或失败值的链中的下一个承诺。

所以

//...
  return chain;
}).then((chain) => {
  console.log(chain);
  return chain;
})

令人困惑-该chain中的第一行返回承诺不会传递到下一个then处理。 成功完成后，传递的是chain最后一个承诺的fulfilled价值。 但是，由于chain处理程序不会显式返回值，因此它将是undefined 。

选项包括：

• 出于调试目的，可以选择在完整构造chain后将其值记录下来，然后再从第一个then处理程序返回chain 。
• 忽略传递到最终的实际值then成功处理程序，并用它被称为指示objectDetail包含有效的数据，或

• 在第一个then处理程序中创建objectDetail ，并从构造期间添加到chain中的promise处理程序中返回它。

   axios.get('apiendpoint/') .then((response) => { var listOfObjectId = response.data; var objectDetail = []; var chain = Promise.resolve() for (var objectId of listOfObjectId) { chain = chain.then(axios.get(`apiendpoint/${objectId}`) .then((response) => { objectDetail.push(response.data); return objectDetail; // return details array }); } return chain; }) .then( objectDetail) => { // process objectDetail }) .catch(err=> console.log(err);); 

上面的方法顺序地处理详细请求。 可以使用Promise.all ，以便同时发出详细请求。