JavaScriptの関数を流すベストプラクティス

Question

私はリクエストからデータを受け取り、それを表示する前に、受け取った生のコンテンツをadd/format/generate/orderのように処理します。

ここ

私がデータを受信方法、およびどのように私はprocessData機能

this.httpService.get(`this/is/my/url`, body).then((data) => { 
    this.processData(data).then((result) => { 
     this.data = result; 
    }, (error) => { 
     this.error = error; 
    }); 
}, (error) => { 
    this.error = error; 
}); 

に送っはprocessData機能が約束関数を呼び出す必要があります。
私はprocessData関数を記述するための2つの方法を参照してください。

function processData(data) { 
    step1().then((result) => { 
     step2().then((result) => { 
      step3().then((result) => { 
       step4(); 
       return data; 
      }, (error) => { 
       reject(error); 
      }); 
     }, (error) => { 
      reject(error); 
     }); 
    }, (error) => { 
     reject(error); 
    }); 

    function step1() { 
     //... 
    } 

    function step2() { 
     //... 
    } 

    function step3() { 
     //... 
    } 

    function step4() { 
     //... 
    } 
} 

第二の方法

まず道

function processData(data) { 
    return new Promise((resolve, reject) => { 
     step1(); 

     function step1() { 
      this.myService.yolo(data).then({ 
       //... 
       step2(); 
      }, (error) => { 
       reject(error); 
      }); 
     } 

     function step2() { 
      this.myService.foo(data).then({ 
       //... 
       step3(); 
      }, (error) => { 
       reject(error); 
      }); 
     } 

     function step3() { 
      this.myService.bar(data).then({ 
       //... 
       step4(); 
      }, (error) => { 
       reject(error); 
      }); 
     } 

     function step4() { 
      //... 
      resolve(data); 
     } 
    }); 
} 

を第二の方法は、あなたドンので、私は、より論理的に感じさせます何が起こっているのかを理解するために、step関数の内容を見る必要はありませんが、とても混乱します！
10ステップでは、これは読めません。

だから私はそれを行うには良い方法が何だろうと思っていた！

Answer 1

あなたが約束を使用している方法から欠落重要なことは、あなたがあなたが有益な方法で一緒に約束をチェーン方法であなたのthenコールバックから何かを、返していないです。

あなたprocessDataは次のようになりますしない限り、彼らは複雑だと、当然のことながら、意味...

function step1() { 
    return this.myService.yolo(data).then(result => { 
     return transformedResult; 
    }); 
} 

：手順は次のようになり

function processData(data) { 
    step1().then(step2).then(step3).then(step4); 

    function step1() { 
     //... 
    } 

    // ... 
} 

を...

function processData(data) { 
    return this.myService.yolo(data) 
     .then(result => { 
      return /*...`result` transformed in some way...*/; 
     }) 
     .then(result => anotherAsyncCall(result)) 
     .then(result => { 
      return /*...`result` transformed again... */; 
     }) 
     .then(result => anotherAsyncCall(result)) // If no transformation needed when passing it on 
     .then(/*etc.*/); 
} 

これは、すべてのca ll〜thenは約束を返します。約束は、thenコールバックから返された値で解決されるか、約束を返せば、その約束の解決/拒否に基づいて解決/拒否されます。