如何解决响应redux-observable:在史诗中进行顺序的API调用
我正在尝试使用redux-observable进行顺序API调用。来自第一个API调用的结果数据应用于进行下一个API。 This post解释了如何在Angular中使用rxjs进行操作,但是我无法转移知识。
我已经编码了两个史诗,我想将它们组合在一起:
const createList: Epic = (action$) => action$.pipe(
/*
* Post a new empty list
*/
ofType(CREATE_LIST),switchMap(({ payload }) => {
const [postData,config] = prepareListRequest(payload);
return from(axios.post<IAPIList>('http://127.0.0.1:8000/lists/',postData,config))
.pipe(
map(({ data }) => createListSuccessAction(data)),catchError((err) => of(ErrorAction(err))),);
}),);
const createItem: Epic = (action$) => action$.pipe(
/*
* Post a new item. Here the listID is in the payload.
*/
ofType(CREATE_ITEM),config] = prepareItemRequest(payload);
return from(axios.post<IAPIItem>('http://127.0.0.1:8000/items/',config,))
.pipe(
map(({ data }) => createItemSuccessAction(data)),);
我的目标:第一个调用发布一个空列表,第二个调用获取list.id响应,该响应从服务器发送回并为该列表发布一个项目。 (为了使我的目标清晰而简化)
const createPopulatedList: Epic = (action$) => action$.pipe(
ofType(CREATE_POPULATED_LIST),res = firstAPICall(payload.list)
secondAPICall(payload.item,res.id)
);
提前感谢您的时间:)
解决方法
利用RxJS的功能将诺言自动转换为可观察对象,并使用mergeMap
+异步函数。
const createPopulatedList = (action$) => action$.pipe(
ofType(CREATE_POPULATED_LIST),mergeMap(async ({ list,item }) => {
const { id } = await firstAPICall(list);
return secondAPICall(item,id);
})
);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。