javascript - 如何使用 Promise.all() 推迟返回在函数内部构建的数组？

Question

下面我尝试将一个值(一个数组)分配给一个局部变量。我正在调用一个返回数组的函数来获取该值。问题是第二个函数中的 Promises 直到数组返回给调用者之后才得到解析。我尝试过在 retArray 上使用 Promise.all() ，但它对我不起作用。当我 console.log() 输出我的 someobject 对象时，arrOfTitles 字段永远不会打印出来，因为调用 SkywalkerTitles() 返回一个空数组。

您可以运行代码 here 。

那么如何让 someObject.arrOfTitles 从 SkywalkerTitles() 获取标题数组？

function SkywalkerTitles(){
  let retArray = [];

  fetch('https://swapi.co/api/people/')
  .then(function(response){
    response.json()
    .then(function(result){
      return result.results[0];
    })
    .then(function(result){
       result.films.forEach(function(film){
        fetch(film)
        .then(function(response){
          response.json().then(function(result){
            console.log(result.title);
            retArray.push(result.title);
          });
        });
      })
      .catch(function(error){
        console.log(error)
      });
    });
  })
  .catch(function(error){
    console.log(error)
  });

}

function UseReturnedArray() {
  let someObject = { aThing: '', anotherThing: '', arrOfTitles: null };

  someObject.aThing = 'Thing One';
  someObject.anotherThing = 'Thing Two';
  someObject.arrOfTitles = SkywalkerTitles();

  console.log('Object With Returned Array:\n\n', JSON.stringify(someObject, null, 2));
}

UseReturnedArray();

Answer 1

尽管 @Svenskunganka 的答案是完整且有值(value)的，但如果您的环境尚不支持 async/await 并且您不想使用转译器，则可以选择 - 因为您已经部分熟悉 Promises，所以这段代码不应该看起来像外国人:p

你的主要问题是SkywalkerTitles实际上没有返回任何东西(你声称它返回一个空数组，它实际上没有return语句，因此返回的值是未定义

我还删除了 .catch 代码，因为您的代码实际上会导致问题，因为您的代码处理拒绝，但在链的更下游，代码会期望数据是实际上有效!几乎总是需要一次捕获

function SkywalkerTitles() {
    return fetch('https://swapi.co/api/people/').then(function (response) {
        return response.json();
    }).then(function (result) {
        return result.results[0];
    }).then(function (result) {
        return Promise.all(result.films.map(function (film) {
            return fetch(film).then(function (response) {
                return response.json();
            }).then(function (result) {
                return result.title;
            });
        }));
    });
}

function UseReturnedArray() {
    SkywalkerTitles().then(function (arrOfTitles) {
        var someObject = {
            aThing: '',
            anotherThing: '',
            arrOfTitles: arrOfTitles
        };
        console.log('Object With Returned Array:\n\n', JSON.stringify(someObject, null, 2));
    }).catch(function(reason) {
        console.log(reason);
    });
}
UseReturnedArray();

请注意与您的相比， promise 链如何扁平化，并使用 Array#map 而不是 Array#forEach + Array#push