Help us understand the problem. What is going on with this article?

【JavaScript修行】promiseループですごい詰まった

More than 1 year has passed since last update.

何に詰まったかというと、forループ内でプロミスを回そうとして全然上手くいかなかったんです。

function(){
   for(let i=0,i<DATA_DAYS;i++){
      fetch(~~)
      .then(res=>
     //~~~省略~~~

これじゃ上手く行きませんよね。
全部のforが回ってから動かす、っていうのがどうも難しくて悪戦苦闘。そしてこの記事を見つけました。

https://qiita.com/progre/items/5666f4a333cc2d032d15
まさに探していた内容が!
forでとった1つ1つのプロミスをPromise.allを使って
確認するというものです。

var promises = [];
for (var i = 0; i < takusan; i++) {
    promises.push(omotaiPromise(i));
}
Promise.all(promises)
    .then(function (results) {
        // results配列の各要素で結果が取れる
    });

これを参考にしつつ、見事抜き出したかった配列を作ることができました。

完成
let promises = [];
for(let i=0;i<DATA_DAYS;i++){
  promises[i]=
    fetches.fetchNHK(i)
    .then(res=>{
      count[i] = res.list.e1.length;
      day[i] = moment(i,'days').format('MM月DD日');
    })
}

Promise.all(promises)
.then(res =>{
// 以下配列を使った処理
}

すごいぜ!

追記 async/awaitでかく

async/awaitでかくとかなりにスッキリとしたコードになりました。

async/await
async function forFethches(){
  for(let i=0;i<DATA_DAYS;i++){
      await fetches.fetchNHK(i)
      .then(res=>{
        count[i] = res.list.e1.length;
        day[i] = moment(i,'days').format('MM月DD日');
      })
  }
}

forFethches()
.then(res =>{
   //配列に対しての処理
})

async/awaitも使いこなせるようにならないとな、と思いました。
@megmism さんありがとうございました!

irico
新米フロントエンドエンジニアです。 得意なのはギターを弾くこと、苦手なことは運動です。 ゲーム(特にノベル物)が趣味です🎮
wiz_inc
Wizは、最新のIoTやICTサービスをお客様に届ける「ITの総合商社」です
http://012grp.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away