redux 可观测值之间的延迟时间- RxJS

nkcskrwz  于 2022-11-12  发布在  其他
关注(0)|答案(2)|浏览(143)

我正在使用redux-oservable,并且在我的observable上有一个定时问题。我想在数组中的值的发送之间引入一个延迟。
我正在创作的史诗现在看起来是这样的:

export const fileImportEpi = (
  action$: any,
  state$: any,
  { apiClient }: IDependencies
) =>
  action$.pipe(
    ofType(FILE_IMPORT),
    withLatestFrom(state$),
    mergeMap(([{ payload }]: any) => { // Input is a 2 element array of objects, where the first object contains the payload key
      const { id, file, config = {} } = payload
      const headers = {
        'Content-Type': 'application/zip',
        Filename: file.name,
      }

      return from(
        apiClient.post(('import', file, {
          ...config,
          headers,
        })
      ).pipe(
        mapTo(fileSuccessAction(id)),
        catchError((error) => {
          return of(
            apiErrorAction(error.response ? error.response.data : error),
            fileAttrsUpdateAction(id, {
              error: error.response ? error.response.data : error,
            }),
            fileFailAction(id)
          )
        }) // Catch
      ) // Pipe
    }) // MergeMap
  )

问题是它基本上会立即启动所有的POST请求,这会导致后端出现问题。我想做的是在每个POST请求的发出之间引入一个延迟(比如20 ms)。
我似乎不能使这个工作虽然。无论我引入的延迟似乎只是启动所有的后请求迟早,但从来没有与延迟 * 之间 * 每个请求。我怎么能去做这件事?
(You我可以说这个问题应该在后端修复,但是目前这不是一个真正的选择。)
编辑:
为了说明我也尝试过的另一种方法:

export const fileImportEpic = (
  action$: any,
  state$: any,
  { fpiClient }: IDependencies
) =>
  action$.pipe(
    ofType(FILE_IMPORT),
    withLatestFrom(state$),

    mergeMap(([{ payload }]: any) => {
      // mergeMap(([{ payload }]: any) => { // Input looks like: [{payload: obj, otheKeys:...}, {type:val, otherKeys:...}] (Ie. a 2 element array where the first element contains the payload)

      const { id, file, config = {} } = payload
      const headers = {
        'Content-Type': 'application/zip',
        Filename: file.name,
      }
      const pl = [payload]

      // Try to release each part of the payload with a delay in between, instead of returning a post request promise
      return from(pl).pipe(
        delay(3000),
        mergeMap((payload: any) => {
          const { id, file, config = {} } = payload
          const headers = {
            'Content-Type': 'application/zip',
            Filename: file.name,
          }

          return from(
            apiClient.post('archives/import', file, {
              ...config,
              headers,
            })
          ).pipe(
            mapTo(fileSuccessAction(id)),
            catchError((error) => {
              return of(
                apiErrorAction(error.response ? error.response.data : error),
                fileAttrsUpdateAction(id, {
                  error: error.response ? error.response.data : error,
                }),
                fileFailAction(id)
              )
            }) // Catch
          )
        })
      ) // Pipe
    }) // MergeMap 1
  )

相关问题