PromiseをArray#reduceで直列に実行する

promiseを順番に実行するを読んで試してみた。 簡単にできるのかな、と試してみたらいくらかはまったりもしたのでそれもメモ。

then

thenに渡す関数は、渡したときに実行されるらしい。

function a() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      console.log(1);
      resolve(1);
    }, 300);
  });
}

function b() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      console.log(2);
      resolve(2);
    }, 100);
  });
}

Promise.resolve().then(a()).then(b());
2
1

Promiseを返す関数を、Promiseを返す関数を返すようにしてみる。

function a() {
  return function() {
    return new Promise(function(resolve, reject) {
      setTimeout(function() {
        console.log(1);
        resolve(1);
      }, 300);
    });
  };
}

function b() {
  return function() {
    return new Promise(function(resolve, reject) {
      setTimeout(function() {
        console.log(2);
        resolve(2);
      }, 100);
    });
  };
}

Promise.resolve().then(a()).then(b());
1
2

想定した順番通りになった。

Array#reduce

Promiseの配列を順番に実行してみる。

function a(n, timeout) {
  return function() {
    return new Promise(function(resolve, reject) {
      setTimeout(function() {
        console.log(n);
        resolve(n);
      }, timeout);
    });
  };
}

var promises = [
  a(1, 300),
  a(2, 200),
  a(3, 100)
];

promises.reduce(function(prev, curr, index, array) {
  return prev.then(curr);
}, Promise.resolve());
1
2
3

順番に実行できたみたいだ。


JavaScript Promiseの本をもう一度読み直してみた方が良いかもしれない。 若干不安に思ってるところがある。ちょうどthenの所に実行に関する記述があるし。