取消之前的请求,仅使用redux observable触发最新请求

Question

所以我有一个用例,我在移动地图时更新了api请求 - 但它可以生成几个带有小地图移动的快速火灾请求 - 我想取消除最后一个之外的所有飞行请求.我可以使用debounce来仅在延迟后发送请求.但是,如果他们碰巧仍在进行中,我仍然想要取消任何旧请求.

const fetchNearbyStoresEpic = action$ =>
  action$.ofType(FETCH_NEARBY_STORES)
    .debounceTime(500)
    .switchMap(action =>
      db.collection('stores')
        .where('location', '<=', action.payload.max).
        .where('location', '>=', action.payload.min)
        .map(response => fetchNearbyStoresFulfilled(response))
        .takeUntil(action$.ofType(FETCH_STORES_CANCELLED))
    );

我看到你可以使用,takeUntil但你需要明确地触发取消操作.我在文档中看到switchMap将采用最新的并取消所有其他的 - 我是否必须在我的api调用中实现取消接口？在这种情况下,它将是对firestore的firebase查询.

Answer 1

根据我在GitHub问题中发表的评论:

因为它们具有时间维度,所以对于可观察量有多种展平策略:

• 使用mergeMap(具有flatMap别名),接收的可观察对象同时订阅,并且它们的发射值被平展到输出流中.
• 使用时concatMap,收到的可观察对象排队并一个接一个地订阅,因为每个完成.(concatMap是mergeMap与一个的并发性.)
• 有switchMap,当收到一个观察者时,它已订阅,并且对以前收到的观察者的任何订阅都是未订阅的.
• 有了exhaustMap,可观察到的接收它的订阅,除非有订制了先前接收观察到的,可观察的尚未完成的时候-在这种情况下,接收观察到的被忽略.

因此,就像马克在答案中所说,当switchMap收到后续行动时,它将取消订阅任何不完整的请求.

但是,在去抖动作进入后,请求才会被取消switchMap.如果您想在另一次移动时立即取消任何待处理的请求 - 而不是等待去抖持续时间 - 您可以使用takeUntil该FETCH_NEARBY_STORES操作:

const fetchNearbyStoresEpic = action$ =>
  action$.ofType(FETCH_NEARBY_STORES)
    .debounceTime(500)
    .switchMap(action =>
      db.collection('stores')
        .where('location', '<=', action.payload.max).
        .where('location', '>=', action.payload.min)
        .map(response => fetchNearbyStoresFulfilled(response))
        .takeUntil(action$.ofType(FETCH_NEARBY_STORES))
    );

这应该会影响另一次移动请求的即时取消订阅.(在我的脑海中,我无法回想起action$in 的行为redux-observable.你可能需要skip(1)在传递给观察者的地方追加一个takeUntil.试试看看.)

而且,正如Mark所提到的,这取决于取消订阅时取消请求的基础实现.

Answer 2

switchMap will abandon its previous observable when a new emission is send through it. Depending on your underlying HTTP library and if it supports cancellation (Observable aware) this should suffice.

因为您的问题中没有提供实现细节，所以您必须fetchNearbyStoresFulfilled查看它是否使用了 Observable 感知 http 客户端。如果它在内部使用 promise，则不提供取消支持。