私はこのコードを持って約束、これはデータを保存しない

Question

に私の配列にデータをプッシュしようとしたとき：

let splatshArtData = []; 
splatshArt.getSplatchArt(participants[i].championId).then((splatshArtUrl) => { 
    splatshArtData.push(splatshArtUrl);     
}); 
console.log(splatshArtData); 

を、私は私の配列に「splatshArtUrl」を追加したいが、これは動作しません。 、私は何も印刷されないデータを印刷しようとすると、私はそれを行う方法がわからない、任意のアイデア？

Answer 1

これを試してみてください：then実行内部

let splatshArtData = []; 
splatshArt.getSplatchArt(participants[i].championId).then((splatshArtUrl) => { 
    splatshArtData.push(splatshArtUrl); 
    console.log(splatshArtData);     
}); 

機能を右getSplatchArtが、それは約束です解決非同期関数の後に、項目が配列に追加される前に、それがconsole.logを実行していたので。

Answer 2

あなたがここに直面している問題は、getSplatchArt戻り約束し、約束は解決に時間がかかるということです。したがって、splatshArtData.push(splatshArtUrl);がconsole.logの前に実行されることを保証することはできません。

ソリューションは、約束のコールバック内に約束から返されたデータを必要とするすべてのロジックを移動することです。これにはもちろん、他の関数への呼び出しも含まれます。

// function to process the splashArtData - will be called from the promise 
// when the promise is resolved. 
function processSplashArt(data) { 
    // this will now print as you are expecting 
    console.log(data); 
} 

let splatshArtData = []; 

splatshArt.getSplatchArt(participants[i].championId).then((splatshArtUrl) => { 
    splatshArtData.push(splatshArtUrl);  

    // pass the splashArtData to the callback function - it's now ready 
    processSplashArt(slashArtData);   
}); 

Answer 3

JavaScriptは同期しているため、コードの各行は互いに直後に実行されます。

我々は

1. let splatshArtData = []; 
2. splatshArt.getSplatchArt(participants[i].championId).then((splatshArtUrl) => { 
3.  splatshArtData.push(splatshArtUrl);     
    }); 
4. console.log(splatshArtData); 

の下にあなたが実際にそれが順に実行される一方、それは、1、2、3、4の順に実行されることを想定しているように行番号を使用してコードに注釈を付ける場合1、2、4、3それはなぜですか？ JavaScriptは同期式であり、2行目の関数は非同期であるため、処理を続行するには待つ必要があります。そうしないと、splatshArtData変数はデータがまだフェッチされていないため空の配列になります。

あなたが取得したデータを返し、別の関数でそれを使用したい場合、あなたはそれを混在させることはできませんでしょう別の答えで提案されているように、コールバックが、その代わりにチェーン約束とフェッチ機能から解決された値を使用しますデータ。あなたのコードを見てみると

function getSplatshArt() { 
    let splatshArtData = []; 

    //Return a promise 
    return splatshArt.getSplatchArt(participants[i].championId).then((splatshArtUrl) => { 
     console.log(splatshArtData); //this will log out the data 
     splatshArtData.push(splatshArtUrl); 
     return splatshArtData; //this will be the resolved value from the promise 
    }); 
} 

//Call the function and access the resolved data in the .then() block 
getSplatshArt() 
    .then(data => { 
     console.log(data); //this is the data returned from the getSplatshArt function 
    }); 

、私はあなたがIDの配列をループしている印象を受ける、とあなたは、一度にこの文句を言わない作業を複数の値を取得したい場合は、複数の約束を処理する必要があるため。しかし、それはもう一つの質問です。私は、あなたがそれについて尋ねる前に、自分の研究についてもっと研究すべきだと思います。