用途
新着
履歴
分類

JS 繋げて処理を実行

JS 繋げて処理を実行
functionなどの処理を複数続けて値を渡して実行したいときのサンプルです。

数珠繋ぎ(チェーン)でデータを渡して、処理をしたい時、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はそのまま処理が続きます。

公開 2021-05-31 01:33:48
更新 2021-05-31 01:41:29
このページの二次元コード
JS 繋げて処理を実行

同じカテゴリーのサンプル

人気のサンプル

search -  category -  about
© 2024 kipure
Top