滝をリファクタリングする方法.then（）

Question

このコードは、アクションを使用してデータを読み込み、シリーズになりますが、このコードを編集するのが難しく、別のAPIの負荷を追加するため、構文がはっきりしません。

this.props.loadNutMatrixes({perPage:'all'}).then(()=>{ 
 
     this.props.loadIngredients().then(()=>{ 
 
     this.props.getBadge().then(()=>{ 
 
      this.props.loadNutInfoItems({perPage:'all'}).then(()=>{ 
 
      this.props.getItemSize().then(()=>{ 
 
       this.props.getSingleMenuCategory(this.props.category_uid).then(()=>{ 
 
       this.props.loadAllStores(({per_page:'all'})).then(()=>{ 
 
        if (this.props.selectedMenuItem){ 
 
        initialize("addNewMenuItem", { 
 
         ...this.props.selectedMenuItem 
 
        }) 
 
        } 
 
       }) 
 
       }) 
 
      }) 
 
      }) 
 
     }) 
 
     }) 
 
    })

Answer 1

あなたは代わりに、ネストの約束を連鎖によって、垂直構造にこれを変換することができます：

this.props.loadNutMatrixes({perPage:'all'}) 
    .then(() => this.props.loadIngredients()) 
    .then(() => this.props.getBadge()) 
    .then(() => this.props.loadNutInfoItems({perPage:'all'})) 
    .then(() => this.props.getItemSize()) 
    .then(() => this.props.getSingleMenuCategory(this.props.category_uid)) 
    .then(() => this.props.loadAllStores(({per_page:'all'}))) 
    .then(() => { 
    if (this.props.selectedMenuItem) { 
     initialize("addNewMenuItem", { 
     ...this.props.selectedMenuItem 
     }) 
    } 
    }); 

可能な改善は、引数なしの関数に引数を受け取るすべての約束-作成機能をラップすることができ、代わりにpropsとしてそれらを渡す：

loadAllNutMatrixes() { 
    return this.loadNutMatrixes({ perPage: 'all' }); 
} 

loadAllNutInfoItems() { 
    return this.loadNutInfoItems({ perPage: 'all' }); 
} 

getSingleMenuCategoryFromId() { 
    return this.getSingleMenuCategory(this.category_uid); 
} 

loadEveryStory() { 
    return this.loadAllStores({ perPage: 'all' }); 
} 

を次に、あなたは、独自のメソッドに最後のステップをリファクタリングできます

onChainFinished() { 
    if (this.props.selectedMenuItem) { 
    initialize("addNewMenuItem", { 
     ...this.props.selectedMenuItem 
    }) 
    } 
} 

そしてクリーナーチェーンを達成するためにいくつかの非構造を持つ2つを組み合わせること：あなたのコメントpromise.allのようなものを使用して

に基づいて

const { props } = this; 
props.loadAllNutMatrixes() 
    .then(props.loadIngredients) 
    .then(props.getBadge) 
    .then(props.loadAllNutInfoItems) 
    .then(props.getItemSize) 
    .then(props.getSingleMenuCategoryFromId) 
    .then(props.loadEveryStore) 
    .then(this.onChainFinished); 

---

EDITをが、シリーズで！

プロミスをチェーンするネイティブメソッドはありませんが、これを行うためのユースケースに適したヘルパーメソッドを構築できます。約束はに依存しない場合

const { props } = this; 
chainPropsPromises([ 
    props.loadAllNutMatrixes, 
    props.loadIngredients, 
    props.getBadge, 
    props.loadAllNutInfoItems, 
    props.getItemSize, 
    props.getSingleMenuCategoryFromId, 
    props.loadEveryStory 
]) 
.then(this.onChainFinished); 

function chainPropsPromises(promises) { 
    return promises.reduce(
    (chain, propsFunc) => (
     chain.then(() => propsFunc()); 
    ), Promise.resolve() 
); 
} 

Answer 2

戻る外側の約束にチェーンをすることを約束します。

this.props.loadNutMatrixes({perPage:'all'}).then(()=>{ 
    return this.props.loadIngredients() 
}) 
.then(()=>{ 
    return this.props.getBadge() 
}) 
.then(()=>{ 
    return this.props.loadNutInfoItems({perPage:'all'}) 
}) 
.then(()=>{ 
    return this.props.getItemSize() 
}) 
.then(()=>{ 
    return this.props.getSingleMenuCategory(this.props.category_uid) 
}); 

... 

Answer 3

：あなたは引数を持つメソッドをリファクタリングするために、上記と同じ方法を使用する場合

// `cp` is a function that creates a promise and 
// `args` is an array of arguments to pass into `cp` 
chainPromises([ 
    { cp: this.props.loadNutMatrixes, args: [{perPage:'all'}] }, 
    { cp: this.props.loadIngredients }, 
    { cp: this.props.getBadge }, 
    { cp: this.props.loadNutInfoItems, args: [{perPage:'all'}] }, 
    { cp: this.props.getItemSize }, 
    { cp: this.props.getSingleMenuCategory, args: [this.props.category_uid] }, 
    { cp: this.props.loadAllStores, args: [{per_page:'all'}] } 
]).then(() => { 
    if (this.props.selectedMenuItem) { 
    initialize("addNewMenuItem", { 
     ...this.props.selectedMenuItem 
    }) 
    } 
}); 

function chainPromises(promises) { 
    return promises.reduce(
    (chain, { cp, args = [] }) => { 
     // append the promise creating function to the chain 
     return chain.then(() => cp(...args)); 
    }, Promise.resolve() // start the promise chain from a resolved promise 
); 
} 

が、それは同様にアップし、このコードをきれいになります。ここでは一般的な例ですお互いに、私はPromise.allを使用したい：

const {props} = this; 
Promise.all([ 
    props.loadNutMatrixes({perPage: 'all'}), 
    props.loadIngredients(), 
    props.getBadge(), 
    props.loadNutInfoItems({perPage: 'all'}), 
    props.getItemSize(), 
    props.getSingleMenuCategory(props.category_uid), 
    props.loadAllStores(({per_page: 'all'})), 
]).then(() => { 
    if (props.selectedMenuItem) initialize("addNewMenuItem", {...props.selectedMenuItem}); 
});