Promise.all（）を使用して関数内に構築されている配列を返すのを延期するにはどうすればよいですか？

Question

以下、配列の値をローカル変数に代入しようとしています。私はその値を取得する配列を返す関数を呼び出しています。問題は、2番目の関数のPromisesが、配列が呼び出し元に返されるまで解決されないということです。私はretArrayにPromise.all()を使用しようとしましたが、それは私のために決して働きません。私がconsole.log()私のsomeobjectオブジェクトの場合、SkywalkerTitles()への呼び出しが空の配列を返すので、arrOfTitlesフィールドは決して印刷されません。

コード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の回答は完全で価値があります。また、あなたはすでにPromisesに部分的に精通しているので、コードは、外国見てはいけない：P

はあなたの主な問題は、SkywalkerTitlesが実際にあなたが、それは空の配列を返すと主張（何も返さない、それは実際にはreturn文を持っていないということですので、返される値はundefined

です

.catchコードも削除しました。なぜなら、実際に問題が発生していた場所でコードが拒否反応を処理しているためですデータが実際に有効であるとコードが期待するチェーンを所有しています！約束は正しくそうでない配列（に解決された場合の約束チェーンはあなたの、そしてArray#map代わりのArray#forEach + Array#push

Answer 2

あなたは本当にあなたのコードはかなりをクリーンアップし、より分かりやすく可能性がある、のawait /非同期を活用する必要があります。これはへの外国人に見える場合

async function SkywalkerTitles() { 
    let character = await fetch('https://swapi.co/api/people/').then(res => res.json()).then(res => res.results[0]) 
    return await Promise.all(character.films.map(async (film) => { 
    return await fetch(film).then(res => res.json()).then(res => res.title) 
    })) 
} 

async function UseRetrunedArray() { 
    try { 
    let someObject = { 
     aThing: '', 
     anotherThing: '', 
     arrOfTitles: await SkywalkerTitles() 
    } 

    console.log(someObject) 
    } catch (e) { 
    console.error(e) 
    } 
} 

UseRetrunedArray() 

はhttps://repl.it/Lc2f/2

を参照してください。あなたは、どのようにしてasync/awaitとPromiseが一緒に動作するかを少しお読みになることをお勧めします。