BLOG

非同期処理メモ⑤(プロミスチェーン)

おはようございます。

最近4時に目は覚めるのですが、二度寝してしまいがちになってきて冬眠の季節やしなと季節を言い訳にしちゃってるポンコツことどうもハヤトワンです。

アップルウォッチの目覚ましだとアラームを勝手に自分で止めちゃうので、起き上がらないとアラームを止めれない状態に明日からしてやろうと思います👹

さて、また引き続き非同期処理について。

今日はプロミスチェーンについてのメモ

プロミスチェーンとは

Promiseを使って非同期処理を順次実行すること

非同期A

非同期B

非同期C

まずコールバック関数を用いた場合のコード

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を使った処理に書き換える

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


sleep(0);

コンソール

0

まずnew PromiseでPromiseのインスタンス化を行う

その中のコールバック関数にはresolveとrejectを使う(今回はresolveのみ)

callback(val)をresolve(val)に置き換え

function sleep(callback,val….のcallbackがいらなくなる

new Promiseをsleepの呼び出しもとの返却するためにreturnをつける

これにthenとreturn sleep(val);を加える

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


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

コンソール

0
1

こうすることでsleepが実行されたタイミングで、さらにnew Promiseが返却されるのでthen(function(val){return sleep(val);})のreturnにnew Promiseがセットされる

非同期の処理をつなげるためには、thenメソッドの中のコールバック関数のreturnにPromiseのインスタンスをセットすることを覚えておく

これ非常に大事とのこと。

ということで続きはまた明日。

今日も良い1日を!