127.Promiseチェーン

#promiseなしとありで比較しながら書いてみよう

promiseなし

promiseなし

function sleep(callback, val) {
  setTimeout(function() {
    console.log(val++);
    callback(val);
  }, 1000);
}

sleep(function(val) {
  sleep(function(val) {
    sleep(function(val) {
      sleep(function(val) {
  
      }, val);
    }, val);
  }, val);
}, 0);

promiseあり

promiseあり

function sleep(val) {
  return new Promise(function(resolve) {
    setTimeout(function() {
      console.log(val++);
      resolve(val);
    }, 1000);
  });
}

sleep(0).then(function(val) {
  return sleep(val);
}).then(function(val) {
  return sleep(val);
}).then(function(val) {
  return sleep(val);
}).then(function(val) {
  return sleep(val);
}).then(function(val) {
  return sleep(val);
})

<大まかな流れ>

1.関数を実行する
2.Promiseが生成
3.setTimeout内での処理を行う
4.then以下に1を再び実行する処理を行う

<もう少し細かくみると>

1.sleep(0).を実行
2.return new Promiseとして、Promiseが生成される。　
3.resolveを引数にして、Promise(関数)をいれる
4.setTimeoutを記述し、第一引数にresolve(val)を実行
5.実行するとthen以下のsleep(val)が返えるので再び1に戻る

キーポイント

＊非同期処理を続けるには,Promiseを生成し続けなければならない
→そのためPromiseを返却し、常に静止しなければならない