JavaScriptにおけるプロミスチェーン

次のようなプロミスがあるとします:

javascriptlet promise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('string');
  }, 3000);
});

プロミスが完了したら、その結果をコンソールに 出力しましょう:

javascriptpromise.then(
  function(result) {
    console.log(result); // 'string' を出力します
  }
)

では、結果をすぐに出力するのではなく、 何らかの変更を加えて return を通じて返してみましょう:

javascriptpromise.then(
  function(result) {
    return result + '!';
  }
);

この場合、私たちの then の結果に対して さらにもう一つの then を適用することで、 チェーン を形成することができます。このとき、 次のメソッドには、前のメソッドが return で 返したものが渡されます:

javascriptpromise.then(
  function(result) {
    return result + '!';
  }
).then(
  function(result) {
    console.log(result); // 'string!' を出力します
  }
);

このようにして、任意の長さのチェーンを 構築することができます:

javascriptpromise.then(
  function(result) {
    return result + '1';
  }
).then(
  function(result) {
    return result + '2';
  }
).then(
  function(result) {
    return result + '3';
  }
).then(
  function(result) {
    console.log(result); // 'string123' を出力します
  }
);