データを処理する複数のステップ、JS /角度のパターンは何ですか？

Question

データを処理する手順がほとんどないとします。最初にダウンロードしてから何度も何度もやります。 C＃のコードは、いくつかの行のように見えるでしょう - 各ステップごとに1つ。アンギュラ私はJSで、今理解したよう

/それは次のようになります。

function prepateAndGo() { 
 

 
    loadData() 
 
     .$promise.then((loadedData) => { 
 

 
      prepareData(loadedData).$promise().then((preparedData) => { 
 
      
 
       preprocessData(preparedData).$promise().then((preprocessedData) => { 
 

 
        andDoSmthElse(preprocessedData).$promise().then((andDoSmthElseData) => { 
 

 
         makeupData(andDoSmthElseData).$promise().then((makeupedData) => { 
 

 
          Console.log('finally, everything is loaded and processed, lets go'); 
 

 
         }); 
 
        }); 
 
       }); 
 
      }); 
 
     }); 
 
}

がより美しいパターンではないですか？スパゲティに対する一般的な解決策は何ですか？あなたのコールバックの各以来

Answer 1

あなたがする必要があることは、約束を返すユーティリティ関数を作成することです。例：

function prepareData(data){ 
    // do something with data and return a promise 
    return $q.when(data);   
} 

次に、約束をうまく組み合わせることができます。たとえば、次のように

loadData() 
    .then(prepareData) 
    .then(preprocessData) 
    .then(andDoSmthElse) 
    .then(makeupData) 
    .then(function(madeData){ 
     Console.log('finally, everything is loaded and processed, lets go'); 
    }); 

注：コードは、私の頭の上からですが、

Answer 2

自身が約束を返し、あなたはそのような.then()呼び出しチェーンにすることができます

function prepateAndGo() { 

    loadData().$promise() 
     .then(loadedData => prepareData(loadedData).$promise()) 
     .then(preparedData => preprocessData(preparedData).$promise()) 
     .then(preprocessedData => andDoSmthElse(preprocessedData).$promise()) 
     .then(andDoSmthElseData => makeupData(andDoSmthElseData).$promise()) 
     .then(makeupedData => { 
      Console.log('finally, everything is loaded and processed, lets go'); 
     }); 

} 

さらに

、as Matt Way mentioned in his answerをあなたが直接約束を返すようにAPIを変更した場合、あなたは矢印を取り除くことができますすべて機能します。

Answer 3

はあなたがについてpromise chainingを聞いたことがあり始める必要がありますか？

action1() 
    .$promise.then((result2) => action2(result2)) 
    .$promise.then((result3) => action3(result3)) 
    .$promise.then((result4) => action4(result4)) 
    .$promise.then((result5) => action5(result5)) 
    .$promise.then((finalResult) => console.log('Finally got it.')) 

Answer 4

これらのチェーンをより読みやすくする簡単な方法は、一部のロジックを機能を分離するために移動することです。だから、：

function prepareAndGo() { 
    loadData() 
    .then(processData) 
    .then(doSomethingElse) 
    .then(whatever) 
    .catch(err => console.log(err)) 
} 

function processData(data) { 
    ... 
    return Promise.resolve(stuff) 
} 

function doSomethingElse(data) { 
    ... 
    return Promise.resolve(stuff) 
} 

function whatever(data) { 
    ... 
    return Promise.resolve(stuff) 
} 

もう少しカッティングエッジなアプローチは、あなたがhereもっと読むことができasync/awaitパターンを、使用することです。サポートが不足しているため、現在のところ、トランスペアラなしでasync/awaitを使用することは実際には不可能です（ただし、間もなく変更される予定です）。

しかし、今日のこのパターンは、generatorsで利用できます。これは、javascript ES2015仕様で導入された新機能です。約束ライブラリBluebirdは、coroutineというメソッドを提供し、ジェネレータ関数をラップし、それらをasync関数のように動作させます。ここでは例です：

var Promise = require("bluebird") 

let loadData = Promise.coroutine(function* (data) { 

    let preparedData  = yield prepareData(data) 
    let preprocessedData = yield preprocessData(preparedData) 
    let andDoSmthElseData = yield andDoSmthElse(preprocessedData) 
    let madeUpData   = yield makeupData(andDoSmthElseData) 

    console.log('Everything is loaded and processed!') 

    return madeUpData 
})