観測可能な応答を1つに結合する

Question

複数の観測値からオブジェクト応答を取得するにはどうすればよいですか？私のエピックがある

はこの好き：私は必要なのは、このgetMetaDataSuccess({ couriers, items, airports })ようcourierApi()、itemCategoriesApi()とairportsApi()からの応答で私の機能getMetaDataSuccess()にオブジェクトを渡すことですが、最初に私はすべての3つの約束を待つ必要が

export function metaDataEpic(action$: ActionsObservable<metaDataActions>) { 
    return action$.ofType(META_DATA_REQUEST) 
     .mergeMap((action: metaDataActions) => { 
     const { language } = action; 
     return Observable.merge(
      Observable.fromPromise(couriersApi().then(r => r.json())), 
      Observable.fromPromise(itemCategoriesApi({ language }).then(r => r.json())), 
      Observable.fromPromise(airportsApi().then(r => r.json()))) 
      .flatMap(res => { 
      console.log(res); 
      return Observable.of(getMetaDataSuccess({})) 
      }); 
     }); 
} 

終了し、何らかの形で応答としてオブジェクトに結合します。

私のコードでは、APIの応答を印刷して、getMetaDataSuccessを3回呼び出しています。 enter code here

Answer 1

あなたはこのようなものが欲しいのですか？ mergeMap別名

export function metaDataEpic(action$: ActionsObservable<metaDataActions>) { 
    return action$.ofType(META_DATA_REQUEST) 
     .flatMap(({language}) => Promise.all([ 
      couriersApi(), 
      itemCategoriesApi({language}), 
      airportsApi() 
      ].map(p => p.then(r => r.json())) 
     ) 
     .then(([couriers, items, airports]) => ({couriers, items, airports})) 
    ) 
     .do(console.log) 
     .map(getMetaDataSuccess); 
} 

flatMap約束とArraylike値を直接操作することができます。ここでは、複数の約束の結果を待つためにPromise.allを使用しています。 Promise.allは、各要素が入力配列内の対応する項目の結果である配列に解決されるPromiseを返します。この配列をオブジェクトに変換して渡します。

ダミーデータが動作していることを示しています。

function couriersApi() { 
 
    return Promise.resolve({ 
 
    json:() => [{ 
 
     name: 'x', 
 
     id: 1 
 
    }, { 
 
     name: 'y', 
 
     id: 2 
 
    }] 
 
    }); 
 
} 
 

 
function airportsApi() { 
 
    return Promise.resolve({ 
 
    json:() => [{ 
 
     name: 'ORF', 
 
     id: 1 
 
    }, { 
 
     name: 'JFK', 
 
     id: 2 
 
    }] 
 
    }); 
 
} 
 

 
function itemCategoriesApi({language}) { 
 
    return Promise.resolve({ 
 
    json:() => [{ 
 
     name: 'a', 
 
     language: 'German' 
 
     }, 
 
     { 
 
     name: 'b', 
 
     language: 'English' 
 
     }, 
 
    ].filter(c => c.language === language) 
 
    }); 
 
} 
 
const META_DATA_REQUEST = undefined; 
 
const action$ = { 
 
    ofType:() => Rx.Observable.of({ 
 
    language: 'English' 
 
    }) 
 
}; 
 

 
metaDataEpic(action$) 
 
    .subscribe(); 
 

 
function getMetaDataSuccess(o) { 
 
    console.log(o.couriers); 
 
    console.log(o.items); 
 
    console.log(o.airports); 
 
} 
 

 
function metaDataEpic(action$) { 
 
    return action$.ofType(META_DATA_REQUEST) 
 
    .flatMap(({ 
 
     language 
 
     }) => Promise.all([ 
 
     couriersApi(), 
 
     itemCategoriesApi({ 
 
      language 
 
     }), 
 
     airportsApi() 
 
     ].map(p => p.then(r => r.json()))) 
 
     .then(([couriers, items, airports]) => ({ 
 
     couriers, 
 
     items, 
 
     airports 
 
     })) 
 
    ) 
 
    .do(console.log) 
 
    .map(getMetaDataSuccess); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.6/Rx.js"></script>

Answer 2

私は、彼らはあなたのケースで作業する場合、あなたが試すことができ、私の心に2つのソリューションを持っている：

export function metaDataEpic(action$: ActionsObservable<metaDataActions>) { 
    return action$ 
    .ofType(META_DATA_REQUEST) 
    .mergeMap((action: metaDataActions) => { 
     const {language} = action; 

     const requestObservable = Observable.zip(
      Observable.fromPromise(couriersApi().then(r => r.json())), 
      Observable.fromPromise(
       itemCategoriesApi({language}).then(r => r.json()) 
      ), 
      Observable.fromPromise(airportsApi().then(r => r.json())), 
      (couriers, items, airports) => { 
       return Observable.of(getMetaDataSuccess({ couriers, items, airports }))).map(response => response.value) 
      } 
     ).catch(e => { 
      return Observable.of(getMetaDataFail(e)); 
     }); 

     return requestObservable; 
    }); 
} 

または

export function metaDataEpic(action$: ActionsObservable<metaDataActions>) { 
    return action$ 
    .ofType(META_DATA_REQUEST) 
    .mergeMap((action: metaDataActions) => { 
     const {language} = action; 

     Promise.all(
      [couriersApi(), itemCategoriesApi({language}), airportsApi()].map(p => 
       p.then(r => r.json()) 
      ) 
     ) 
     .then(([couriers, items, airports]) => { 
      return Observable.of(getMetaDataSuccess({couriers, items, airports})); 
     }) 
     .catch(e => { 
      return Observable.of(getMetaDataFail(e)); 
     }); 
    }); 
}