BLOG

非同期処理メモ⑥

おはようございます。

僕は普段使っているマウスはマジックマウスで、スクロールとかのあの感じがたまらなく心地良く感じるアップル信者の成れの果てみたいな風になっているのですが、今職場と自宅にマジックマウスを持ち運びしているのに少々面倒くささを感じてきて(マジックマウス使いたいが為に)、

勢いで先程マジックトラックパッドをポチりました(マウスちゃうんかい)

appleシリコン搭載のimacが出たらすぐ買おうと思っているのできっとマウスはそこで自然についてくるから、それやったらトラックパッド買っとこっていうノリでございます。

あー、届くの楽しみ。

ということで、本題。

Promiseと並列処理

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

Promise.all([sleep(2),sleep(3),sleep(4)])
.then(function (data){
  console.log('end');
});

コンソール

2
3
4
end

こうすると、Promise.allが反復可能オブジェクトである配列に格納されたPromiseのインスタンスが全て完了するまで、次のthenメソッドを待つことになる。

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

Promise.all([sleep(2),sleep(3),sleep(4)])
.then(function (data){
  console.log('end');
});
sleep(0).then(function(val){
  return Promise.all([sleep(2),sleep(3),sleep(4)]);
}).then(function(val){
  console.log(val);
  return sleep(val);
}).then(function(val){
  return sleep(val);
})

コンソール

0
② 2
② 3
4
end
4
(3) [3, 4, 5]
2 NaN

このPromise.all自体もPromiseののインスタンスを返すのでreturnのあとにもってくることによって次のthenメソッドがPromiseが全て完了するまで処理を待つことになる。

console.log(val)でみると[3, 4, 5]のようにPromise.all([sleep(2),sleep(3),sleep(4)]);の戻り値が返ってきてることが分かる。

このように直列処理→並列処理→直列処理というのが実装できる。

ポイントは反復可能オブジェクトの中に(sleep(2)など)、Promiseのインスタンスを返すということ。

sleepを実行するとnew PromiseでPromiseのインスタンスが返ってくるのでそれを配列に格納し、Promise.allで呼ぶと、これらのPromiseが全てresolve(解決)するまでは次の処理には移らない。

これがよく使われる並列処理のPromise.all

うん、むずい!

だからなんやねん。ってところがまだ理解できないので分かるようになるまで頑張ります。

ということで今日はここまで。

今日も良い1日を!