数珠繋ぎ(チェーン)でデータを渡して、処理をしたい時、Promiseのthenメソッドが便利です。
最初にPromiseを生成することで、thenで繋げて処理をすることができます。
サンプルコードは以下です。
function getStory(v) {
return new Promise(function(resolve, reject) {
resolve(v+'あるところに');
//reject("エラー1");
});
}
// 今回は3を渡しているので、resolveから3が返ってくる
getStory('むかし、むかし、').then(function(result) {
v1.innerHTML = result;
return result + 'おじいちゃんと';
}).then(function(result) {
v2.innerHTML = result;
return result + 'おばあちゃんがいました';
}).then(function(result) {
v3.innerHTML = result;
//throw new Error('エラー2');
}).catch(function(e) {
v_err.innerHTML = e;
});
実行結果
HTML
<div id="demo_info">
<div id="v1"></div>
<div id="v2"></div>
<div id="v3"></div>
<div id="v_err"></div>
</div>
エラー処理もしっかり書くことで、いろんな処理に対応できそうです。
なお、上記ではのPromise内のエラー1は全ての処理が拒否され、thenのエラー2はそのまま処理が続きます。