JavaScript 非同期処理 Promiseをループする
JavaScriptで複数のリソースの読み込みやWebスクレイピング等によるリソース取得時に「XMLHttpRequest」を使い非同期で読み込みたい時があります。 最近ではPromiseで非同期処理をするのが一般的ですが`for`の中にPromiseを入れても意味がありません。 ``` for(i=0; i < 10; i++){ let a = new Promise((resolve, reject)=>{ setTimeout(()=>{ console.log("foo"); return resolve(); }) }) } console.log("bar"); ``` #### Output ``` bar foo(10) ``` この様にPromise自体は実行されますが、forの中身が実行されている間に次の`console.log("bar");`が実行されてしまいます。 ## 解決方法 条件が合うまで同じ関数を呼び出す方式でループを実現します。 ``` function PromiseLoop(a, c, b = 0){ if(b >= a){ return Promise.resolve(); }else{ return c(b).then(()=>{ return PromiseLoop(a, c, b + 1); }); } } ``` * a : 繰り返し回数 * c : 関数 (戻り値は`Promise.resolve()`である必要がある) * b : 条件初期化 引数`c`にはreturnに`Promise.resolve()`を返す必要があります。 Promiseを返さないと`then()`で次の処理が動きません。 ``` return c(b).then(()=>{ return PromiseLoop(a, c, b + 1); }); ``` 引数`b`は特に指定が無い限り初期値を`0`に初期化し
