RxJS如何获取from(mypromise)前的初始payload实现顺序API调用

问题原因 #

你当前的问题是变量名冲突：switchMap回调接收的外层变量名是action，内层map回调的参数也命名为action，外层变量被内层覆盖，自然取不到初始的payload值。

修复方案（解决第一层payload获取问题） #

只需要把内层map的参数改个不冲突的名字即可，直接引用外层switchMap拿到的初始action：

const MyEpic = (action$) =>
action$.pipe(
    ofType(constants.QWERTY_REQUEST),
    switchMap((action) => // 外层的action是初始触发的action，保留引用即可正常访问
        from(
            myApi1.checkCredentials(action.payload.userName, action.payload.password)
        ).pipe(
            // 这里参数名改成api1Res，避免和外层action冲突
            map((api1Res) => {
                return ({type: constants.QWERTY_SUCCESS, payload: action.payload.userName})
            }),
            catchError(() => {
                return of(/* 你的错误处理逻辑 */);
            })
        )
    )
)

按顺序调用两个API的实现 #

如果需要在第一个API调用完成后，用公共参数调用第二个API，直接在内层再加一个switchMap/concatMap即可，参数传递逻辑清晰，也不会出现命名冲突：

const MyEpic = (action$) =>
action$.pipe(
    ofType(constants.QWERTY_REQUEST),
    switchMap((initialAction) => {
        // 提前把公共参数抽出来，后续直接使用，代码可读性更高
        const { userName, password } = initialAction.payload;
        return from(myApi1.checkCredentials(userName, password)).pipe(
            // 第一个API请求完成后，调用第二个API
            switchMap((api1Res) => from(myApi2.anotherRequest(userName, api1Res.someReturnField))),
            // 第二个API请求完成后，返回最终成功action
            map((api2Res) => ({
                type: constants.QWERTY_SUCCESS,
                payload: {
                    userName,
                    api2Data: api2Res
                }
            })),
            catchError(() => of({ type: constants.QWERTY_ERROR }))
        )
    })
)

• 两个API会严格按顺序执行，myApi1请求完成才会发起myApi2的请求
• 公共参数直接从提前抽离的initialAction.payload里取，不用层层传递
• 如果你需要保证请求顺序不被后续新的同类型action打断，可以把switchMap换成concatMap

内容的提问来源于stack exchange，提问作者qwe qwe